cmc/cleberg.net
My personal web garden & blog.
clone: git clone https://gitbay.org/cmc/cleberg.net.git
0222de67ab8f27b07469ea271afcf16c9c57b579
verified · cmc
author: Christian Cleberg <hello@cleberg.net> · 2026-03-06T05:57:26Z
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(-) new file mode 100644 @@ -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 deleted file mode 100644 Binary files a/theme/static/favicon-light.png and /dev/null differ new file mode 100644 @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1500 1500"> + <style> + path { fill: #111111; } + @media (prefers-color-scheme: dark) { path { fill: #F0EDE8; } } + </style> + <path fill-rule="nonzero" d="M 562.695312 907.28125 C 514.085938 881.21875 396.300781 818.089844 368.757812 795.410156 C 351.777344 781.4375 345.167969 771.671875 345.152344 765.117188 C 345.152344 762.648438 346.535156 760.578125 348.84375 758.890625 C 352.042969 756.558594 356.808594 754.898438 362.398438 753.796875 C 381.738281 750.015625 408.554688 753.210938 419.015625 759.636719 C 433.589844 783.507812 445.734375 801.542969 451.113281 804.4375 C 442.617188 780.46875 429.820312 749.761719 426.273438 724.375 C 422.824219 699.628906 421.839844 674.320312 423.527344 648.550781 C 424.203125 638.359375 425.214844 628.765625 426.183594 619.714844 C 431 574.277344 434.464844 541.792969 390.460938 495.28125 C 384.738281 489.226562 377.890625 482.316406 370.613281 474.960938 C 321.140625 424.960938 250.707031 353.765625 261.152344 267.800781 C 315.074219 306.644531 342.925781 327.1875 407.71875 334.761719 C 431.320312 337.511719 456.527344 336.820312 478.058594 329.164062 C 516.382812 315.507812 544.5625 284.574219 556.761719 269.183594 C 585.796875 331.273438 570.703125 413.90625 557.585938 485.699219 C 555.382812 497.800781 553.21875 509.597656 551.347656 520.890625 L 550.988281 518.554688 C 548.242188 492 533.292969 467.066406 523.683594 458.480469 C 543.953125 487.382812 544.246094 547.246094 546.410156 585.914062 C 548.929688 630.609375 564.742188 669.382812 589.390625 702.851562 C 598.3125 714.96875 608.402344 726.378906 619.417969 737.101562 C 631.074219 748.449219 648.730469 762.6875 668.375 775.730469 C 694.527344 793.078125 719.457031 807.15625 744.265625 818.808594 C 813.890625 851.503906 901.886719 873.054688 977.726562 889.058594 C 1010.898438 896.054688 1096.996094 920.363281 1158.511719 953.554688 C 1194.910156 973.207031 1222.335938 995.527344 1223.371094 1018.152344 C 1224.523438 1043.605469 1204.757812 1067.1875 1177.46875 1086.679688 C 1137.429688 1115.277344 1081.878906 1134.636719 1050.003906 1139.148438 C 1031.6875 1141.75 1013.195312 1143.371094 994.636719 1144.058594 C 982.558594 1144.5 970.476562 1144.539062 958.371094 1144.191406 C 968.617188 1130.5 979.1875 1114.320312 979.929688 1104.875 C 941.871094 1141.261719 909.90625 1170.003906 864.242188 1199.265625 C 825.28125 1224.238281 781.023438 1245.164062 744.679688 1242.683594 C 727.714844 1241.515625 717.398438 1236.394531 712.25 1228.964844 C 708.503906 1223.5625 707.335938 1216.6875 708.210938 1209.125 C 709.167969 1200.882812 712.5 1191.832031 717.585938 1182.796875 C 731.828125 1157.542969 759.238281 1133.378906 786.851562 1127.394531 C 807.09375 1134.054688 858.996094 1138.113281 869.710938 1127.019531 C 850.992188 1126.398438 825.226562 1126.160156 785.628906 1112.675781 C 726.160156 1092.4375 669.730469 1062.9375 619.5 1025.476562 C 570.769531 989.117188 527.917969 945.246094 493.855469 895.03125 C 490.457031 890.042969 487.257812 885.117188 484.230469 880.289062 C 512.519531 895.828125 553.472656 909.324219 562.695312 907.28125 Z M 849.492188 843.15625 C 822.199219 835.515625 746.46875 809.984375 712.699219 787.941406 C 727.59375 784.449219 741.570312 775.574219 755.640625 766.617188 C 778.648438 751.992188 801.984375 737.167969 827.550781 750.769531 C 865.59375 771.007812 855.625 821.660156 849.492188 843.15625 Z M 1187.714844 1095.996094 C 1193.289062 1108.085938 1206.632812 1127.722656 1213.546875 1132.421875 C 1206.738281 1121.804688 1197.832031 1107.753906 1195.359375 1090.117188 C 1220.78125 1069.574219 1238.171875 1044.957031 1236.910156 1017.554688 C 1236.273438 1003.515625 1228.519531 990.085938 1215.964844 977.492188 C 1227.179688 964.300781 1238.597656 955.117188 1253.757812 947.238281 C 1236.328125 950.964844 1222.746094 958.582031 1210.03125 971.890625 C 1197.898438 961.117188 1182.367188 950.980469 1165.015625 941.609375 C 1102.1875 907.703125 1014.351562 882.890625 980.527344 875.761719 C 940.914062 867.402344 901.410156 858.167969 862.488281 846.980469 C 869.40625 822.773438 880.914062 763.816406 833.9375 738.800781 C 801.347656 721.457031 774.664062 738.429688 748.339844 755.164062 C 714.078125 776.953125 704.867188 785.246094 675.054688 764.835938 C 645.808594 744.8125 620.042969 721.589844 600.316406 694.808594 C 569.453125 652.917969 553.351562 602.132812 561.96875 541.046875 C 564.328125 524.25 567.570312 506.546875 570.925781 488.140625 C 585.132812 410.402344 601.589844 320.296875 563.734375 253.046875 L 558.328125 243.4375 L 552.183594 252.632812 C 552.089844 252.765625 521.253906 299.34375 473.464844 316.371094 C 454.113281 323.269531 431.039062 323.839844 409.285156 321.292969 C 344.542969 313.730469 305.648438 285.066406 251.222656 245.695312 L 249.367188 255.355469 C 230.609375 352.796875 307.546875 430.535156 360.976562 484.542969 C 367.878906 491.511719 374.386719 498.078125 380.570312 504.636719 C 420.316406 546.636719 417.140625 576.492188 412.707031 618.253906 C 411.726562 627.359375 410.703125 637.019531 410.011719 647.636719 C 408.25 674.414062 409.269531 700.664062 412.839844 726.246094 C 413.664062 732.140625 414.621094 738.003906 415.707031 743.84375 C 400.136719 739 377.105469 737.089844 359.808594 740.472656 C 352.363281 741.933594 345.738281 744.363281 340.839844 747.929688 C 335.050781 752.152344 331.585938 757.804688 331.585938 765.128906 C 331.613281 775.546875 339.617188 789.015625 360.15625 805.921875 C 375.710938 818.742188 417.804688 843.34375 460.855469 867.351562 C 464.039062 873.097656 467.453125 878.921875 471.089844 884.828125 C 474.886719 890.996094 478.734375 896.941406 482.613281 902.675781 C 517.539062 954.148438 561.460938 999.121094 611.414062 1036.371094 C 658.433594 1071.457031 710.828125 1099.710938 766.101562 1120.132812 C 741.265625 1131.347656 718.578125 1153.363281 705.757812 1176.121094 C 699.824219 1186.632812 695.921875 1197.433594 694.738281 1207.558594 C 693.503906 1218.375 695.347656 1228.417969 701.085938 1236.699219 C 708.519531 1247.433594 722.175781 1254.761719 743.75 1256.234375 C 810.464844 1260.796875 899.523438 1194.117188 943.382812 1157.15625 C 960.628906 1158.085938 977.910156 1158.246094 995.15625 1157.621094 C 1014.125 1156.917969 1033.054688 1155.246094 1051.890625 1152.578125 C 1095.21875 1146.4375 1152.65625 1121.753906 1187.714844 1095.996094"/> +</svg> @@ -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; new file mode 100644 @@ -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; + } +} @@ -13,7 +13,6 @@ {% if site_keywords is defined %}<meta name="keywords" content="{{ site_keywords }}" >{% endif %} <link rel="stylesheet" href="{{ url_for("static", file="styles.min.css") }}" type="text/css"> <link rel="icon" href="{{ url_for("static", file="favicon.svg") }}" type="image/svg+xml"> - <link rel="icon" href="{{ url_for("static", file="favicon-light.png") }}" type="image/png"> {% block meta %}{% endblock %} {% endblock %} </head> @@ -28,17 +27,17 @@ <li><a href="/services/">Services</a></li> </ul> </nav> - + <hr> <main id="main"> <div> {% block main %}{% endblock %} </div> </main> - -<footer> - <a href="https://github.com/ccleberg/cleberg.net">SOURCE</a> · - <a href="/feed.xml">RSS</a> · - <a href="http://paske4urhs6nttrtlkuwa5cowum3fjkc6yv6kl4ncx3mjxcd77764nqd.onion/">ONION</a> · - <a href="/tips">Tips</a> -</footer> + <hr> + <footer> + <a href="https://github.com/ccleberg/cleberg.net">SOURCE</a> · + <a href="/feed.xml">RSS</a> · + <a href="http://paske4urhs6nttrtlkuwa5cowum3fjkc6yv6kl4ncx3mjxcd77764nqd.onion/">ONION</a> · + <a href="/tips">Tips</a> + </footer> </body> </html>