From 4722094f0ce1f30f17ab47bf1078909bca06f122 Mon Sep 17 00:00:00 2001
From: Jim Myhrberg <contact@jimeh.me>
Date: Sat, 10 Jan 2026 22:47:42 +0000
Subject: [PATCH] wip: simplify CSS

---
 src/components/AboutSection.astro |   2 +-
 src/components/SpecSection.astro  | 126 +-----------------------------
 src/styles/global.css             |  58 +++++++++++++-
 3 files changed, 59 insertions(+), 127 deletions(-)

diff --git a/src/components/AboutSection.astro b/src/components/AboutSection.astro
index a17263f..e3f8d90 100644
--- a/src/components/AboutSection.astro
+++ b/src/components/AboutSection.astro
@@ -10,7 +10,7 @@ interface Props {
 const { introduction, summary, license } = Astro.props;
 ---
 
-<section id="about" class="py-20 sm:py-28">
+<section id="about" class="py-20 sm:py-28 bg-gray-100 dark:bg-slate-900/30">
   <div class="section-container">
     <div class="max-w-3xl mx-auto">
       <!-- Section header -->
diff --git a/src/components/SpecSection.astro b/src/components/SpecSection.astro
index 9fcb5a8..59ddeac 100644
--- a/src/components/SpecSection.astro
+++ b/src/components/SpecSection.astro
@@ -31,7 +31,7 @@ const { terminology, terminologyTitle, specification, tocItems } = Astro.props;
 
       <!-- Main content -->
       <div class="flex-1 min-w-0">
-        <article class="prose-spec spec-content">
+        <article class="prose-spec">
           <!-- Terminology -->
           <section id="terminology">
             <h2>{terminologyTitle}</h2>
@@ -48,127 +48,3 @@ const { terminology, terminologyTitle, specification, tocItems } = Astro.props;
     </div>
   </div>
 </section>
-
-<style>
-  .spec-content {
-    max-width: var(--content-max-width);
-  }
-
-  .spec-content :global(h2) {
-    font-family: var(--font-display);
-    font-size: 1.75rem;
-    font-weight: 700;
-    margin-top: 3rem;
-    margin-bottom: 1.5rem;
-    padding-bottom: 0.75rem;
-    scroll-margin-top: calc(var(--header-height) + 2rem);
-    border-bottom: 1px solid #e5e5e5;
-    color: #0a0a0a;
-  }
-
-  :global(.dark) .spec-content :global(h2) {
-    border-bottom-color: #1e293b;
-    color: #f8fafc;
-  }
-
-  .spec-content :global(h2:first-child) {
-    margin-top: 0;
-  }
-
-  .spec-content :global(h3) {
-    font-family: var(--font-display);
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin-top: 2rem;
-    margin-bottom: 1rem;
-    color: #525252;
-  }
-
-  :global(.dark) .spec-content :global(h3) {
-    color: #94a3b8;
-  }
-
-  .spec-content :global(p) {
-    margin-bottom: 1.25rem;
-    color: #525252;
-  }
-
-  :global(.dark) .spec-content :global(p) {
-    color: #94a3b8;
-  }
-
-  .spec-content :global(strong) {
-    font-weight: 600;
-    color: #0a0a0a;
-  }
-
-  :global(.dark) .spec-content :global(strong) {
-    color: #f8fafc;
-  }
-
-  .spec-content :global(ul) {
-    margin-bottom: 1.25rem;
-    padding-left: 1.5rem;
-  }
-
-  .spec-content :global(ol) {
-    margin-bottom: 1.25rem;
-    padding-left: 2.5rem;
-    counter-reset: item;
-    list-style: none;
-  }
-
-  .spec-content :global(ol > li) {
-    counter-increment: item;
-    position: relative;
-  }
-
-  .spec-content :global(ol > li::before) {
-    content: counters(item, ".") ".";
-    position: absolute;
-    left: -2.5rem;
-    width: 2rem;
-    text-align: right;
-    font-weight: 500;
-    color: #737373;
-  }
-
-  /* Scroll margin for anchored spec sections */
-  .spec-content :global(ol > li[id]) {
-    scroll-margin-top: calc(var(--header-height) + 2rem);
-  }
-
-  .spec-content :global(li) {
-    margin-bottom: 0.5rem;
-    color: #525252;
-  }
-
-  :global(.dark) .spec-content :global(li) {
-    color: #94a3b8;
-  }
-
-  .spec-content :global(a) {
-    color: var(--color-accent);
-    text-decoration: none;
-    transition: color 150ms ease;
-  }
-
-  .spec-content :global(a:hover) {
-    color: var(--color-accent-light);
-  }
-
-  .spec-content :global(blockquote) {
-    border-left: 3px solid var(--color-accent);
-    padding-left: 1.5rem;
-    margin: 1.5rem 0;
-    font-style: italic;
-    color: #737373;
-  }
-
-  .spec-content :global(img) {
-    max-width: 100%;
-    height: auto;
-    border-radius: 8px;
-    margin: 2rem 0;
-  }
-</style>
diff --git a/src/styles/global.css b/src/styles/global.css
index f21d830..868ddce 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -353,8 +353,10 @@ html {
   }
 
   .prose-spec h2 {
+    font-size: 1.75rem;
+    margin-top: 3rem;
+    margin-bottom: 1.5rem;
     padding-bottom: 0.75rem;
-    margin-top: 4rem;
     border-bottom: 1px solid #e5e5e5;
   }
 
@@ -362,7 +364,15 @@ html {
     border-bottom-color: #1e293b;
   }
 
+  .prose-spec h2:first-child {
+    margin-top: 0;
+  }
+
   .prose-spec h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
     color: #525252;
   }
 
@@ -370,6 +380,52 @@ html {
     color: #94a3b8;
   }
 
+  .prose-spec p {
+    color: #525252;
+  }
+
+  .dark .prose-spec p {
+    color: #94a3b8;
+  }
+
+  .prose-spec strong {
+    color: #0a0a0a;
+  }
+
+  .dark .prose-spec strong {
+    color: #f8fafc;
+  }
+
+  .prose-spec li {
+    color: #525252;
+  }
+
+  .dark .prose-spec li {
+    color: #94a3b8;
+  }
+
+  /* Nested ordered list counters (spec numbering: 1., 1.1., 1.2.) */
+  .prose-spec ol {
+    padding-left: 2.5rem;
+    counter-reset: item;
+    list-style: none;
+  }
+
+  .prose-spec ol > li {
+    counter-increment: item;
+    position: relative;
+  }
+
+  .prose-spec ol > li::before {
+    content: counters(item, ".") ".";
+    position: absolute;
+    left: -2.5rem;
+    width: 2rem;
+    text-align: right;
+    font-weight: 500;
+    color: #737373;
+  }
+
   .prose-spec img {
     max-width: 100%;
     height: auto;