Commit `0222de67ab`

0222de67ab8f27b07469ea271afcf16c9c57b579

parent: 124d4dc1e7

Verified · cmc

cmc <hello@cleberg.net> · 2026-03-06 05:57 UTC

update styles with new theme

Layout: unified · split

BRAND.md added +98

@@ -0,0 +1,98 @@
	1	# Brand Reference — cleberg.net
	2
	3	Design decisions, usage rules, and porting checklist for this site and any
	4	future sites.
	5
	6	---
	7
	8	## Color
	9
	10	All tokens live in `theme/static/tokens.css`. Import it before any other
	11	stylesheet.
	12
	13	### Palette
	14
	15	\| Token \| Light \| Dark \| Role \|
	16	\|----------------\|-------------\|-------------\|-------------------------------------------\|
	17	\| `--bg` \| `#F6F4F0` \| `#161412` \| Page background \|
	18	\| `--bg-soft` \| `#EDEAE4` \| `#1F1C1A` \| Subtle surfaces (code blocks, inputs) \|
	19	\| `--fg` \| `#111111` \| `#F0EDE8` \| Primary text, hard borders, table headers \|
	20	\| `--fg-soft` \| `#555550` \| `#888580` \| Secondary text, metadata \|
	21	\| `--accent` \| `#c0392b` \| `#ee6f5c` \| Interactive elements only (see below) \|
	22	\| `--salmon` \| `#ee6f5c` \| `#ee6f5c` \| Decorative only (see below) \|
	23	\| `--border` \| `#111111` \| `#2C2825` \| Hard borders (nav, tables) \|
	24	\| `--border-soft`\| `#DDDAD4` \| `#2C2825` \| Dashed or subtle dividers \|
	25	\| `--code-bg` \| `#E8E4DE` \| `#0F0D0C` \| Code blocks, blockquotes \|
	26	\| `--meta` \| `#555550` \| `#888580` \| Timestamps, labels, footnote numbers \|
	27
	28	### Usage Rules
	29
	30	`--accent` is for interactive elements only: links, `h2` left border,
	31	footnote numbers, focus indicators. It is text-safe (WCAG AA: 4.6:1 on `--bg` in
	32	light mode; ~4.5:1 on `--bg` in dark mode).
	33
	34	`--salmon` is decorative only. Never use it for body text on a light
	35	background — it fails WCAG AA there. In dark mode, `--accent` and `--salmon`
	36	resolve to the same value (`#ee6f5c`), which is intentional.
	37
	38	---
	39
	40	## Typography
	41
	42	- Font stack: `--font-mono` (ui-monospace, Cascadia Code, Source Code Pro,
	43	Menlo, Consolas, monospace)
	44	- Headings: weight 900, uppercase, `line-height: 1.1`
	45	- `h2` accent bar: 10px left border in `--accent`
	46	- Body: `1rem`, `line-height: 1.6`
	47	- Meta/labels: `0.8–0.85rem`, uppercase, `--meta` color
	48	- Date format: `YYYY-MM-DD` everywhere, no exceptions
	49
	50	---
	51
	52	## Logo
	53
	54	Files live in `~/Documents/brand/logo/`.
	55
	56	\| Variant \| Use case \|
	57	\|-------------------------\|--------------------------------------------------\|
	58	\| `koi_light.svg/png` \| Full logo on light backgrounds \|
	59	\| `koi_dark.svg/png` \| Full logo on dark backgrounds \|
	60	\| `koi_light_minimal.svg` \| Favicon, nav, small UI contexts on light \|
	61	\| `koi_dark_minimal.svg` \| Favicon, nav, small UI contexts on dark \|
	62
	63	Rule: Use the minimal variant for anything under ~64px or in navigation
	64	contexts. Use the full variant for headers, OG images, or anywhere it has room
	65	to breathe.
	66
	67	---
	68
	69	## Signature Patterns
	70
	71	These are the things that make the site look like itself. Port all of them to
	72	any new site.
	73
	74	1. Grayscale images with color on hover — `img { filter: grayscale(1) }
	75	img:hover { filter: grayscale(0) }`. Apply to all content images by default.
	76	2. Blockquote as raw org-mode markup — `#+begin_quote` / `#+end_quote`
	77	pseudo-elements. Extend the "visible markup" aesthetic to other block
	78	elements where appropriate.
	79	3. Nav: uppercase, weight 900, invert on hover — `background: var(--fg);
	80	color: var(--bg)` on hover. No underlines in nav.
	81	4. Links: underline offset — `text-underline-offset: 3px`, invert on hover
	82	(same as nav pattern).
	83	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)`.
	84
	85	---
	86
	87	## Porting Checklist (New Site)
	88
	89	- [ ] Import `tokens.css` (or copy variables and update `tokens.css` as the
	90	source)
	91	- [ ] Apply monospace font stack
	92	- [ ] Apply grayscale image treatment
	93	- [ ] Use minimal koi as favicon
	94	- [ ] Use `YYYY-MM-DD` date format
	95	- [ ] Confirm `--accent` WCAG contrast on new background colors if palette is
	96	adjusted
	97	- [ ] Build or adapt OG/social card template using koi + palette + monospace
	98	type

theme/static/favicon-light.png deleted

Binary file not shown.

theme/static/koi-hr.svg added +7

@@ -0,0 +1,7 @@
	1	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1500 1500">
	2	<style>
	3	path { fill: #111111; }
	4	@media (prefers-color-scheme: dark) { path { fill: #F0EDE8; } }
	5	</style>
	6	<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"/>
	7	</svg>

theme/static/styles.css +32 −31

	@@ -1,32 +1,6 @@
1	/* --- Variables & System Logic --- */	1	/* --- Variables & System Logic --- */
2	:root {	2	/* All tokens defined in tokens.css — import that first. */
3	color-scheme: light dark;	3	@import url('tokens.css');
4	/* Light Mode Palette */
5	--bg: #F6F4F0;
6	--bg-soft: #EDEAE4;
7	--fg: #111111;
8	--fg-soft: #555550;
9	--accent: #c0392b; /* 4.6:1 on --bg, WCAG AA */
10	--salmon: #ee6f5c; /* decorative only, not for text */
11	--border: #111111;
12	--code-bg: #E8E4DE;
13	--meta: #555550;
14	--max-width: 800px;
15	}
16
17	@media (prefers-color-scheme: dark) {
18	:root {
19	--bg: #161412;
20	--bg-soft: #1F1C1A;
21	--fg: #F0EDE8;
22	--fg-soft: #888580;
23	--accent: #ee6f5c; /* salmon is fine on dark bg ~4.5:1 on #161412 */
24	--salmon: #ee6f5c;
25	--border: #2C2825;
26	--code-bg: #0F0D0C;
27	--meta: #888580;
28	}
29	}
30		4
31	/* --- Layout Architecture --- */	5	/* --- Layout Architecture --- */
32	* { box-sizing: border-box; }	6	* { box-sizing: border-box; }
	@@ -43,11 +17,10 @@ body {
43	}	17	}
44		18
45	/* --- Navigation & Footer --- */	19	/* --- Navigation & Footer --- */
46	nav ul { list-style: none; padding: 0; display: flex; gap: 1rem; border-bottom: 4px solid var(--fg); padding-bottom: 0.5rem; }	20	nav ul { list-style: none; padding: 0; display: flex; gap: 1rem; padding-bottom: 0.5rem; }
47	nav a { text-transform: uppercase; font-weight: 900; text-decoration: none; }	21	nav a { text-transform: uppercase; font-weight: 900; text-decoration: none; }
48	nav a:hover { background: var(--fg); color: var(--bg); }	22	nav a:hover { background: var(--fg); color: var(--bg); }
49		23	footer { padding-top: 1rem; font-size: 0.8rem; text-transform: uppercase; }
50	footer { margin-top: 4rem; border-top: 1px solid var(--border); padding-top: 1rem; font-size: 0.8rem; text-transform: uppercase; }
51		24
52	/* --- Typography (Brutalist) --- */	25	/* --- Typography (Brutalist) --- */
53	h1, h2, h3 { line-height: 1.1; margin-top: 2rem; font-weight: 900; text-transform: uppercase; }	26	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); }
124	outline: none;	97	outline: none;
125	}	98	}
126		99
		100	/* --- Horizontal Rule (Koi Divider) --- */
		101	hr {
		102	border: none;
		103	height: 2rem;
		104	position: relative;
		105	display: flex;
		106	align-items: center;
		107	justify-content: center;
		108	background-image: url('koi-hr.svg');
		109	background-repeat: no-repeat;
		110	background-position: center;
		111	background-size: auto 100%;
		112	}
		113
		114	hr::before,
		115	hr::after {
		116	content: '';
		117	position: absolute;
		118	top: 50%;
		119	transform: translateY(-50%);
		120	width: calc(50% - 1.75rem);
		121	height: 2px;
		122	background: var(--fg);
		123	}
		124
		125	hr::before { left: 0; }
		126	hr::after { right: 0; }
		127
127	/* --- Footnote Alignment --- */	128	/* --- Footnote Alignment --- */
128	.footdef {	129	.footdef {
129	display: flex;	130	display: flex;

theme/static/tokens.css added +56

@@ -0,0 +1,56 @@
	1	/* =============================================================================
	2	BRAND TOKENS — cleberg.net
	3	Single source of truth for all design variables.
	4	Import this before any other stylesheet.
	5	============================================================================= */
	6
	7	:root {
	8	color-scheme: light dark;
	9
	10	/* --- Color: Light Mode --- */
	11	--bg: #F6F4F0; /* Page background */
	12	--bg-soft: #EDEAE4; /* Subtle surface (inputs, cards) */
	13	--fg: #111111; /* Primary text, borders, table headers */
	14	--fg-soft: #555550; /* Secondary text, metadata */
	15	--accent: #c0392b; /* Interactive: links, h2 border. WCAG AA (4.6:1 on --bg). Text-safe. */
	16	--salmon: #ee6f5c; /* Decorative only. NOT for body text on light backgrounds. */
	17	--border: #111111; /* Hard borders (nav, tables) */
	18	--border-soft: #DDDAD4; /* Dashed/subtle dividers */
	19	--code-bg: #E8E4DE; /* Code blocks, blockquotes */
	20	--meta: #555550; /* Timestamps, labels, footnote numbers */
	21
	22	/* --- Typography --- */
	23	--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
	24	--font-size-base: 1rem;
	25	--font-size-sm: 0.85rem;
	26	--font-size-xs: 0.8rem;
	27	--font-weight-heavy: 900;
	28	--line-height: 1.6;
	29
	30	/* --- Layout --- */
	31	--max-width: 800px;
	32	--space-xs: 0.5rem;
	33	--space-sm: 1rem;
	34	--space-md: 2rem;
	35	--space-lg: 4rem;
	36
	37	/* --- Borders --- */
	38	--border-width-hard: 3px; /* Tables, skip-link */
	39	--border-width-nav: 4px; /* Nav underline */
	40	--border-width-h2: 10px; /* h2 left accent bar */
	41	}
	42
	43	@media (prefers-color-scheme: dark) {
	44	:root {
	45	--bg: #161412;
	46	--bg-soft: #1F1C1A;
	47	--fg: #F0EDE8;
	48	--fg-soft: #888580;
	49	--accent: #ee6f5c; /* Salmon is WCAG AA on dark bg (~4.5:1 on #161412). Text-safe in dark mode. */
	50	--salmon: #ee6f5c;
	51	--border: #2C2825;
	52	--border-soft: #2C2825;
	53	--code-bg: #0F0D0C;
	54	--meta: #888580;
	55	}
	56	}

theme/templates/base.html +8 −9

	@@ -13,7 +13,6 @@
13	{% if site_keywords is defined %}<meta name="keywords" content="{{ site_keywords }}" >{% endif %}	13	{% if site_keywords is defined %}<meta name="keywords" content="{{ site_keywords }}" >{% endif %}
14	<link rel="stylesheet" href="{{ url_for("static", file="styles.min.css") }}" type="text/css">	14	<link rel="stylesheet" href="{{ url_for("static", file="styles.min.css") }}" type="text/css">
15	<link rel="icon" href="{{ url_for("static", file="favicon.svg") }}" type="image/svg+xml">	15	<link rel="icon" href="{{ url_for("static", file="favicon.svg") }}" type="image/svg+xml">
16	<link rel="icon" href="{{ url_for("static", file="favicon-light.png") }}" type="image/png">
17	{% block meta %}{% endblock %}	16	{% block meta %}{% endblock %}
18	{% endblock %}	17	{% endblock %}
19	</head>	18	</head>
	@@ -28,17 +27,17 @@
28	<li><a href="/services/">Services</a></li>	27	<li><a href="/services/">Services</a></li>
29	</ul>	28	</ul>
30	</nav>	29	</nav>
31		30	<hr>
32	<main id="main">	31	<main id="main">
33	<div> {% block main %}{% endblock %}	32	<div> {% block main %}{% endblock %}
34	</div>	33	</div>
35	</main>	34	</main>
36		35	<hr>
37	<footer>	36	<footer>
38	<a href="https://github.com/ccleberg/cleberg.net">SOURCE</a> ·	37	<a href="https://github.com/ccleberg/cleberg.net">SOURCE</a> ·
39	<a href="/feed.xml">RSS</a> ·	38	<a href="/feed.xml">RSS</a> ·
40	<a href="http://paske4urhs6nttrtlkuwa5cowum3fjkc6yv6kl4ncx3mjxcd77764nqd.onion/">ONION</a> ·	39	<a href="http://paske4urhs6nttrtlkuwa5cowum3fjkc6yv6kl4ncx3mjxcd77764nqd.onion/">ONION</a> ·
41	<a href="/tips">Tips</a>	40	<a href="/tips">Tips</a>
42	</footer>	41	</footer>
43	</body>	42	</body>
44	</html>	43	</html>

Commit 0222de67ab

Commit `0222de67ab`