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
This commit is contained in:
dckc committed 2026-10-07 20:00:29 -05:00
1 parent 4b4ef8fea6
commit b9f3156d6d
3 files changed
+43 -38

No files matched your search

+1 -10
View File
@@ -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 {
+41 -11
View File
@@ -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. */