From 130e2f660788c0b41f504973fb63214bce661d8b Mon Sep 17 00:00:00 2001
From: Jimmy Cai <hi@jimmycai.com>
Date: Sat, 30 Mar 2024 23:22:18 +0100
Subject: [PATCH] feat: display header anchor on hover (#999)

---
 assets/scss/partials/layout/article.scss     | 18 ++++++++++++++++++
 layouts/_default/_markup/render-heading.html |  2 +-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss
index 695d656..54c69eb 100644
--- 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
index aa12d7d..af79692 100644
--- 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 }}>
\ No newline at end of file