From 7195431d8c915c76730243b11d66fedf7fe1bb47 Mon Sep 17 00:00:00 2001 From: Robert Kaussow Date: Fri, 10 Jun 2022 21:44:08 +0200 Subject: [PATCH] fix: improve keyboard accessability for anchors and code blocks (#434) --- exampleSite/static/custom.css.example | 20 +++++-- layouts/_default/_markup/render-heading.html | 2 +- src/sass/_base.scss | 26 ++++----- src/sass/_chroma_base.scss | 60 +++++++------------- src/sass/_color_mode.scss | 25 ++++---- src/sass/_markdown.scss | 8 ++- webpack.config.js | 2 +- 7 files changed, 64 insertions(+), 79 deletions(-) diff --git a/exampleSite/static/custom.css.example b/exampleSite/static/custom.css.example index 2c6c213..7f989d0 100644 --- a/exampleSite/static/custom.css.example +++ b/exampleSite/static/custom.css.example @@ -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; diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html index 35364ab..3541446 100644 --- a/layouts/_default/_markup/render-heading.html +++ b/layouts/_default/_markup/render-heading.html @@ -6,7 +6,7 @@
{{ .Text | safeHTML }} - + diff --git a/src/sass/_base.scss b/src/sass/_base.scss index 5aa423c..23c93e4 100644 --- a/src/sass/_base.scss +++ b/src/sass/_base.scss @@ -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; diff --git a/src/sass/_chroma_base.scss b/src/sass/_chroma_base.scss index 2e36447..bc3ee8c 100644 --- a/src/sass/_chroma_base.scss +++ b/src/sass/_chroma_base.scss @@ -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%; diff --git a/src/sass/_color_mode.scss b/src/sass/_color_mode.scss index 164d1c1..f4d36a3 100644 --- a/src/sass/_color_mode.scss +++ b/src/sass/_color_mode.scss @@ -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")}; } diff --git a/src/sass/_markdown.scss b/src/sass/_markdown.scss index 6ac88d6..f54230b 100644 --- a/src/sass/_markdown.scss +++ b/src/sass/_markdown.scss @@ -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 { diff --git a/webpack.config.js b/webpack.config.js index 8defb8a..f0064be 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -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] } }