Build the design system: typography, color tokens, real Base layout

References: pixperk.tech (dark, warm off-white text, serif-italic +
mono mixed typography, personal dashboard modules) and mcyoung.xyz
(meta line with reading time, subtle accent underline on titles).

- src/styles/tokens.css: dark-first color palette with a warm-paper
  light mode (data-theme override + prefers-color-scheme, toggle wins
  either direction), fluid clamp() type scale, spacing/radius scale.
- Fonts: Fraunces (display/headings, italic), Newsreader (body,
  long-form readability), JetBrains Mono (nav/meta/code) — all
  self-hosted via @fontsource, continuing the mono choice already
  used in the legacy OG-image pipeline.
- Base.astro rewritten: real header/nav with active-link state, a
  theme toggle (persisted to localStorage, no-flash inline script),
  footer with social links (ported from zola.toml), replacing the
  scaffold placeholder.
- Reading time: toml-content-loader.ts computes wordCount/
  readingMinutes from the raw body at load time, surfaced in the
  writings list and detail meta line.
- Bug fix: the marked heading renderer was using raw token.text for
  both the visible heading and the TOC, so a heading like
  "**Registers**" rendered literal asterisks instead of bold — now
  renders inline tokens properly and strips markdown for the
  plain-text TOC label/slug.

Verified in-browser (light + dark) across home, a migrated writing
with TOC/headings, bookshelf, and 404.

apps/site/src/content.config.ts

@@ -18,6 +18,8 @@ const writings = defineCollection({
     updated: z.coerce.date().optional(),
     draft: z.boolean().default(false),
     canonical_url: z.string().optional(),
+    wordCount: z.number().optional(),
+    readingMinutes: z.number().optional(),
     taxonomies,
     extra: z
       .object({

apps/site/src/layouts/Base.astro

@@ -1,4 +1,8 @@
 ---
+import "@fontsource-variable/fraunces";
+import "@fontsource-variable/newsreader";
+import "@fontsource/jetbrains-mono";
+import "../styles/global.css";
 import { siteConfig } from "../site.config";
 
 interface Props {
@@ -7,66 +11,145 @@ interface Props {
 }
 const { title, description } = Astro.props;
 const metaDescription = description ?? siteConfig.description;
+const currentPath = Astro.url.pathname;
 ---
 
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>{title} — andwati.com</title>
+    <title>{title} — {siteConfig.title}</title>
     <meta name="description" content={metaDescription} />
     <link rel="alternate" type="application/rss+xml" title={siteConfig.title} href="/rss.xml" />
     <link rel="alternate" type="application/feed+json" title={siteConfig.title} href="/feed.json" />
     <link rel="webmention" href="https://webmention.io/andwati.com/webmention" />
+    <script is:inline>
+      // Runs before paint to avoid a flash of the wrong theme.
+      (function () {
+        try {
+          var stored = localStorage.getItem("theme");
+          if (stored === "light" || stored === "dark") {
+            document.documentElement.setAttribute("data-theme", stored);
+          }
+        } catch {}
+      })();
+    </script>
     <style>
-      :root {
-        color-scheme: light dark;
+      header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: var(--space-4) var(--space-6);
+        padding-block: var(--space-6);
       }
-      body {
-        font-family: system-ui, sans-serif;
-        max-width: 42rem;
-        margin: 2rem auto;
-        padding: 0 1rem;
-        line-height: 1.6;
+      .site-name {
+        font-family: var(--font-mono);
+        font-size: var(--font-size-sm);
+        letter-spacing: 0.08em;
+        text-decoration: none;
+        color: var(--text);
       }
       nav {
         display: flex;
-        gap: 1rem;
-        margin-bottom: 2rem;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: var(--space-5);
+      }
+      nav a {
+        font-family: var(--font-mono);
+        font-size: var(--font-size-sm);
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        text-decoration: none;
+        color: var(--text-muted);
+        transition: color 0.2s var(--ease-out);
+      }
+      nav a:hover,
+      nav a[aria-current="page"] {
+        color: var(--accent);
+      }
+      #theme-toggle {
+        background: none;
+        border: 1px solid var(--border);
+        border-radius: var(--radius-sm);
+        color: var(--text-muted);
+        width: 2rem;
+        height: 2rem;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        font-family: var(--font-mono);
         font-size: 0.9rem;
+        transition:
+          border-color 0.2s var(--ease-out),
+          color 0.2s var(--ease-out);
       }
-      .tag {
-        display: inline-block;
-        font-size: 0.8rem;
-        opacity: 0.7;
-        margin-right: 0.5rem;
+      #theme-toggle:hover {
+        border-color: var(--accent);
+        color: var(--accent);
       }
-      .card {
-        margin-bottom: 1.5rem;
-        padding-bottom: 1.5rem;
-        border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
+      main {
+        min-height: 60vh;
       }
-      .card h3 {
-        margin-bottom: 0.25rem;
+      footer {
+        margin-top: var(--space-8);
+        padding-block: var(--space-6);
+        border-top: 1px solid var(--border);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: var(--space-4);
       }
-      .meta {
-        font-size: 0.85rem;
-        opacity: 0.7;
+      footer nav {
+        gap: var(--space-4);
       }
     </style>
   </head>
   <body>
-    <nav>
-      <a href="/">Home</a>
-      <a href="/writings/">Writings</a>
-      <a href="/portfolio/">Portfolio</a>
-      <a href="/bookshelf/">Bookshelf</a>
-      <a href="/blogs/">Blogs</a>
-      <a href="/tags/">Tags</a>
-      <a href="/search/">Search</a>
-    </nav>
-    <main>
-      <slot />
-    </main>
+    <div class="container">
+      <header>
+        <a class="site-name" href="/">{siteConfig.author.toUpperCase()}</a>
+        <nav aria-label="Primary">
+          {
+            siteConfig.nav.map((item) => (
+              <a href={item.url} aria-current={currentPath.startsWith(item.url) ? "page" : undefined}>
+                {item.name}
+              </a>
+            ))
+          }
+          <a href="/tags/" aria-current={currentPath.startsWith("/tags/") ? "page" : undefined}>Tags</a>
+          <a href="/search/" aria-current={currentPath.startsWith("/search/") ? "page" : undefined}>Search</a>
+          <button id="theme-toggle" type="button" aria-label="Toggle color theme">◐</button>
+        </nav>
+      </header>
+      <main>
+        <slot />
+      </main>
+      <footer>
+        <p class="meta">© {new Date().getFullYear()} {siteConfig.author}</p>
+        <nav aria-label="Social">
+          <a href={siteConfig.social.github} class="meta" rel="me noopener" target="_blank">GitHub</a>
+          <a href={siteConfig.social.twitter} class="meta" rel="me noopener" target="_blank">Twitter</a>
+          <a href={siteConfig.social.youtube} class="meta" rel="me noopener" target="_blank">YouTube</a>
+          <a href={`mailto:${siteConfig.social.email}`} class="meta">Email</a>
+        </nav>
+      </footer>
+    </div>
+    <script is:inline>
+      document.getElementById("theme-toggle").addEventListener("click", function () {
+        var root = document.documentElement;
+        var current =
+          root.getAttribute("data-theme") ||
+          (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+        var next = current === "dark" ? "light" : "dark";
+        root.setAttribute("data-theme", next);
+        try {
+          localStorage.setItem("theme", next);
+        } catch {}
+      });
+    </script>
   </body>
 </html>

apps/site/src/lib/toml-content-loader.ts

@@ -19,6 +19,15 @@ function slugify(text: string): string {
     .replace(/^-+|-+$/g, "");
 }
 
+/** Strips inline markdown syntax for use as plain-text TOC labels/slugs. */
+function stripInlineMarkdown(text: string): string {
+  return text
+    .replace(/\*\*(.*?)\*\*/g, "$1")
+    .replace(/\*(.*?)\*/g, "$1")
+    .replace(/`(.*?)`/g, "$1")
+    .replace(/\[(.*?)\]\([^)]*\)/g, "$1");
+}
+
 // Collects headings for the file currently being parsed (reset before each
 // `marked.parse()` call below) so Astro's `render(entry)` can expose them
 // as `headings`, matching the shape a built-in markdown loader would give.
@@ -27,9 +36,11 @@ let currentHeadings: Heading[] = [];
 const marked = new Marked({
   renderer: {
     heading(token) {
-      const slug = slugify(token.text);
-      currentHeadings.push({ depth: token.depth, slug, text: token.text });
-      return `<h${token.depth} id="${slug}">${token.text}</h${token.depth}>`;
+      const plainText = stripInlineMarkdown(token.text);
+      const slug = slugify(plainText);
+      const html = this.parser.parseInline(token.tokens);
+      currentHeadings.push({ depth: token.depth, slug, text: plainText });
+      return `<h${token.depth} id="${slug}">${html}</h${token.depth}>`;
     },
   },
 });
@@ -80,10 +91,13 @@ export function tomlContentLoader(contentDir: string): Loader {
         const relPath = relative(dirUrl.pathname, file);
         const id = relPath.replace(/\/index\.md$/, "").replace(/\.md$/, "");
         currentHeadings = [];
-        const html = await marked.parse(body.trim());
+        const trimmedBody = body.trim();
+        const html = await marked.parse(trimmedBody);
+        const wordCount = trimmedBody.split(/\s+/).filter(Boolean).length;
+        const readingMinutes = Math.max(1, Math.round(wordCount / 200));
         store.set({
           id,
-          data,
+          data: { ...data, wordCount, readingMinutes },
           rendered: { html, metadata: { headings: currentHeadings } },
         });
       }

apps/site/src/pages/writings/[...slug].astro

@@ -55,6 +55,7 @@ const tocHeadings = headings.filter((h) => h.depth <= 3);
   <h1>{entry.data.title}</h1>
   <p class="meta">
     {entry.data.date.toDateString()}
+    {entry.data.readingMinutes && <> · {entry.data.readingMinutes} min read</>}
     {entry.data.updated && <> · updated {entry.data.updated.toDateString()}</>}
   </p>
   {tags.map((tag) => <a class="tag" href={`/tags/${tag}/`}>#{tag}</a>)}

apps/site/src/pages/writings/index.astro

@@ -13,7 +13,10 @@ const writings = (
     writings.map((entry) => (
       <div class="card">
         <h3><a href={`/writings/${entry.id}/`}>{entry.data.title}</a></h3>
-        <p class="meta">{entry.data.date.toDateString()}</p>
+        <p class="meta">
+          {entry.data.date.toDateString()}
+          {entry.data.readingMinutes && <> · {entry.data.readingMinutes} min read</>}
+        </p>
         {entry.data.description && <p>{entry.data.description}</p>}
         {entry.data.taxonomies?.tags.map((tag) => <a class="tag" href={`/tags/${tag}/`}>#{tag}</a>)}
       </div>

apps/site/src/site.config.ts

@@ -16,6 +16,12 @@ export const siteConfig = {
     { name: "Bookshelf", url: "/bookshelf/" },
     { name: "Blogs", url: "/blogs/" },
   ],
+  social: {
+    github: "https://github.com/andwati",
+    twitter: "https://twitter.com/andwati_",
+    youtube: "https://www.youtube.com/@pwnforfunandprofit",
+    email: "[email protected]",
+  },
   tagDescriptions: {
     linux:
       "Practical notes on running Arch-based Linux distributions, from WiFi hotspot quirks to database setup.",

apps/site/src/styles/global.css

@@ -0,0 +1,177 @@
+@import "./tokens.css";
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-body);
+  font-size: var(--font-size-base);
+  line-height: 1.65;
+  transition:
+    background-color 0.3s var(--ease-out),
+    color 0.3s var(--ease-out);
+}
+
+::selection {
+  background: var(--accent-muted);
+  color: var(--text);
+}
+
+a {
+  color: inherit;
+}
+
+img,
+svg {
+  max-width: 100%;
+  display: block;
+}
+
+h1,
+h2,
+h3 {
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-style: italic;
+  line-height: 1.15;
+  letter-spacing: -0.01em;
+  margin: 0 0 var(--space-4);
+}
+
+h1 {
+  font-size: var(--font-size-3xl);
+  display: inline-block;
+  position: relative;
+}
+
+h1::after {
+  content: "";
+  position: absolute;
+  left: 0.05em;
+  right: 0.4em;
+  bottom: 0.08em;
+  height: 0.09em;
+  background: var(--accent);
+  opacity: 0.55;
+  z-index: -1;
+  border-radius: 1px;
+}
+
+h2 {
+  font-size: var(--font-size-2xl);
+}
+
+h3 {
+  font-size: var(--font-size-xl);
+}
+
+p {
+  margin: 0 0 var(--space-5);
+}
+
+code,
+pre {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+}
+
+pre {
+  padding: var(--space-4);
+  overflow-x: auto;
+  background: var(--bg-elevated);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border);
+}
+
+.container {
+  max-width: 42rem;
+  margin-inline: auto;
+  padding-inline: var(--space-5);
+}
+
+.eyebrow {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.meta {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  color: var(--text-muted);
+}
+
+.tag {
+  display: inline-block;
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  color: var(--text-muted);
+  margin-right: var(--space-3);
+  text-decoration: none;
+}
+
+.tag:hover {
+  color: var(--accent);
+}
+
+.card {
+  padding-block: var(--space-5);
+  border-bottom: 1px solid var(--border);
+}
+
+.card h3 {
+  margin-bottom: var(--space-1);
+}
+
+.card h3 a {
+  text-decoration: none;
+}
+
+.card h3 a:hover {
+  color: var(--accent);
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  letter-spacing: 0.04em;
+  text-decoration: none;
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: var(--space-2) var(--space-4);
+  transition:
+    border-color 0.2s var(--ease-out),
+    color 0.2s var(--ease-out);
+}
+
+.button:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}

apps/site/src/styles/tokens.css

@@ -0,0 +1,66 @@
+/**
+ * Design tokens. Dark-first (matches the reflective, slightly technical
+ * tone of the content), with a warm paper-toned light mode — not pure
+ * black/white either way, so the palette reads considered rather than
+ * default browser colors.
+ */
+:root {
+  --bg: #faf7f1;
+  --bg-elevated: #f1ece0;
+  --text: #1c1a15;
+  --text-muted: #6f6a5c;
+  --border: rgba(28, 26, 21, 0.12);
+  --accent: #d1502f;
+  --accent-muted: rgba(209, 80, 47, 0.12);
+
+  --font-display: "Fraunces Variable", ui-serif, Georgia, serif;
+  --font-body: "Newsreader Variable", ui-serif, Georgia, serif;
+  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
+
+  --font-size-sm: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
+  --font-size-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
+  --font-size-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
+  --font-size-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
+  --font-size-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
+  --font-size-3xl: clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem);
+
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+  --space-7: 3rem;
+  --space-8: 4.5rem;
+
+  --radius-sm: 4px;
+  --radius-md: 10px;
+
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #0d0d0b;
+    --bg-elevated: #171613;
+    --text: #ece7db;
+    --text-muted: #8e897b;
+    --border: rgba(236, 231, 219, 0.12);
+    --accent: #ff6b45;
+    --accent-muted: rgba(255, 107, 69, 0.15);
+    color-scheme: dark;
+  }
+}
+
+:root[data-theme="dark"] {
+  --bg: #0d0d0b;
+  --bg-elevated: #171613;
+  --text: #ece7db;
+  --text-muted: #8e897b;
+  --border: rgba(236, 231, 219, 0.12);
+  --accent: #ff6b45;
+  --accent-muted: rgba(255, 107, 69, 0.15);
+  color-scheme: dark;
+}