update for toc anchor links

.build.yml

@@ -9,7 +9,7 @@ environment:
   proxy: ficd.srht.site
   repo: ficd.sh
   zona_repo: git+https://git.sr.ht/~ficd/zona
-  zona_ref: 0ee8094cc9c366a813d8f7938d35a9be7f7647e1
+  zona_ref: 55df755596192ae67b5119f520be4f5c150d6789
 tasks:
   - build: |
       if [ "$GIT_REF" = "refs/heads/main" ]; then

content/blog/building-my-own-ssg.md

@@ -39,7 +39,7 @@ into it!
 
 [TOC]
 
-## [Zonelets] & [Zoner]
+## Zonelets & Zoner
 
 I don't remember how I found out about the small web,[^small-web], but I
 _do_ recall how it immediately sparked something in me. As an autist with

content/static/style.css

@@ -17,6 +17,46 @@ body {
     padding-left: calc(100vw - 100%);
 }
 
+.toclink {
+  position: relative;
+  text-decoration: none;
+  color: inherit;
+}
+
+.toclink::before {
+  content: "#";
+  position: absolute;
+  right: 100%;
+  margin-right: 0.25em;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+h1 .toclink::before {
+  content: "#";
+}
+
+h2 .toclink::before {
+  content: "#";
+}
+
+h3 .toclink::before {
+  content: "##";
+}
+
+h4 .toclink::before {
+  content: "###";
+}
+
+.toclink:hover::before {
+  opacity: 1;
+}
+.toclink:hover {
+  background-color: transparent;
+}
+
 /* h1, */
 h2,
 h3,
@@ -130,7 +170,7 @@ pre {
     white-space: pre;
     word-wrap: break-word;
     overflow-wrap: break-word;
-    font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
+    font-family: monospace;
     font-size: 0.95em;
 }
 
@@ -283,7 +323,7 @@ tbody tr:hover {
 }
 
 table code {
-    font-family: 'Fira Code', 'Consolas', monospace;
+    font-family: monospace;
     font-size: 0.85em;
     background: #1d1d1d;
     padding: 0.1em 0.25em;