Merge pull request #1 from ComputelessComputer/codex/prose-heading-hierarchy

Improve prose heading hierarchy

Author: ComputelessComputer

src/layouts/Base.astro

@@ -23,6 +23,8 @@ const { title } = Astro.props;
     <style is:global>
       :root {
         --max-width: 640px;
+        --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        --font-serif: "Instrument Serif", serif;
         --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
       }
 
@@ -39,7 +41,7 @@ const { title } = Astro.props;
         overflow-y: scroll;
       }
       body {
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        font-family: var(--font-sans);
         line-height: 1.6;
         color: #1a1a1a;
         max-width: var(--max-width);
@@ -61,22 +63,86 @@ const { title } = Astro.props;
       }
 
       h1 {
-        font-family: "Instrument Serif", serif;
+        font-family: var(--font-serif);
         font-style: italic;
         font-size: 2.25rem;
         font-weight: 400;
       }
       h2 {
-        font-family: "Instrument Serif", serif;
+        font-family: var(--font-serif);
         font-size: 1.5rem;
         font-weight: 400;
       }
       h3 {
-        font-family: "Instrument Serif", serif;
+        font-family: var(--font-serif);
         font-size: 1.25rem;
         font-weight: 400;
       }
 
+      .prose :is(h2, h3, h4, h5, h6) {
+        scroll-margin-top: 1.5rem;
+        text-wrap: balance;
+      }
+
+      .prose :is(h2, h3) {
+        font-family: var(--font-serif);
+        font-weight: 400;
+        letter-spacing: -0.02em;
+        line-height: 1.05;
+      }
+
+      .prose h2 {
+        font-size: clamp(1.9rem, 4vw, 2.3rem);
+        margin-top: 3rem;
+        margin-bottom: 0.9rem;
+      }
+
+      .prose h3 {
+        font-size: clamp(1.7rem, 3vw, 2rem);
+        margin-top: 2.75rem;
+        margin-bottom: 0.85rem;
+      }
+
+      .prose hr + :is(h2, h3) {
+        margin-top: 0;
+      }
+
+      .prose h4 {
+        margin-top: 1.9rem;
+        margin-bottom: 0.55rem;
+        font-size: 1.25rem;
+        font-weight: 700;
+        letter-spacing: -0.015em;
+        line-height: 1.25;
+      }
+
+      .prose h5 {
+        margin-top: 1.65rem;
+        margin-bottom: 0.55rem;
+        font-size: 1.05rem;
+        font-weight: 700;
+        line-height: 1.35;
+      }
+
+      .prose h6 {
+        margin-top: 1.85rem;
+        margin-bottom: 0.7rem;
+        font-size: 0.95rem;
+        font-weight: 700;
+        letter-spacing: -0.01em;
+        line-height: 1.4;
+        color: #38322b;
+      }
+
+      .prose h6::before {
+        content: "";
+        display: block;
+        width: 2.75rem;
+        height: 1px;
+        margin-bottom: 0.45rem;
+        background: linear-gradient(90deg, #1a1a1a 0%, rgba(26, 26, 26, 0) 100%);
+      }
+
       p {
         margin-bottom: 1em;
       }