feat: display header anchor on hover (#999)

assets/scss/partials/layout/article.scss

@@ -222,6 +222,24 @@
         margin-inline-start: calc((var(--card-padding)) * -1);
         padding-inline-start: calc(var(--card-padding) - var(--heading-border-size));
         border-inline-start: var(--heading-border-size) solid var(--accent-color);
+        position: relative;
+
+        a.header-anchor {
+            transition: opacity 0.3s ease;
+            opacity: 0;
+            position: absolute;
+            left: 0;
+            width: var(--card-padding);
+            text-align: center;
+            color: var(--accent-color);
+        }
+
+        &:hover,
+        &:focus {
+            a.header-anchor {
+                opacity: 1;
+            }
+        }
     }
 
     figure {

layouts/_default/_markup/render-heading.html

@@ -1,4 +1,4 @@
 <h{{ .Level }} id="{{ .Anchor }}">
-    <a href="#{{ .Anchor }}">#</a>
+    <a href="#{{ .Anchor }}" class="header-anchor">#</a>
     {{ .Text | safeHTML }}
 </h{{ .Level }}>