Add anchor tag icon

maxmind · Sep 18, 2024 · 64269f3 · 64269f3
1 parent f678267
commit 64269f3
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/assets/scss/index.scss b/assets/scss/index.scss
@@ -42,3 +42,24 @@
 :target {
   scroll-margin-top: 100px;
 }
+
+
+a.heading-anchor {
+  &:hover {
+    text-decoration: none;
+
+    &::before {
+      opacity: 1;
+    }
+  }
+
+  &::before {
+    content: '#';
+    color: var(--mm-color-logo-blue-light);
+    font-size: 17px;
+    left: -15px;
+    opacity: 0;
+    position: absolute;
+    transition: opacity 0.1s ease-in-out;
+  }
+}
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
@@ -1,3 +1,3 @@
 <h{{ .Level }} id="{{ .Anchor }}">
-  <a href="#{{ .Anchor }}">{{ .Text }}</a>
+  <a class="heading-anchor" href="#{{ .Anchor }}">{{ .Text }}</a>
 </h{{ .Level }}>
diff --git a/layouts/shortcodes/release-note.html b/layouts/shortcodes/release-note.html
@@ -4,7 +4,7 @@
 
 <div class="release-note" data-title="{{ $title }}" data-date="{{ $date }}" data-anchor="{{ $anchor }}">
   <h2 class="release-note__title" id="{{ $anchor }}">
-    <a href="#{{ $anchor }}">{{ $title }}</a>
+    <a class="heading-anchor" href="#{{ $anchor }}">{{ $title }}</a>
   </h2>
   <em class="release-note__date">
     {{ $date | time.Format ":date_long" }}