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 cloudflare from "@astrojs/cloudflare";
|
||||||
import react from "@astrojs/react";
|
import react from "@astrojs/react";
|
||||||
import { d1, r2 } from "@emdash-cms/cloudflare";
|
import { d1, r2 } from "@emdash-cms/cloudflare";
|
||||||
import { defineConfig, fontProviders } from "astro/config";
|
import { defineConfig } from "astro/config";
|
||||||
import emdash from "emdash/astro";
|
import emdash from "emdash/astro";
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
@@ -18,21 +18,5 @@ export default defineConfig({
|
|||||||
storage: r2({ binding: "MEDIA" }),
|
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 },
|
devToolbar: { enabled: false },
|
||||||
});
|
});
|
||||||
@@ -8,7 +8,6 @@ import {
|
|||||||
} from "emdash/ui";
|
} from "emdash/ui";
|
||||||
import { createPublicPageContext } from "emdash/page";
|
import { createPublicPageContext } from "emdash/page";
|
||||||
import LiveSearch from "emdash/ui/search";
|
import LiveSearch from "emdash/ui/search";
|
||||||
import { Font } from "astro:assets";
|
|
||||||
import { resolveBlogSiteIdentity } from "../utils/site-identity";
|
import { resolveBlogSiteIdentity } from "../utils/site-identity";
|
||||||
import "../styles/tokens.css";
|
import "../styles/tokens.css";
|
||||||
import "../styles/theme.css";
|
import "../styles/theme.css";
|
||||||
@@ -87,8 +86,6 @@ const isLoggedIn = !!Astro.locals.user;
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<Font cssVariable="--font-body" preload />
|
|
||||||
<Font cssVariable="--font-mono" />
|
|
||||||
<title>{fullTitle}</title>
|
<title>{fullTitle}</title>
|
||||||
<EmDashHead page={pageCtx} />
|
<EmDashHead page={pageCtx} />
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
@@ -464,13 +461,7 @@ const isLoggedIn = !!Astro.locals.user;
|
|||||||
|
|
||||||
<style>
|
<style>
|
||||||
.site-header {
|
.site-header {
|
||||||
position: sticky;
|
border-bottom: 1px solid var(--color-border);
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
|
|||||||
@@ -11,20 +11,50 @@
|
|||||||
changes light and dark mode at once; use light-dark(<light>, <dark>)
|
changes light and dark mode at once; use light-dark(<light>, <dark>)
|
||||||
to set different values per mode.
|
to set different values per mode.
|
||||||
|
|
||||||
Webfonts are loaded in astro.config.mjs (--font-body, --font-mono).
|
potluck's look: plain HTML with a few bureaucratic gestures, after
|
||||||
Swap the loaded font there; use overrides here for system fonts or a
|
https://www.kmjn.org/notes/modern_plain_html.html and its stylesheet
|
||||||
separate heading face.
|
(https://www.kmjn.org/notes/style.css) -- system fonts (no webfonts;
|
||||||
|
astro.config.mjs loads none), one ~800px column, black links with a
|
||||||
Example:
|
dotted underline, no rounding, shadows, or tracking.
|
||||||
|
|
||||||
:root {
|
|
||||||
--color-brand: light-dark(#0f766e, #2dd4bf);
|
|
||||||
--font-heading: "Iowan Old Style", Georgia, serif;
|
|
||||||
--radius: 8px;
|
|
||||||
}
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
:root {
|
: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. */
|
/* Keep the signed-in Admin link separated from the primary navigation. */
|
||||||
|
|||||||
Reference in new issue
Block a user