anchored-headings: port to PaperMod

- add corresponding css
- gen anchored headings for h1-h6
- link with single.html

assets/css/post-single.css

@@ -315,6 +315,18 @@
     transform: scale(0.96);
 }
 
+h1:hover .anchor,
+h2:hover .anchor,
+h3:hover .anchor,
+h4:hover .anchor,
+h5:hover .anchor,
+h6:hover .anchor {
+    display: inline-flex;
+    color: var(--secondary);
+    margin-inline-start: 8px;
+    font-weight: 500;
+}
+
 @media screen and (max-width: 600px) {
     .post-content blockquote {
         margin: 0 calc(var(--gap) * -1);

layouts/_default/single.html

@@ -41,7 +41,9 @@
     </details>
   </div>
   {{- end }}
-  <div class="post-content">{{ .Content }}</div>
+  <div class="post-content">
+    {{- partial "anchored_headings.html" .Content -}}
+  </div>
   <footer class="post-footer">
     {{- if .Params.tags }}
     <ul class="post-tags">

layouts/partials/anchored_headings.html

@@ -1,2 +1,2 @@
 <!-- formats .Content headings by adding an anchor -->
-{{ . | replaceRE "(<h[2-3] id=\"([^\"]+)\".+)(</h[2-9]+>)" "${1}<a class=\"anchor\" href=\"#${2}\">#</a>${3}" | safeHTML }}
+{{ . | replaceRE "(<h[1-6] id=\"([^\"]+)\".+)(</h[1-6]+>)" "${1}<a hidden class=\"anchor\" aria-hidden=\"true\" href=\"#${2}\">#</a>${3}" | safeHTML }}