Headings: Move the anchor #

Draw only one hash for headings, and place them in the gutter in wide layouts,
or trailing the heading text in narrow layouts. Do this with grid in the wide
version, and flexbox in the narrow layout.

Add a --text-color-light CSS variable for content that should be lighter than
--text-color-secondary.

assets/css/010_colors.css

@@ -27,6 +27,7 @@
   --text-color: var(--text-color-primary);
   --text-color-primary: var(--gray1);
   --text-color-secondary: var(--gray4);
+  --text-color-light: var(--gray5);
 }
 @media (prefers-color-scheme: dark) {
   :root {

assets/css/090_content_headers.css

@@ -0,0 +1,55 @@
+
+.heading,
+.heading__content
+{
+  grid-column: main-start / main-end;
+}
+
+.heading.with-anchor {
+  display: block grid;
+  grid-template-columns: subgrid;
+  grid-column: gutter-left-start / main-end;
+
+  a {
+    transition: 0.3s color;
+  }
+
+  .heading__anchor a {
+    color: transparent;
+  }
+
+  &:hover .heading__anchor a {
+    color: var(--text-color-secondary);
+  }
+
+  .heading__anchor {
+    align-self: center;
+    font-size: 80%;
+    grid-column: gutter-left-start / gutter-left-end;
+    justify-content: center;
+
+    a:hover {
+      color: var(--text-color-link);
+      text-decoration: none;
+      transition: 0.3s color;
+    }
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .heading.with-anchor {
+    display: flex;
+    gap: var(--space-xs);
+    grid-column: main-start / main-end;
+
+    .heading__anchor {
+      grid-column: auto;
+      font-weight: normal;
+      order: 99;
+
+      a {
+        color: var(--text-color-light);
+      }
+    }
+  }
+}

assets/css/099_content.css

@@ -25,27 +25,4 @@
       margin-inline: var(--gutter-width);
     }
   }
-
-  .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;
-
-    a {
-      transition: 0.3s color;
-    }
-
-    a:hover {
-      color: var(--text-color);
-      text-decoration: none;
-      transition: 0.3s color;
-    }
-  }
 }

layouts/_default/_markup/render-heading.html

@@ -3,9 +3,7 @@
 {{- $hasAnchor := and $pageWantsAnchors $anchorEnabledForThisHeading -}}
 <h{{ .Level }} id="{{ .Anchor }}" class="heading{{ if $hasAnchor }}  with-anchor{{ end }}">
   {{- if $hasAnchor -}}
-    <span class="heading__anchor">
+    <span class="heading__anchor"><a href="#{{ .Anchor }}">#</a></span>
-      <a href="#{{ .Anchor }}">{{ range seq .Level }}#{{ end }}</a>
-    </span>
   {{- end -}}
-  {{ .Text | safeHTML }}
+  <span class="heading__content">{{ .Text | safeHTML }}</span>
 </h{{ .Level }}>