Proper support for heading anchors

content/_index.md

@@ -1,4 +1,5 @@
 +++
+insert_anchor_links = "right"
 +++
 
 {% crt() %}

sass/_icon.scss

@@ -0,0 +1,7 @@
+i.icon {
+    display: inline-block;
+    font-style: normal;
+    font-variant: normal;
+    line-height: 1;
+    text-rendering: auto;
+}

sass/_main.scss

@@ -50,6 +50,7 @@ body {
 
 	@keyframes highlight-in-out {
 		50% {
+			font-weight: bolder;
 			letter-spacing: 0.125rem;
 		}
 	}
@@ -77,17 +78,6 @@ h6 {
 	line-height: normal;
 	font-family: var(--font-serif);
 	letter-spacing: -0.05em;
-
-	.zola-anchor {
-		display: none;
-		visibility: hidden;
-	}
-
-	&:hover .zola-anchor {
-		display: inline-block;
-		visibility: visible;
-		text-decoration: none;
-	}
 }
 
 h1 {
@@ -240,10 +230,6 @@ pre {
 				background-color: var(--fg-muted-4);
 				width: 1rem;
 				height: 1rem;
-				font-style: normal;
-				font-variant: normal;
-				line-height: 1;
-				text-rendering: auto;
 			}
 		}
 	}

sass/_zola-anchor.scss

@@ -0,0 +1,21 @@
+.zola-anchor {
+    margin: 0 0.25em;
+
+    &:hover i {
+        background-color: var(--primary-color);
+    }
+
+    i {
+        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 4C1.8 4 0 5.8 0 8s1.8 4 4 4v-2c-1.125 0-2-.875-2-2s.875-2 2-2h3c1.125 0 2 .875 2 2 0 .84-.496 1.535-1.207 1.84l.785 1.84A4 4 0 0 0 11 8c0-2.2-1.8-4-4-4zm8 2v2c1.125 0 2 .875 2 2s-.875 2-2 2H9c-1.125 0-2-.875-2-2 0-.828.484-1.516 1.184-1.828l-.817-1.828A4.01 4.01 0 0 0 5 10c0 2.2 1.8 4 4 4h3c2.2 0 4-1.8 4-4s-1.8-4-4-4'/%3E%3C/svg%3E");
+        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 4C1.8 4 0 5.8 0 8s1.8 4 4 4v-2c-1.125 0-2-.875-2-2s.875-2 2-2h3c1.125 0 2 .875 2 2 0 .84-.496 1.535-1.207 1.84l.785 1.84A4 4 0 0 0 11 8c0-2.2-1.8-4-4-4zm8 2v2c1.125 0 2 .875 2 2s-.875 2-2 2H9c-1.125 0-2-.875-2-2 0-.828.484-1.516 1.184-1.828l-.817-1.828A4.01 4.01 0 0 0 5 10c0 2.2 1.8 4 4 4h3c2.2 0 4-1.8 4-4s-1.8-4-4-4'/%3E%3C/svg%3E");
+        mask-size: cover;
+        transition: background-color var(--transition);
+        background-color: var(--fg-muted-4);
+        width: 1em;
+        height: 1em;
+    }
+}
+
+:target .zola-anchor i {
+    background-color: var(--primary-color-alpha);
+}

sass/style.scss

@@ -14,6 +14,7 @@
 @use "comments";
 @use "crt";
 @use "footer";
+@use "icon";
 @use "johnvertisement";
 @use "links";
 @use "media";
@@ -22,3 +23,4 @@
 @use "post-nav";
 @use "statements";
 @use "tags";
+@use "zola-anchor";

static/copy-button.js

@@ -7,6 +7,8 @@ document.addEventListener("DOMContentLoaded", function () {
             let button = document.createElement("button");
             let icon = document.createElement("i");
 
+            icon.classList.add("icon");
+
             button.appendChild(icon);
             block.appendChild(button);
 

templates/anchor-link.html

@@ -0,0 +1 @@
+<a class="zola-anchor" href="#{{ id }}" aria-label="Anchor link for: {{ id }}"><i class="icon"></i></a>