Add a render template for headings

Create heading anchors and style them with colors and stuff

assets/styles/root/002_colors.css

@@ -29,6 +29,7 @@
   --header-border-color: var(--separator-color);
   --footer-border-color: var(--separator-color);
 
+  --header-anchor-link-color: rgb(var(--sub-lt-gray));
   --header-box-shadow-color: var(--box-shadow-color);
   --header-series-arrow-foreground-color: rgb(var(--sub-dk-gray));
   --heading-color: rgb(var(--black));
@@ -56,6 +57,7 @@
     --box-shadow-color: rgba(var(--dk-gray), 0.8);
     --body-code-background-color: rgb(var(--dk-gray));
 
+    --header-anchor-link-color: rgb(var(--super-dk-gray));
     --header-series-arrow-foreground-color: rgb(var(--super-dk-gray));
     --heading-color: rgb(var(--white));
 
@@ -171,6 +173,11 @@
     color: var(--color);
   }
 
+  main > :is(h1, h2, h3, h4, h5, h6) > a[href],
+  main > :is(h1, h2, h3, h4, h5, h6) > a[href]:visited {
+    color: inherit;
+  }
+
   nav.bulleted > li:first-child::before {
     color: var(--color);
   }

layouts/_default/_markup/render-heading.html

@@ -0,0 +1,3 @@
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">
+    <a href="#{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</a>
+</h{{ .Level }}>