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:
1 parent
4b4ef8fea6
commit
b9f3156d6d
3 files changed
+43
-38
No files matched your search
@@ -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 },
|
||||
});
|
||||
@@ -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 {
|
||||
|
||||
@@ -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. */
|
||||
|
||||
Reference in new issue
Block a user