From cb8ad426d5d104ecad13bc193fac417897c45947 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sat, 27 Jul 2024 09:29:19 -0700
Subject: [PATCH] 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                    |  1 +
 assets/css/090_content_headers.css           | 55 ++++++++++++++++++++
 assets/css/099_content.css                   | 23 --------
 layouts/_default/_markup/render-heading.html |  6 +--
 4 files changed, 58 insertions(+), 27 deletions(-)
 create mode 100644 assets/css/090_content_headers.css

diff --git a/assets/css/010_colors.css b/assets/css/010_colors.css
index 96d412a..58e06ba 100644
--- a/assets/css/010_colors.css
+++ b/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 {
diff --git a/assets/css/090_content_headers.css b/assets/css/090_content_headers.css
new file mode 100644
index 0000000..b6bf70b
--- /dev/null
+++ b/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);
+      }
+    }
+  }
+}
diff --git a/assets/css/099_content.css b/assets/css/099_content.css
index 74a6634..d6bf309 100644
--- a/assets/css/099_content.css
+++ b/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;
-    }
-  }
 }
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
index 6100c83..fa000e4 100644
--- a/layouts/_default/_markup/render-heading.html
+++ b/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">
-      <a href="#{{ .Anchor }}">{{ range seq .Level }}#{{ end }}</a>
-    </span>
+    <span class="heading__anchor"><a href="#{{ .Anchor }}">#</a></span>
   {{- end -}}
-  {{ .Text | safeHTML }}
+  <span class="heading__content">{{ .Text | safeHTML }}</span>
 </h{{ .Level }}>