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 --- BRAND.md | 98 +++++++++++++++++++++++++++++++++++++++++ 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 +++++++++++++++++++++++ theme/templates/base.html | 17 ++++--- 6 files changed, 201 insertions(+), 40 deletions(-) create mode 100644 BRAND.md delete mode 100644 theme/static/favicon-light.png create mode 100644 theme/static/koi-hr.svg create mode 100644 theme/static/tokens.css diff --git a/BRAND.md b/BRAND.md new file mode 100644 index 0000000..b0d3f9f --- /dev/null +++ b/BRAND.md @@ -0,0 +1,98 @@ +# Brand Reference — cleberg.net + +Design decisions, usage rules, and porting checklist for this site and any +future sites. + +--- + +## Color + +All tokens live in `theme/static/tokens.css`. Import it before any other +stylesheet. + +### Palette + +| Token | Light | Dark | Role | +|----------------|-------------|-------------|-------------------------------------------| +| `--bg` | `#F6F4F0` | `#161412` | Page background | +| `--bg-soft` | `#EDEAE4` | `#1F1C1A` | Subtle surfaces (code blocks, inputs) | +| `--fg` | `#111111` | `#F0EDE8` | Primary text, hard borders, table headers | +| `--fg-soft` | `#555550` | `#888580` | Secondary text, metadata | +| `--accent` | `#c0392b` | `#ee6f5c` | Interactive elements only (see below) | +| `--salmon` | `#ee6f5c` | `#ee6f5c` | Decorative only (see below) | +| `--border` | `#111111` | `#2C2825` | Hard borders (nav, tables) | +| `--border-soft`| `#DDDAD4` | `#2C2825` | Dashed or subtle dividers | +| `--code-bg` | `#E8E4DE` | `#0F0D0C` | Code blocks, blockquotes | +| `--meta` | `#555550` | `#888580` | Timestamps, labels, footnote numbers | + +### Usage Rules + +**`--accent` is for interactive elements only:** links, `h2` left border, +footnote numbers, focus indicators. It is text-safe (WCAG AA: 4.6:1 on `--bg` in +light mode; ~4.5:1 on `--bg` in dark mode). + +**`--salmon` is decorative only.** Never use it for body text on a light +background — it fails WCAG AA there. In dark mode, `--accent` and `--salmon` +resolve to the same value (`#ee6f5c`), which is intentional. + +--- + +## Typography + +- **Font stack:** `--font-mono` (ui-monospace, Cascadia Code, Source Code Pro, + Menlo, Consolas, monospace) +- **Headings:** weight 900, uppercase, `line-height: 1.1` +- **`h2` accent bar:** 10px left border in `--accent` +- **Body:** `1rem`, `line-height: 1.6` +- **Meta/labels:** `0.8–0.85rem`, uppercase, `--meta` color +- **Date format:** `YYYY-MM-DD` everywhere, no exceptions + +--- + +## Logo + +Files live in `~/Documents/brand/logo/`. + +| Variant | Use case | +|-------------------------|--------------------------------------------------| +| `koi_light.svg/png` | Full logo on light backgrounds | +| `koi_dark.svg/png` | Full logo on dark backgrounds | +| `koi_light_minimal.svg` | Favicon, nav, small UI contexts on light | +| `koi_dark_minimal.svg` | Favicon, nav, small UI contexts on dark | + +**Rule:** Use the minimal variant for anything under ~64px or in navigation +contexts. Use the full variant for headers, OG images, or anywhere it has room +to breathe. + +--- + +## Signature Patterns + +These are the things that make the site look like itself. Port all of them to +any new site. + +1. **Grayscale images with color on hover** — `img { filter: grayscale(1) } + img:hover { filter: grayscale(0) }`. Apply to all content images by default. +2. **Blockquote as raw org-mode markup** — `#+begin_quote` / `#+end_quote` + pseudo-elements. Extend the "visible markup" aesthetic to other block + elements where appropriate. +3. **Nav: uppercase, weight 900, invert on hover** — `background: var(--fg); + color: var(--bg)` on hover. No underlines in nav. +4. **Links: underline offset** — `text-underline-offset: 3px`, invert on hover + (same as nav pattern). +5. **Hard borders on tables** — `3px solid var(--fg)` outer border, `1px solid var(--fg)` internal. Table headers use `background: var(--fg); color: var(--bg)`. + +--- + +## Porting Checklist (New Site) + +- [ ] Import `tokens.css` (or copy variables and update `tokens.css` as the + source) +- [ ] Apply monospace font stack +- [ ] Apply grayscale image treatment +- [ ] Use minimal koi as favicon +- [ ] Use `YYYY-MM-DD` date format +- [ ] Confirm `--accent` WCAG contrast on new background colors if palette is + adjusted +- [ ] Build or adapt OG/social card template using koi + palette + monospace + type 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; + } +} diff --git a/theme/templates/base.html b/theme/templates/base.html index dbdb3b5..b502a38 100644 --- a/theme/templates/base.html +++ b/theme/templates/base.html @@ -13,7 +13,6 @@ {% if site_keywords is defined %}{% endif %} - {% block meta %}{% endblock %} {% endblock %} @@ -28,17 +27,17 @@
  • Services
    • - +
    {% block main %}{% endblock %}
    - - +
    + -- cgit v1.2.3