From 4fadbd111afa3866f2f2ad1bed7749d81e8beae0 Mon Sep 17 00:00:00 2001
From: Jim Myhrberg <contact@jimeh.me>
Date: Sat, 10 Jan 2026 21:25:10 +0000
Subject: [PATCH] wip: even more tailwind alignment

---
 src/components/FAQSection.astro  |  14 ++-
 src/components/Header.astro      |  38 ++++++-
 src/components/Hero.astro        |  41 ++++++-
 src/components/SpecSidebar.astro |  29 ++++-
 src/pages/404.astro              |   6 +-
 src/styles/global.css            | 190 +------------------------------
 6 files changed, 115 insertions(+), 203 deletions(-)

diff --git a/src/components/FAQSection.astro b/src/components/FAQSection.astro
index 4ef72ef..2666b29 100644
--- a/src/components/FAQSection.astro
+++ b/src/components/FAQSection.astro
@@ -23,9 +23,16 @@ const { items } = Astro.props;
       <div class="space-y-0">
         {
           items.map((item, index) => (
-            <div class="faq-item" data-faq-item>
+            <div
+              class="border-b border-gray-200 dark:border-gray-800"
+              data-faq-item
+            >
               <button
-                class="faq-question"
+                class="flex justify-between items-center w-full py-6 text-left
+                       font-display text-lg font-semibold cursor-pointer
+                       transition-colors
+                       text-gray-950 dark:text-gray-50
+                       hover:text-sky-600"
                 aria-expanded="false"
                 data-faq-trigger
               >
@@ -46,7 +53,8 @@ const { items } = Astro.props;
                 </svg>
               </button>
               <div
-                class="faq-answer hidden prose-spec spec-content"
+                class="hidden pb-6 text-gray-600 dark:text-gray-400
+                       prose-spec spec-content"
                 data-faq-content
                 set:html={item.answer}
               />
diff --git a/src/components/Header.astro b/src/components/Header.astro
index a0f9568..558a39a 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -12,8 +12,9 @@ const { version } = Astro.props;
 
 <header
   id="site-header"
-  class="fixed top-0 inset-x-0 z-50 glass border-b border-transparent
-         translate-y-[-100%] transition-transform duration-300"
+  class="fixed top-0 inset-x-0 z-50 border-b border-transparent
+         translate-y-[-100%] transition-transform duration-300
+         backdrop-blur-xl bg-gray-50/85 dark:bg-gray-950/85"
 >
   <div
     class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"
@@ -38,9 +39,36 @@ const { version } = Astro.props;
 
     <!-- Desktop Navigation -->
     <nav class="hidden md:flex items-center gap-1">
-      <a href="#about" class="btn btn-ghost text-sm">About</a>
-      <a href="#spec" class="btn btn-ghost text-sm">Spec</a>
-      <a href="#faq" class="btn btn-ghost text-sm">FAQ</a>
+      <a
+        href="#about"
+        class="inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg
+               transition-colors cursor-pointer
+               text-gray-600 dark:text-gray-400
+               hover:bg-gray-100 hover:text-gray-950
+               dark:hover:bg-gray-900 dark:hover:text-gray-50"
+      >
+        About
+      </a>
+      <a
+        href="#spec"
+        class="inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg
+               transition-colors cursor-pointer
+               text-gray-600 dark:text-gray-400
+               hover:bg-gray-100 hover:text-gray-950
+               dark:hover:bg-gray-900 dark:hover:text-gray-50"
+      >
+        Spec
+      </a>
+      <a
+        href="#faq"
+        class="inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg
+               transition-colors cursor-pointer
+               text-gray-600 dark:text-gray-400
+               hover:bg-gray-100 hover:text-gray-950
+               dark:hover:bg-gray-900 dark:hover:text-gray-50"
+      >
+        FAQ
+      </a>
     </nav>
 
     <!-- Right side: Theme, GitHub -->
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 632395d..eca24c8 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -87,7 +87,14 @@ const { version, svgPath } = Astro.props;
 
     <!-- Version badge -->
     <div class="animate-fade-in-up delay-200 mb-10">
-      <span class="version-badge">v{version}</span>
+      <span
+        class="inline-flex items-center px-3 py-1 font-mono text-xs font-medium
+               rounded-full border
+               bg-gray-100 border-gray-200 text-gray-500
+               dark:bg-gray-900 dark:border-gray-800"
+      >
+        v{version}
+      </span>
     </div>
 
     <!-- SVG Diagram -->
@@ -111,9 +118,35 @@ const { version, svgPath } = Astro.props;
       class="animate-fade-in-up delay-400
              flex flex-wrap items-center justify-center gap-4"
     >
-      <a href="#about" class="btn btn-ghost">About</a>
-      <a href="#spec" class="btn btn-primary">Read the Spec</a>
-      <a href="#faq" class="btn btn-ghost">FAQ</a>
+      <a
+        href="#about"
+        class="inline-flex items-center justify-center gap-2 px-5 py-2.5
+               text-sm font-medium rounded-lg transition-all cursor-pointer
+               text-gray-600 dark:text-gray-400
+               hover:bg-gray-100 hover:text-gray-950
+               dark:hover:bg-gray-900 dark:hover:text-gray-50"
+      >
+        About
+      </a>
+      <a
+        href="#spec"
+        class="inline-flex items-center justify-center gap-2 px-5 py-2.5
+               text-sm font-medium rounded-lg transition-all cursor-pointer
+               bg-sky-600 text-white
+               hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md"
+      >
+        Read the Spec
+      </a>
+      <a
+        href="#faq"
+        class="inline-flex items-center justify-center gap-2 px-5 py-2.5
+               text-sm font-medium rounded-lg transition-all cursor-pointer
+               text-gray-600 dark:text-gray-400
+               hover:bg-gray-100 hover:text-gray-950
+               dark:hover:bg-gray-900 dark:hover:text-gray-50"
+      >
+        FAQ
+      </a>
     </nav>
   </div>
 
diff --git a/src/components/SpecSidebar.astro b/src/components/SpecSidebar.astro
index e7e04d6..6104e9d 100644
--- a/src/components/SpecSidebar.astro
+++ b/src/components/SpecSidebar.astro
@@ -25,7 +25,13 @@ const { items } = Astro.props;
       items.map((item) => (
         <a
           href={`#${item.id}`}
-          class={`sidebar-link ${item.level === 3 ? "sidebar-link-sub" : ""}`}
+          class:list={[
+            "sidebar-link block py-2 px-4 text-sm rounded-md -ml-0.5",
+            "border-l-2 border-transparent transition-colors",
+            "text-gray-500 hover:text-gray-950 hover:bg-gray-100",
+            "dark:hover:text-gray-50 dark:hover:bg-gray-900",
+            item.level === 3 && "pl-6 text-[0.8125rem]",
+          ]}
           data-sidebar-link
           data-section-id={item.id}
         >
@@ -103,7 +109,13 @@ const { items } = Astro.props;
         items.map((item) => (
           <a
             href={`#${item.id}`}
-            class={`sidebar-link ${item.level === 3 ? "sidebar-link-sub" : ""}`}
+            class:list={[
+              "sidebar-link block py-2 px-4 text-sm rounded-md -ml-0.5",
+              "border-l-2 border-transparent transition-colors",
+              "text-gray-500 hover:text-gray-950 hover:bg-gray-100",
+              "dark:hover:text-gray-50 dark:hover:bg-gray-900",
+              item.level === 3 && "pl-6 text-[0.8125rem]",
+            ]}
             data-toc-link
           >
             {item.title}
@@ -196,6 +208,19 @@ const { items } = Astro.props;
 </script>
 
 <style>
+  /* Active state for sidebar links (toggled by JavaScript) */
+  .sidebar-link.active {
+    border-left-color: #0284c7;
+    color: #0284c7;
+    background-color: rgba(14, 165, 233, 0.15);
+  }
+
+  :global(.dark) .sidebar-link.active {
+    color: #38bdf8;
+    background-color: rgba(14, 165, 233, 0.2);
+  }
+
+  /* Scrollbar styling */
   #spec-sidebar::-webkit-scrollbar {
     width: 4px;
   }
diff --git a/src/pages/404.astro b/src/pages/404.astro
index a2a965a..8ee2f38 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -18,7 +18,11 @@ import Default from "../layouts/Default.astro";
     </p>
     <a
       href="/"
-      class="inline-block mt-8 btn btn-primary"
+      class="inline-flex items-center justify-center gap-2 mt-8
+             px-5 py-2.5 text-sm font-medium rounded-lg
+             transition-all cursor-pointer
+             bg-sky-600 text-white
+             hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md"
     >
       Go to homepage
     </a>
diff --git a/src/styles/global.css b/src/styles/global.css
index 0c971e5..9c254a4 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -340,38 +340,14 @@ html {
 
 /* Component styles */
 @layer components {
-
-  /* Glass effect for header */
-  .glass {
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    background-color: rgba(250, 250, 250, 0.85);
-  }
-
-  .dark .glass {
-    background-color: rgba(10, 10, 10, 0.85);
-  }
-
-  /* Gradient text */
-  .gradient-text {
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    background-image: linear-gradient(to bottom right, #0a0a0a, #0284c7);
-  }
-
-  .dark .gradient-text {
-    background-image: linear-gradient(to bottom right, #fafafa, #38bdf8);
-  }
-
-  /* Section container */
+  /* Section container - uses CSS vars, keep here */
   .section-container {
     max-width: calc(var(--content-max-width) + var(--sidebar-width) + 4rem);
     margin: 0 auto;
     padding: 0 var(--section-padding-x);
   }
 
-  /* Content prose styling */
+  /* Prose styling for markdown content - can't add classes to rendered HTML */
   .prose-spec {
     max-width: var(--content-max-width);
   }
@@ -400,166 +376,4 @@ html {
     border-radius: 8px;
     margin: 2rem 0;
   }
-
-  /* Subtle border */
-  .border-subtle {
-    border-color: #e5e5e5;
-  }
-
-  .dark .border-subtle {
-    border-color: #262626;
-  }
-
-  /* Button base */
-  .btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    padding: 0.625rem 1.25rem;
-    font-family: var(--font-sans);
-    font-size: 0.875rem;
-    font-weight: 500;
-    border-radius: 8px;
-    transition: all var(--transition-fast);
-    cursor: pointer;
-  }
-
-  .btn-primary {
-    background-color: var(--color-accent);
-    color: white;
-  }
-
-  .btn-primary:hover {
-    background-color: var(--color-accent-light);
-    transform: translateY(-1px);
-    box-shadow: var(--shadow-md);
-  }
-
-  .btn-ghost {
-    background-color: transparent;
-    color: #525252;
-  }
-
-  .dark .btn-ghost {
-    color: #a3a3a3;
-  }
-
-  .btn-ghost:hover {
-    background-color: #f5f5f5;
-    color: #0a0a0a;
-  }
-
-  .dark .btn-ghost:hover {
-    background-color: #171717;
-    color: #fafafa;
-  }
-
-  /* Sidebar link styles */
-  .sidebar-link {
-    display: block;
-    padding: 0.5rem 1rem;
-    font-size: 0.875rem;
-    border-radius: 6px;
-    transition: all var(--transition-fast);
-    border-left: 2px solid transparent;
-    margin-left: -2px;
-    color: #737373;
-  }
-
-  .sidebar-link:hover {
-    color: #0a0a0a;
-    background-color: #f5f5f5;
-  }
-
-  .dark .sidebar-link:hover {
-    color: #fafafa;
-    background-color: #171717;
-  }
-
-  .sidebar-link.active {
-    border-left-color: var(--color-accent);
-    color: #0284c7;
-    background-color: rgba(14, 165, 233, 0.15);
-  }
-
-  .dark .sidebar-link.active {
-    color: #38bdf8;
-    background-color: rgba(14, 165, 233, 0.2);
-  }
-
-  .sidebar-link-sub {
-    padding-left: 1.5rem;
-    font-size: 0.8125rem;
-  }
-
-  /* Version badge */
-  .version-badge {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.25rem 0.75rem;
-    font-family: var(--font-mono);
-    font-size: 0.75rem;
-    font-weight: 500;
-    border-radius: 9999px;
-    background-color: #f5f5f5;
-    border: 1px solid #e5e5e5;
-    color: #737373;
-  }
-
-  .dark .version-badge {
-    background-color: #171717;
-    border-color: #262626;
-  }
-
-  /* FAQ accordion styles */
-  .faq-item {
-    border-bottom: 1px solid #e5e5e5;
-  }
-
-  .dark .faq-item {
-    border-bottom-color: #262626;
-  }
-
-  .faq-question {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    padding: 1.5rem 0;
-    text-align: left;
-    font-family: var(--font-display);
-    font-size: 1.125rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: color var(--transition-fast);
-    color: #0a0a0a;
-  }
-
-  .dark .faq-question {
-    color: #fafafa;
-  }
-
-  .faq-question:hover {
-    color: var(--color-accent);
-  }
-
-  .faq-answer {
-    padding-bottom: 1.5rem;
-    color: #525252;
-  }
-
-  .dark .faq-answer {
-    color: #a3a3a3;
-  }
-}
-
-/* Transitions for interactive elements */
-@layer components {
-
-  #layout,
-  #menu,
-  .menu-link {
-    transition: all var(--transition-base);
-  }
 }