feat: display header anchor on hover (CaiJimmy#999)

albanpetit · May 3, 2024 · 36d6f0d · 36d6f0d
1 parent 780be20
commit 36d6f0d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/assets/scss/partials/layout/article.scss b/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 {

diff --git a/layouts/_default/_markup/render-heading.html b/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 }}>