github
/
hugo-geekdoc
mirror of https://github.com/thegeeklab/hugo-geekdoc.git
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
Robert Kaussow 2022-06-10 21:44:08 +02:00 committed by GitHub
parent ed5c770d57
commit 7195431d8c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 64 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
exampleSite/static/custom.css.example
View File

@ -24,7 +24,9 @@
--code-background: #f5f6f8;
--code-accent-color: #e3e7eb;
--code-accent-color-lite: #eff1f3;
--code-font-color: #5f5f5f;
--code-copy-background: #f5f6f8;
--code-copy-font-color: #6b7784;
--code-copy-border-color: #adb4bc;
--code-copy-success-color: #00c853;
@ -58,7 +60,9 @@
--code-background: #f5f6f8;
--code-accent-color: #e3e7eb;
--code-accent-color-lite: #eff1f3;
--code-font-color: #5f5f5f;
--code-copy-background: #f5f6f8;
--code-copy-font-color: #6b7784;
--code-copy-border-color: #adb4bc;
--code-copy-success-color: #00c853;
@ -94,10 +98,12 @@
--code-background: #2f353a;
--code-accent-color: #262b2f;
--code-accent-color-lite: #2b3035;
--code-font-color: #b9b9b9;
--code-copy-font-color: #adb4bc;
--code-copy-border-color: #808c98;
--code-copy-success-color: #00c853;
--code-copy-background: #343a40;
--code-copy-font-color: #6b7784;
--code-copy-border-color: #6b7784;
--code-copy-success-color: #37905c;
--accent-color: #2b3035;
--accent-color-lite: #2f353a;
@ -128,10 +134,12 @@
--code-background: #2f353a;
--code-accent-color: #262b2f;
--code-accent-color-lite: #2b3035;
--code-font-color: #b9b9b9;
--code-copy-font-color: #adb4bc;
--code-copy-border-color: #808c98;
--code-copy-success-color: #00c853;
--code-copy-background: #343a40;
--code-copy-font-color: #6b7784;
--code-copy-border-color: #6b7784;
--code-copy-success-color: #37905c;
--accent-color: #2b3035;
--accent-color-lite: #2f353a;

2
layouts/_default/_markup/render-heading.html
View File

@ -6,7 +6,7 @@
<div class="gdoc-page__anchorwrap">
<h{{ .Level }} id="{{ .Anchor | safeURL }}">
{{ .Text | safeHTML }}
<a data-clipboard-text="{{ .Page.Permalink }}#{{ .Anchor | safeURL }}" class="gdoc-page__anchor gdoc-page__anchor--right clip" title="{{ i18n "title_anchor_prefix" }} {{ .Text | safeHTML }}" aria-label="{{ i18n "title_anchor_prefix" }} {{ .Text | safeHTML }}" href="#{{ .Anchor | safeURL }}">
<a data-clipboard-text="{{ .Page.Permalink }}#{{ .Anchor | safeURL }}" class="gdoc-page__anchor clip flex align-center" title="{{ i18n "title_anchor_prefix" }} {{ .Text | safeHTML }}" aria-label="{{ i18n "title_anchor_prefix" }} {{ .Text | safeHTML }}" href="#{{ .Anchor | safeURL }}">
<svg class="gdoc-icon gdoc_link"><use xlink:href="#gdoc_link"></use></svg>
</a>
</h{{ .Level }}>

26
src/sass/_base.scss
View File

@ -412,23 +412,19 @@ svg.gdoc-icon {
}
&__anchor {
min-width: 30px;
&--left {
position: absolute;
margin-left: -25px;
text-align: left;
}
&--right {
text-align: right;
}
margin-left: $padding-8;
svg.gdoc-icon {
width: 1.4rem;
height: 1.4rem;
width: 1.4em;
height: 1.4em;
color: transparent;
}
&:focus {
svg.gdoc-icon {
color: var(--control-icons);
}
}
}
&__footer {
@ -523,11 +519,11 @@ svg.gdoc-icon {
visibility: hidden;
position: absolute;
top: 0.5rem;
right: 0.5rem;
right: 1rem;
border: $border-2 solid var(--code-copy-border-color);
border-radius: $border-radius;
background: var(--code-background);
background: var(--code-copy-background);
width: 2.2rem;
height: 2.2rem;

60
src/sass/_chroma_base.scss
View File

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

25
src/sass/_color_mode.scss
View File

@ -13,10 +13,6 @@
--link-color: #{$link-color};
--link-color-visited: #{$link-color-visited};
--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: #{$gray-200};
--accent-color-lite: #{$gray-100};
@ -36,8 +32,7 @@
.gdoc-markdown {
.gdoc-hint,
.gdoc-props__tag,
.admonitionblock,
.gdoc-post__codecopy--success {
.admonitionblock {
filter: none;
}
@ -63,11 +58,6 @@
--link-color: #{$link-color-dark};
--link-color-visited: #{$link-color-visited-dark};
--code-background: #{$code-background-dark};
--code-accent-color: #{darken($code-background-dark, 4)};
--code-accent-color-lite: #{darken($code-background-dark, 2)};
--code-font-color: #{$code-font-color-dark};
--accent-color: #{darken($body-background-dark, 4)};
--accent-color-lite: #{darken($body-background-dark, 2)};
@ -87,8 +77,7 @@
.gdoc-markdown {
.gdoc-hint,
.gdoc-props__tag,
.admonitionblock,
.gdoc-post__codecopy--success {
.admonitionblock {
filter: saturate(2.5) brightness(0.85);
}
@ -106,6 +95,11 @@
--code-accent-color: #{darken($code-background-dark, 4)};
--code-accent-color-lite: #{darken($code-background-dark, 2)};
--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 {
@ -115,4 +109,9 @@
--code-accent-color: #{darken($code-background, 6)};
--code-accent-color-lite: #{darken($code-background, 2)};
--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")};
}

8
src/sass/_markdown.scss
View File

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

2
webpack.config.js
View File

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