From 0222de67ab8f27b07469ea271afcf16c9c57b579 Mon Sep 17 00:00:00 2001 From: Christian Cleberg Date: Thu, 5 Mar 2026 23:57:26 -0600 Subject: update styles with new theme --- theme/static/favicon-light.png | Bin 1557 -> 0 bytes theme/static/koi-hr.svg | 7 +++++ theme/static/styles.css | 63 +++++++++++++++++++++-------------------- theme/static/tokens.css | 56 ++++++++++++++++++++++++++++++++++++ 4 files changed, 95 insertions(+), 31 deletions(-) delete mode 100644 theme/static/favicon-light.png create mode 100644 theme/static/koi-hr.svg create mode 100644 theme/static/tokens.css (limited to 'theme/static') diff --git a/theme/static/favicon-light.png b/theme/static/favicon-light.png deleted file mode 100644 index 1a8173f..0000000 Binary files a/theme/static/favicon-light.png and /dev/null differ diff --git a/theme/static/koi-hr.svg b/theme/static/koi-hr.svg new file mode 100644 index 0000000..1062b04 --- /dev/null +++ b/theme/static/koi-hr.svg @@ -0,0 +1,7 @@ + + + + diff --git a/theme/static/styles.css b/theme/static/styles.css index e39c0d6..d12f3f4 100644 --- a/theme/static/styles.css +++ b/theme/static/styles.css @@ -1,32 +1,6 @@ /* --- Variables & System Logic --- */ -:root { - color-scheme: light dark; - /* Light Mode Palette */ - --bg: #F6F4F0; - --bg-soft: #EDEAE4; - --fg: #111111; - --fg-soft: #555550; - --accent: #c0392b; /* 4.6:1 on --bg, WCAG AA */ - --salmon: #ee6f5c; /* decorative only, not for text */ - --border: #111111; - --code-bg: #E8E4DE; - --meta: #555550; - --max-width: 800px; -} - -@media (prefers-color-scheme: dark) { - :root { - --bg: #161412; - --bg-soft: #1F1C1A; - --fg: #F0EDE8; - --fg-soft: #888580; - --accent: #ee6f5c; /* salmon is fine on dark bg ~4.5:1 on #161412 */ - --salmon: #ee6f5c; - --border: #2C2825; - --code-bg: #0F0D0C; - --meta: #888580; - } -} +/* All tokens defined in tokens.css — import that first. */ +@import url('tokens.css'); /* --- Layout Architecture --- */ * { box-sizing: border-box; } @@ -43,11 +17,10 @@ body { } /* --- Navigation & Footer --- */ -nav ul { list-style: none; padding: 0; display: flex; gap: 1rem; border-bottom: 4px solid var(--fg); padding-bottom: 0.5rem; } +nav ul { list-style: none; padding: 0; display: flex; gap: 1rem; padding-bottom: 0.5rem; } nav a { text-transform: uppercase; font-weight: 900; text-decoration: none; } nav a:hover { background: var(--fg); color: var(--bg); } - -footer { margin-top: 4rem; border-top: 1px solid var(--border); padding-top: 1rem; font-size: 0.8rem; text-transform: uppercase; } +footer { padding-top: 1rem; font-size: 0.8rem; text-transform: uppercase; } /* --- Typography (Brutalist) --- */ h1, h2, h3 { line-height: 1.1; margin-top: 2rem; font-weight: 900; text-transform: uppercase; } @@ -124,6 +97,34 @@ img:hover { filter: grayscale(0); } outline: none; } +/* --- Horizontal Rule (Koi Divider) --- */ +hr { + border: none; + height: 2rem; + position: relative; + display: flex; + align-items: center; + justify-content: center; + background-image: url('koi-hr.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: auto 100%; +} + +hr::before, +hr::after { + content: ''; + position: absolute; + top: 50%; + transform: translateY(-50%); + width: calc(50% - 1.75rem); + height: 2px; + background: var(--fg); +} + +hr::before { left: 0; } +hr::after { right: 0; } + /* --- Footnote Alignment --- */ .footdef { display: flex; diff --git a/theme/static/tokens.css b/theme/static/tokens.css new file mode 100644 index 0000000..3e4523c --- /dev/null +++ b/theme/static/tokens.css @@ -0,0 +1,56 @@ +/* ============================================================================= + BRAND TOKENS — cleberg.net + Single source of truth for all design variables. + Import this before any other stylesheet. + ============================================================================= */ + +:root { + color-scheme: light dark; + + /* --- Color: Light Mode --- */ + --bg: #F6F4F0; /* Page background */ + --bg-soft: #EDEAE4; /* Subtle surface (inputs, cards) */ + --fg: #111111; /* Primary text, borders, table headers */ + --fg-soft: #555550; /* Secondary text, metadata */ + --accent: #c0392b; /* Interactive: links, h2 border. WCAG AA (4.6:1 on --bg). Text-safe. */ + --salmon: #ee6f5c; /* Decorative only. NOT for body text on light backgrounds. */ + --border: #111111; /* Hard borders (nav, tables) */ + --border-soft: #DDDAD4; /* Dashed/subtle dividers */ + --code-bg: #E8E4DE; /* Code blocks, blockquotes */ + --meta: #555550; /* Timestamps, labels, footnote numbers */ + + /* --- Typography --- */ + --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace; + --font-size-base: 1rem; + --font-size-sm: 0.85rem; + --font-size-xs: 0.8rem; + --font-weight-heavy: 900; + --line-height: 1.6; + + /* --- Layout --- */ + --max-width: 800px; + --space-xs: 0.5rem; + --space-sm: 1rem; + --space-md: 2rem; + --space-lg: 4rem; + + /* --- Borders --- */ + --border-width-hard: 3px; /* Tables, skip-link */ + --border-width-nav: 4px; /* Nav underline */ + --border-width-h2: 10px; /* h2 left accent bar */ +} + +@media (prefers-color-scheme: dark) { + :root { + --bg: #161412; + --bg-soft: #1F1C1A; + --fg: #F0EDE8; + --fg-soft: #888580; + --accent: #ee6f5c; /* Salmon is WCAG AA on dark bg (~4.5:1 on #161412). Text-safe in dark mode. */ + --salmon: #ee6f5c; + --border: #2C2825; + --border-soft: #2C2825; + --code-bg: #0F0D0C; + --meta: #888580; + } +} -- cgit v1.2.3