fix: improve keyboard accessability for anchors and code blocks (#259)

This commit is contained in:
Robert Kaussow 2022-06-10 22:16:14 +02:00 committed by GitHub
parent 12abc0ad27
commit f9437ae997
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 57 additions and 71 deletions

View File

@ -24,7 +24,9 @@
--code-background: #f5f6f8; --code-background: #f5f6f8;
--code-accent-color: #e3e7eb; --code-accent-color: #e3e7eb;
--code-accent-color-lite: #eff1f3; --code-accent-color-lite: #eff1f3;
--code-font-color: #5f5f5f;
--code-copy-background: #f5f6f8;
--code-copy-font-color: #6b7784; --code-copy-font-color: #6b7784;
--code-copy-border-color: #adb4bc; --code-copy-border-color: #adb4bc;
--code-copy-success-color: #00c853; --code-copy-success-color: #00c853;
@ -59,7 +61,9 @@
--code-background: #f5f6f8; --code-background: #f5f6f8;
--code-accent-color: #e3e7eb; --code-accent-color: #e3e7eb;
--code-accent-color-lite: #eff1f3; --code-accent-color-lite: #eff1f3;
--code-font-color: #5f5f5f;
--code-copy-background: #f5f6f8;
--code-copy-font-color: #6b7784; --code-copy-font-color: #6b7784;
--code-copy-border-color: #adb4bc; --code-copy-border-color: #adb4bc;
--code-copy-success-color: #00c853; --code-copy-success-color: #00c853;
@ -96,10 +100,12 @@
--code-background: #2f353a; --code-background: #2f353a;
--code-accent-color: #262b2f; --code-accent-color: #262b2f;
--code-accent-color-lite: #2b3035; --code-accent-color-lite: #2b3035;
--code-font-color: #b9b9b9;
--code-copy-font-color: #adb4bc; --code-copy-background: #343a40;
--code-copy-border-color: #808c98; --code-copy-font-color: #6b7784;
--code-copy-success-color: #00c853; --code-copy-border-color: #6b7784;
--code-copy-success-color: #37905c;
--accent-color-dark: #222629; --accent-color-dark: #222629;
--accent-color: #2b3035; --accent-color: #2b3035;
@ -131,10 +137,12 @@
--code-background: #2f353a; --code-background: #2f353a;
--code-accent-color: #262b2f; --code-accent-color: #262b2f;
--code-accent-color-lite: #2b3035; --code-accent-color-lite: #2b3035;
--code-font-color: #b9b9b9;
--code-copy-font-color: #adb4bc; --code-copy-background: #343a40;
--code-copy-border-color: #808c98; --code-copy-font-color: #6b7784;
--code-copy-success-color: #00c853; --code-copy-border-color: #6b7784;
--code-copy-success-color: #37905c;
--accent-color-dark: #222629; --accent-color-dark: #222629;
--accent-color: #2b3035; --accent-color: #2b3035;

View File

@ -7,7 +7,7 @@
<h{{ .Level }} id="{{ .Anchor | safeURL }}"> <h{{ .Level }} id="{{ .Anchor | safeURL }}">
{{ .Text | safeHTML }} {{ .Text | safeHTML }}
</h{{ .Level }}> </h{{ .Level }}>
<a data-clipboard-text="{{ .Page.Permalink }}#{{ .Anchor | safeURL }}" class="gblog-post__anchor gblog-post__anchor--right clip" aria-label="Anchor {{ .Text | safeHTML }}" href="#{{ .Anchor | safeURL }}"> <a data-clipboard-text="{{ .Page.Permalink }}#{{ .Anchor | safeURL }}" class="gblog-post__anchor clip flex align-center" aria-label="Anchor {{ .Text | safeHTML }}" href="#{{ .Anchor | safeURL }}">
<svg class="gblog-icon gblog_link"><use xlink:href="#gblog_link"></use></svg> <svg class="gblog-icon gblog_link"><use xlink:href="#gblog_link"></use></svg>
</a> </a>
</div> </div>

View File

@ -339,17 +339,7 @@ svg.gblog-icon {
} }
&__anchor { &__anchor {
min-width: 30px; margin-left: $padding-8;
&--left {
position: absolute;
margin-left: -25px;
text-align: left;
}
&--right {
text-align: right;
}
svg.gblog-icon { svg.gblog-icon {
font-size: $font-size-20; font-size: $font-size-20;
@ -357,7 +347,8 @@ svg.gblog-icon {
} }
&:hover, &:hover,
&:visited:hover { &:visited:hover,
&:focus svg.gblog-icon {
color: var(--control-icons); color: var(--control-icons);
background: none; background: none;
} }
@ -463,11 +454,11 @@ svg.gblog-icon {
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
top: 0.5rem; top: 0.5rem;
right: 0.5rem; right: 1rem;
border: $border-2 solid var(--code-copy-border-color); border: $border-2 solid var(--code-copy-border-color);
border-radius: $border-radius; border-radius: $border-radius;
background: var(--code-background); background: var(--code-copy-background);
width: 2.2rem; width: 2.2rem;
height: 2.2rem; height: 2.2rem;

View File

@ -2,31 +2,6 @@
.chroma { .chroma {
color: var(--code-font-color); color: var(--code-font-color);
} }
.chroma code {
background-color: var(--code-background);
display: block;
line-height: 1.45;
font-size: 0.85em;
border-radius: $border-radius;
}
.chroma .lntable {
max-height: var(--code-max-height);
code {
max-height: none;
}
}
.chroma .lntable td:first-child code {
border-radius: 0;
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
.chroma .lntable td:nth-child(2) code {
border-radius: 0;
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
padding-left: 0.5em;
}
.chroma .lntable td:nth-child(2) code .hl { .chroma .lntable td:nth-child(2) code .hl {
width: auto; width: auto;
margin-left: -0.5em; margin-left: -0.5em;
@ -34,36 +9,39 @@
} }
.highlight { .highlight {
overflow: auto;
max-height: var(--code-max-height);
pre.chroma { pre.chroma {
margin: 0; margin: 0;
}
> pre.chroma code {
padding: 1rem;
width: 100%; width: 100%;
overflow-x: auto; overflow: auto;
max-height: var(--code-max-height);
} }
} }
/* LineTable */ /* LineTable */
.chroma .lntable { .chroma .lntable {
border: $border-1 solid var(--code-accent-color);
border-radius: $border-radius;
border-spacing: 0; border-spacing: 0;
padding: 0; padding: 0;
margin: 0; margin: 0;
border: 0;
width: 100%; width: 100%;
display: block; display: block;
max-height: var(--code-max-height);
overflow: auto;
pre.chroma {
max-height: none;
border-radius: 0;
}
} }
.chroma .lntable td:first-child code { .chroma .lntable td:first-child {
background-color: var(--code-accent-color-lite); code {
border-right: $border-1 solid var(--code-accent-color); background-color: var(--code-accent-color-lite);
padding: 0.5em 0; border-right: $border-1 solid var(--code-accent-color);
} padding-left: 0;
.chroma .lntable td code { padding-right: 0;
padding: 0.5em 0; border-radius: 0;
}
} }
.chroma .lntable td:nth-child(2) { .chroma .lntable td:nth-child(2) {
width: 100%; width: 100%;

View File

@ -14,10 +14,6 @@
--link-color-visited: #{$link-color-visited}; --link-color-visited: #{$link-color-visited};
--link-color-footer: #{$link-color-footer}; --link-color-footer: #{$link-color-footer};
--code-copy-font-color: #{lighten($body-font-color, 24)};
--code-copy-border-color: #{lighten($body-font-color, 48)};
--code-copy-success-color: #{map.get($hint-colors, "ok")};
--accent-color-dark: #{$gray-600}; --accent-color-dark: #{$gray-600};
--accent-color: #{$gray-200}; --accent-color: #{$gray-200};
--accent-color-lite: #{$gray-100}; --accent-color-lite: #{$gray-100};
@ -82,8 +78,7 @@
.gblog-markdown { .gblog-markdown {
.gblog-hint, .gblog-hint,
.admonitionblock, .admonitionblock {
.gblog-post__codecopy--success {
filter: saturate(2.5) brightness(0.85); filter: saturate(2.5) brightness(0.85);
} }
@ -101,6 +96,11 @@
--code-accent-color: #{darken($code-background-dark, 4)}; --code-accent-color: #{darken($code-background-dark, 4)};
--code-accent-color-lite: #{darken($code-background-dark, 2)}; --code-accent-color-lite: #{darken($code-background-dark, 2)};
--code-font-color: #{$code-font-color-dark}; --code-font-color: #{$code-font-color-dark};
--code-copy-background: #{$body-background-dark};
--code-copy-font-color: #{lighten($body-font-color, 24)};
--code-copy-border-color: #{lighten($body-font-color, 24)};
--code-copy-success-color: #{scale-color(map.get($hint-colors, "ok"), $alpha: -55%)};
} }
@mixin code_theme_light { @mixin code_theme_light {
@ -110,4 +110,9 @@
--code-accent-color: #{darken($code-background, 6)}; --code-accent-color: #{darken($code-background, 6)};
--code-accent-color-lite: #{darken($code-background, 2)}; --code-accent-color-lite: #{darken($code-background, 2)};
--code-font-color: #{$code-font-color}; --code-font-color: #{$code-font-color};
--code-copy-background: #{$code-background};
--code-copy-font-color: #{lighten($body-font-color, 24)};
--code-copy-border-color: #{lighten($body-font-color, 48)};
--code-copy-success-color: #{map.get($hint-colors, "ok")};
} }

View File

@ -153,13 +153,17 @@
margin: 1rem 0; margin: 1rem 0;
} }
code {
padding: 0.2em 0.4em;
}
pre,
code { code {
background-color: var(--code-background); background-color: var(--code-background);
border-radius: $border-radius; border-radius: $border-radius;
color: var(--code-font-color); color: var(--code-font-color);
font-size: 0.85em; font-size: 0.85rem;
line-height: 1.45em; line-height: 1.45em;
padding: 0.2em 0.4em;
} }
pre code { pre code {

View File

@ -137,7 +137,7 @@ module.exports = (env, argv) => {
// FIXME: https://github.com/webpack-contrib/sass-loader/issues/962#issuecomment-1002675051 // FIXME: https://github.com/webpack-contrib/sass-loader/issues/962#issuecomment-1002675051
sourceMap: argv.mode === "development" ? true : false, sourceMap: argv.mode === "development" ? true : false,
sourceMapEmbed: argv.mode === "development" ? true : false, sourceMapEmbed: argv.mode === "development" ? true : false,
outputStyle: "compressed", outputStyle: argv.mode === "development" ? "expanded" : "compressed",
includePaths: [nodeModulesPath] includePaths: [nodeModulesPath]
} }
} }