RenderHooks: Reconfigure the heading hashes

Instead of a single hash in the left gutter, draw <n> hashes where <n> is the
heading level. All of these hashes are part of the anchor text.

assets/css/099_content.css

@@ -41,4 +41,28 @@
   .content-date {
     margin-block-end: var(--space-paragraph);
   }
+
+  .heading {
+    display: block flex;
+    gap: var(--space-s);
+    grid-column: main-start / main-end;
+  }
+
+  .heading__anchor {
+    align-self: center;
+    color: var(--gray5);
+    font-size: var(--text-m);
+    justify-content: center;
+    letter-spacing: -0.2em;
+
+    a {
+      transition: 0.3s color;
+    }
+
+    a:hover {
+      color: var(--text-color);
+      text-decoration: none;
+      transition: 0.3s color;
+    }
+  }
 }

layouts/_default/_markup/render-heading.html

@@ -1,8 +1,11 @@
-<h{{ .Level }} id="{{ .Anchor }}" class="heading">
+{{- $pageWantsAnchors := .Page.Params.renderHeadingAnchors | default true -}}
-  {{ .Text | safeHTML }}
+{{- $anchorEnabledForThisHeading := .Attributes.anchor | default true -}}
-  {{- $pageWantsAnchors := .Page.Params.renderHeadingAnchors | default true -}}
+{{- $hasAnchor := and $pageWantsAnchors $anchorEnabledForThisHeading -}}
-  {{- $anchorEnabledForThisHeading := .Attributes.anchor | default true -}}
+<h{{ .Level }} id="{{ .Anchor }}" class="heading{{ if $hasAnchor }}  with-anchor{{ end }}">
-  {{- if and $pageWantsAnchors $anchorEnabledForThisHeading -}}
+  {{- if $hasAnchor -}}
-    <a class="heading__anchor" href="#{{ .Anchor }}">#</a>
+    <span class="heading__anchor">
+      <a href="#{{ .Anchor }}">{{ range seq .Level }}#{{ end }}</a>
+    </span>
   {{- end -}}
+  {{ .Text | safeHTML }}
 </h{{ .Level }}>