From b9f3156d6d3320c2ae8ef9b498940ed52aa07c58 Mon Sep 17 00:00:00 2001
From: Dan Connolly <dckc@madmode.com>
Date: Wed, 7 Oct 2026 20:00:29 -0500
Subject: [PATCH] capsite/potluck: plain style after kmjn.org's "Plain HTML
 with a few bureaucratic gestures"

https://www.kmjn.org/notes/modern_plain_html.html and its stylesheet:
system fonts (Verdana; no Google webfonts), one 800px column,
line-height 1.35, links in the text color with a dotted underline, no
rounding, shadows, or tracking; the header is plain, not sticky glass.
Token overrides live in theme.css; per-page scoped styles unchanged.

Generated-by: Claude Opus 5.5
---
 potluck/astro.config.mjs       | 18 +-----------
 potluck/src/layouts/Base.astro | 11 +------
 potluck/src/styles/theme.css   | 52 +++++++++++++++++++++++++++-------
 3 files changed, 43 insertions(+), 38 deletions(-)

diff --git a/potluck/astro.config.mjs b/potluck/astro.config.mjs
index 02d6de3..1f01357 100644
--- a/potluck/astro.config.mjs
+++ b/potluck/astro.config.mjs
@@ -1,7 +1,7 @@
 import cloudflare from "@astrojs/cloudflare";
 import react from "@astrojs/react";
 import { d1, r2 } from "@emdash-cms/cloudflare";
-import { defineConfig, fontProviders } from "astro/config";
+import { defineConfig } from "astro/config";
 import emdash from "emdash/astro";
 
 export default defineConfig({
@@ -18,21 +18,5 @@ export default defineConfig({
 			storage: r2({ binding: "MEDIA" }),
 		}),
 	],
-	fonts: [
-		{
-			provider: fontProviders.google(),
-			name: "Inter",
-			cssVariable: "--font-body",
-			weights: [400, 500, 600, 700],
-			fallbacks: ["sans-serif"],
-		},
-		{
-			provider: fontProviders.google(),
-			name: "JetBrains Mono",
-			cssVariable: "--font-mono",
-			weights: [400, 500],
-			fallbacks: ["monospace"],
-		},
-	],
 	devToolbar: { enabled: false },
 });
diff --git a/potluck/src/layouts/Base.astro b/potluck/src/layouts/Base.astro
index b6a9d35..3fd7b10 100644
--- a/potluck/src/layouts/Base.astro
+++ b/potluck/src/layouts/Base.astro
@@ -8,7 +8,6 @@ import {
 } from "emdash/ui";
 import { createPublicPageContext } from "emdash/page";
 import LiveSearch from "emdash/ui/search";
-import { Font } from "astro:assets";
 import { resolveBlogSiteIdentity } from "../utils/site-identity";
 import "../styles/tokens.css";
 import "../styles/theme.css";
@@ -87,8 +86,6 @@ const isLoggedIn = !!Astro.locals.user;
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<Font cssVariable="--font-body" preload />
-		<Font cssVariable="--font-mono" />
 		<title>{fullTitle}</title>
 		<EmDashHead page={pageCtx} />
 		<script is:inline>
@@ -464,13 +461,7 @@ const isLoggedIn = !!Astro.locals.user;
 
 		<style>
 			.site-header {
-				position: sticky;
-				top: 0;
-				z-index: 100;
-				background: color-mix(in srgb, var(--color-bg) 65%, transparent);
-				backdrop-filter: blur(12px);
-				-webkit-backdrop-filter: blur(12px);
-				border-bottom: 1px solid var(--color-border-subtle);
+				border-bottom: 1px solid var(--color-border);
 			}
 
 			.nav {
diff --git a/potluck/src/styles/theme.css b/potluck/src/styles/theme.css
index d5ad867..974b857 100644
--- a/potluck/src/styles/theme.css
+++ b/potluck/src/styles/theme.css
@@ -11,20 +11,50 @@
   changes light and dark mode at once; use light-dark(<light>, <dark>)
   to set different values per mode.
 
-  Webfonts are loaded in astro.config.mjs (--font-body, --font-mono).
-  Swap the loaded font there; use overrides here for system fonts or a
-  separate heading face.
-
-  Example:
-
-  :root {
-    --color-brand: light-dark(#0f766e, #2dd4bf);
-    --font-heading: "Iowan Old Style", Georgia, serif;
-    --radius: 8px;
-  }
+  potluck's look: plain HTML with a few bureaucratic gestures, after
+  https://www.kmjn.org/notes/modern_plain_html.html and its stylesheet
+  (https://www.kmjn.org/notes/style.css) -- system fonts (no webfonts;
+  astro.config.mjs loads none), one ~800px column, black links with a
+  dotted underline, no rounding, shadows, or tracking.
 */
 
 :root {
+	--font-body: verdana, sans-serif;
+	--font-mono: monospace;
+
+	--color-brand: var(--color-text);
+	--color-brand-hover: var(--color-text);
+	--color-on-brand: var(--color-bg);
+
+	--font-weight-heading: bold;
+	--font-weight-display: bold;
+	--tracking-tight: normal;
+	--tracking-snug: normal;
+	--leading-normal: 1.35;
+	--leading-relaxed: 1.35;
+
+	--content-width: 800px;
+	--wide-width: 800px;
+
+	--radius: 0;
+	--radius-lg: 0;
+	--shadow-sm: none;
+	--shadow-lg: none;
+}
+
+body {
+	-webkit-font-smoothing: auto;
+	-moz-osx-font-smoothing: auto;
+}
+
+a:where(:not([class*="emdash"]):not([class*="ec-"])) {
+	color: inherit;
+	border-bottom: 1px dotted;
+	overflow-wrap: break-word;
+}
+
+a:where(:not([class*="emdash"]):not([class*="ec-"])):hover {
+	border-bottom-style: solid;
 }
 
 /* Keep the signed-in Admin link separated from the primary navigation. */