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

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;
@@ -59,7 +61,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;
@@ -96,10 +100,12 @@
   --code-background: #2f353a;
   --code-accent-color: #262b2f;
   --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: #2b3035;
@@ -131,10 +137,12 @@
     --code-background: #2f353a;
     --code-accent-color: #262b2f;
     --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: #2b3035;

layouts/_default/_markup/render-heading.html

@@ -7,7 +7,7 @@
     <h{{ .Level }} id="{{ .Anchor | safeURL }}">
         {{ .Text | safeHTML }}
     </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>
     </a>
 </div>

src/sass/_base.scss

@@ -339,17 +339,7 @@ svg.gblog-icon {
   }
 
   &__anchor {
-    min-width: 30px;
+    margin-left: $padding-8;
-
-    &--left {
-      position: absolute;
-      margin-left: -25px;
-      text-align: left;
-    }
-
-    &--right {
-      text-align: right;
-    }
 
     svg.gblog-icon {
       font-size: $font-size-20;
@@ -357,7 +347,8 @@ svg.gblog-icon {
     }
 
     &:hover,
-    &:visited:hover {
+    &:visited:hover,
+    &:focus svg.gblog-icon {
       color: var(--control-icons);
       background: none;
     }
@@ -463,11 +454,11 @@ svg.gblog-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;
 

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.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 {
     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 {
+  .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) {
     width: 100%;

src/sass/_color_mode.scss

@@ -14,10 +14,6 @@
   --link-color-visited: #{$link-color-visited};
   --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: #{$gray-200};
   --accent-color-lite: #{$gray-100};
@@ -82,8 +78,7 @@
 
   .gblog-markdown {
     .gblog-hint,
-    .admonitionblock,
+    .admonitionblock {
-    .gblog-post__codecopy--success {
       filter: saturate(2.5) brightness(0.85);
     }
 
@@ -101,6 +96,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 {
@@ -110,4 +110,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")};
 }

src/sass/_markdown.scss

@@ -153,13 +153,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 {

webpack.config.js

@@ -137,7 +137,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]
               }
             }