cmc/cleberg.net

My personal web garden & blog. blog personal website https://cleberg.net

Commit cd0f20fa2d

cd0f20fa2de296b4da6308b4049f858c872d1b83

parent: 25ba3dc9c7

Verified · cmc

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

Remove info-strip CSS, add footer flex layout, blockquote p margin fix

Layout: unified · split

theme/static/styles.css +525 −110
@@ -1,106 +1,141 @@
1/* --- Variables & System Logic --- */
2/* All tokens defined in tokens.css — import that first. */
3@import url('tokens.css'); 1@import url('tokens.css');
4 2
5/* --- Layout Architecture --- */ 3/* ============================================================
6* { box-sizing: border-box; } 4 HOMEPAGE INTRO
5 ============================================================ */
6.homepage-intro {
7 max-width: var(--prose-w);
8 margin: 3rem 0;
9 margin-top: 1rem;
10 font-family: var(--font-serif);
11 font-size: var(--text-body);
12 line-height: var(--lh-body);
13}
14.homepage-intro p { margin-bottom: 1.1rem; }
15.homepage-intro p:first-child {
16 font-size: 0.9rem;
17 text-transform: uppercase;
18 letter-spacing: 0.1em;
19 font-family: var(--font-sans);
20 color: var(--meta);
21 margin-bottom: 0.5rem;
22}
23.homepage-intro p:nth-child(2) {
24 font-size: 1.3rem;
25 font-weight: 700;
26 letter-spacing: -0.01em;
27 color: var(--fg);
28 margin-bottom: 1.5rem;
29}
30
31/* ============================================================
32 RESET & BASE
33 ============================================================ */
34*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
7 35
8body { 36body {
9 background: var(--bg); 37 background: var(--bg);
10 color: var(--fg); 38 color: var(--fg);
11 font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace; 39 font-family: var(--font-sans);
12 line-height: 1.6; 40 font-size: var(--text-body);
13 max-width: var(--max-width); 41 line-height: var(--lh-body);
14 margin: 0 auto; 42 -webkit-font-smoothing: antialiased;
15 padding: 2rem 1rem;
16 text-rendering: optimizeLegibility; 43 text-rendering: optimizeLegibility;
17} 44}
18 45
19/* --- Navigation & Footer --- */ 46/* Full-bleed header — border and nav span 100vw */
20nav ul { list-style: none; padding: 0; display: flex; gap: 1rem; padding-bottom: 0.5rem; } 47header {
21nav a { text-transform: uppercase; font-weight: 900; text-decoration: none; } 48 width: 100%;
22nav a:hover { background: var(--fg); color: var(--bg); }
23footer { padding-top: 1rem; font-size: 0.8rem; text-transform: uppercase; }
24
25/* --- Typography (Brutalist) --- */
26h1, h2, h3 { line-height: 1.1; margin-top: 2rem; font-weight: 900; text-transform: uppercase; }
27h1 { font-size: 2.2rem; margin-bottom: 1rem; }
28h2 { border-left: 10px solid var(--accent); padding-left: 0.75rem; }
29
30a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
31a:hover { background: var(--accent); color: var(--bg); text-decoration: none; }
32
33/* --- Weblorg / Template Specifics --- */
34section b { font-size: 0.85rem; text-transform: uppercase; color: var(--meta); margin-top: 0.5rem; }
35.post { display: flex; align-items: center; border-bottom: 1px dashed var(--border); padding: 0.5rem 0; }
36.post time { font-size: 0.8rem; color: var(--meta); margin-right: 0.5rem; white-space: nowrap; flex-shrink: 0; }
37.metadata b { display: block; font-size: 0.7rem; }
38
39/* --- Org-Mode Tables (Heavy Grid) --- */
40table { width: 100%; border-collapse: collapse; margin: 2rem 0; border: 3px solid var(--fg); }
41th, td { border: 1px solid var(--fg); padding: 0.75rem; text-align: left; }
42th { background: var(--fg); color: var(--bg); text-transform: uppercase; font-size: 0.8rem; }
43
44/* --- Code & Pre blocks --- */
45pre { padding: 1rem; border: 1px solid var(--border); background: var(--code-bg); overflow-x: auto; }
46code { background: var(--code-bg); padding: 0.2rem 0.4rem; }
47
48/* Blockquote styling */
49blockquote {
50 background-color: var(--code-bg);
51 font-style: italic;
52 margin: 1.5em 0;
53 padding: 0;
54} 49}
55blockquote p { margin: 0; } 50
56blockquote::before { 51/* Centered content column */
57 content: "#+begin_quote"; 52main,
58 display: block; 53footer,
59 color: var(--fg); 54header {
55 max-width: var(--outer-w);
56 margin: 0 auto;
57 padding-left: var(--pad);
58 padding-right: var(--pad);
60} 59}
60main { padding-bottom: 6rem; }
61footer { padding-bottom: 3rem; }
61 62
62blockquote::after { 63/* Prose constraint — applied to article/page body text only */
63 content: "#+end_quote"; 64.prose {
64 display: block; 65 max-width: var(--prose-w);
65 color: var(--fg);
66} 66}
67 67
68/* --- Accessibility & Efficiency --- */ 68/* ============================================================
69img { max-width: 100%; height: auto; filter: grayscale(1); } 69 MASTHEAD
70img:hover { filter: grayscale(0); } 70 ============================================================ */
71.masthead {
72 border-top: 2px solid var(--fg);
73 padding-top: 1.5rem;
74 padding-bottom: 0;
75 padding-left: var(--pad);
76 padding-right: var(--pad);
77}
71 78
72/* --- Accessibility: Skip Link --- */ 79.masthead-title {
73.skip-link { 80 display: block;
74 position: absolute; 81 font-family: var(--font-serif);
75 top: -100px; /* Hide off-screen */ 82 font-size: var(--text-display);
76 left: 50%; 83 font-weight: 700;
77 transform: translateX(-50%); 84 line-height: var(--lh-display);
78 background: var(--fg); 85 letter-spacing: -0.03em;
79 color: var(--bg); 86 text-decoration: none;
80 padding: 1rem 2rem; 87 color: var(--fg);
81 z-index: 999; 88 margin-bottom: 1.25rem;
82 font-weight: 900;
83 text-transform: uppercase;
84 border: 3px solid var(--accent);
85 text-decoration: none;
86 transition: top 0.2s ease-in-out;
87} 89}
90.masthead-title:hover { color: var(--accent); background: none; }
88 91
89/* Show the link when a user tabs to it */ 92.masthead-subtitle {
90.skip-link:focus { 93 font-family: var(--font-sans);
91 top: 0; 94 font-size: var(--text-xs);
92 outline: none; /* We use the border and color change as the indicator */ 95 letter-spacing: 0.12em;
96 color: var(--meta);
97 text-transform: lowercase;
98 margin-bottom: 1rem;
93} 99}
94 100
95/* Ensure the main area doesn't show a blue ring when focused via skip-link */ 101/* ============================================================
96#main-content:focus { 102 NAV STRIP — full outer width, equal cells
97 outline: none; 103 ============================================================ */
104.masthead nav {
105 border-top: 1px solid var(--border-soft);
106 border-bottom: 1px solid var(--border-soft);
107}
108.masthead nav ul {
109 list-style: none;
110 display: flex;
111}.masthead nav li { flex: 1; }
112.masthead nav a {
113 display: block;
114 text-align: center;
115 padding: 0.55rem 0;
116 font-size: var(--text-xs);
117 font-weight: 700;
118 text-transform: uppercase;
119 letter-spacing: 0.16em;
120 text-decoration: none;
121 color: var(--meta);
122 border-right: 1px solid var(--border-soft);
123 transition: color 0.1s, background 0.1s;
98} 124}
125.masthead nav li:last-child a { border-right: none; }
126.masthead nav a:hover { color: var(--bg); background: var(--fg); }
99 127
100/* --- Horizontal Rule (Koi Divider) --- */ 128/* ============================================================
129 MAIN CONTENT AREA
130 ============================================================ */
131main { padding-top: 2rem; }
132
133/* ============================================================
134 KOI HR
135 ============================================================ */
101hr { 136hr {
102 border: none; 137 border: none;
103 height: 2rem; 138 height: 2.5rem;
104 position: relative; 139 position: relative;
105 display: flex; 140 display: flex;
106 align-items: center; 141 align-items: center;
@@ -109,52 +144,432 @@ hr {
109 background-repeat: no-repeat; 144 background-repeat: no-repeat;
110 background-position: center; 145 background-position: center;
111 background-size: auto 100%; 146 background-size: auto 100%;
147 margin: 3rem 0;
112} 148}
113 149hr::before, hr::after {
114hr::before,
115hr::after {
116 content: ''; 150 content: '';
117 position: absolute; 151 position: absolute;
118 top: 50%; 152 top: 50%;
119 transform: translateY(-50%); 153 transform: translateY(-50%);
120 width: calc(50% - 1.75rem); 154 width: calc(50% - 2rem);
121 height: 1px; 155 height: 1px;
122 background: var(--fg); 156 background: var(--border-soft);
123} 157}
124
125hr::before { left: 0; } 158hr::before { left: 0; }
126hr::after { right: 0; } 159hr::after { right: 0; }
127 160
128/* --- Footnote Alignment --- */ 161/* ============================================================
129.footdef { 162 FOOTER
130 display: flex; 163 ============================================================ */
131 align-items: flex-start; /* Keeps number at the top if text wraps */ 164footer {
132 gap: 1rem; /* Space between number and text */ 165 font-size: var(--text-xs);
133 margin-bottom: 0.5rem; 166 text-transform: uppercase;
167 letter-spacing: 0.14em;
168 color: var(--meta);
169 display: flex;
170 flex-direction: column;
171 gap: 0.4rem;
172}
173footer a { color: var(--meta); text-decoration: none; transition: color 0.1s; }
174footer a:hover { color: var(--fg); background: none; }
175
176/* ============================================================
177 TYPOGRAPHY
178 ============================================================ */
179h1, h2, h3, h4 {
180 font-family: var(--font-serif);
181 font-weight: 700;
182 letter-spacing: -0.02em;
183 line-height: 1.1;
184}
185
186/* Page-level h1 (blog list, garden, guides) */
187h1 {
188 font-size: var(--text-h1);
189 margin-bottom: 0.5rem;
190}
191
192/* Article display title — larger, tighter */
193.article-title {
194 font-family: var(--font-serif);
195 font-size: clamp(2.4rem, 5vw, 3.6rem);
196 font-weight: 700;
197 line-height: 1.05;
198 letter-spacing: -0.03em;
199 margin: 0.4rem 0 0;
200}
201
202h2 {
203 font-size: var(--text-h2);
204 border-left: 1px solid var(--accent);
205 padding-left: 0.75rem;
206 margin-top: 2.5rem;
207 margin-bottom: 0.4rem;
208}
209h3 { font-size: 1.05rem; margin-top: 2rem; margin-bottom: 0.3rem; }
210
211p { margin-bottom: 1.2rem; }
212
213/* Accent ONLY on links and h2 bar — nowhere else */
214a {
215 color: var(--accent);
216 text-decoration: underline;
217 text-underline-offset: 3px;
218 transition: background 0.1s, color 0.1s;
219}
220a:hover { background: var(--accent); color: var(--bg); text-decoration: none; }
221
222/* ============================================================
223 SECTION LABEL — uppercase eyebrow text
224 ============================================================ */
225.label {
226 display: block;
227 font-size: var(--text-xs);
228 font-weight: 700;
229 text-transform: uppercase;
230 letter-spacing: 0.16em;
231 color: var(--meta);
232 border-bottom: 1px solid var(--fg);
233 padding-bottom: 0.5rem;
234 margin-bottom: 0;
235}
236
237/* ============================================================
238 INFO STRIP — homepage identity block
239 ============================================================ */
240
241
242/* ============================================================
243 POST LIST — numbered, full outer width
244 ============================================================ */
245.post-list {
246 list-style: none;
247 counter-reset: posts;
248}
249.post-list-item {
250 counter-increment: posts;
251 display: grid;
252 grid-template-columns: 2.5rem 1fr 7rem;
253 align-items: baseline;
254 gap: 0 1rem;
255 padding: 0.75rem 0;
256 border-bottom: 1px solid var(--border-soft);
257}
258.post-list-item:first-child { border-top: 1px solid var(--border-soft); }
259.post-list-item::before {
260 content: counter(posts, decimal-leading-zero);
261 font-family: var(--font-mono);
262 font-size: var(--text-xs);
263 color: var(--meta);
264 letter-spacing: 0.04em;
265 grid-column: 1;
266}
267.post-list-item a {
268 font-size: var(--text-sm);
269 justify-self: start;
270}
271.post-list-item time {
272 font-size: var(--text-xs);
273 font-family: var(--font-mono);
274 color: var(--meta);
275 text-align: right;
276 white-space: nowrap;
277 letter-spacing: 0.04em;
278}
279
280/* Year separator — full-width label, resets counter display */
281.post-list-year {
282 display: block;
283 font-family: var(--font-sans);
284 font-size: var(--text-xs);
285 font-weight: 700;
286 text-transform: uppercase;
287 letter-spacing: 0.14em;
288 color: var(--meta);
289 padding: 1.5rem 0 0.4rem;
290 counter-increment: none;
291}
292
293.all-posts-link {
294 display: inline-block;
295 margin-top: 1.5rem;
296 font-size: var(--text-xs);
297 font-weight: 700;
298 text-transform: uppercase;
299 letter-spacing: 0.12em;
300}
301
302/* ============================================================
303 ARTICLE — post page
304 ============================================================ */
305.article-dateline {
306 font-family: var(--font-mono);
307 font-size: var(--text-xs);
308 text-transform: uppercase;
309 letter-spacing: 0.14em;
310 color: var(--meta);
311 margin-bottom: 0.35rem;
312}
313
314.article-standfirst {
315 font-family: var(--font-serif);
316 font-size: 1.15rem;
317 line-height: 1.55;
318 color: var(--fg-soft);
319 padding: 1.25rem 0;
320 border-top: 1px solid var(--border-soft);
321 border-bottom: 1px solid var(--fg);
322 margin-top: 1rem;
323 max-width: var(--prose-w);
324}
325
326.article-body {
327 font-family: var(--font-serif);
328 font-size: var(--text-body);
329 line-height: var(--lh-body);
330 max-width: var(--prose-w);
331 margin-top: 2.5rem;
332}
333.article-body p { margin-bottom: 1.3rem; }
334
335.reply-link {
336 max-width: var(--prose-w);
337 margin-top: 4rem;
338 padding-top: 1.5rem;
339 border-top: 1px solid var(--border-soft);
340 font-size: var(--text-xs);
341 font-family: var(--font-sans);
342 text-transform: uppercase;
343 letter-spacing: 0.12em;
344}
345
346/* ============================================================
347 GENERIC PAGE (about, uses, etc.)
348 ============================================================ */
349.page-body {
350 font-family: var(--font-serif);
351 font-size: var(--text-body);
352 line-height: var(--lh-body);
353 max-width: var(--prose-w);
354 margin-top: 2rem;
355}
356.page-body p { margin-bottom: 1.3rem; }
357
358/* ============================================================
359 BLOG ARCHIVE
360 ============================================================ */
361.blog-meta {
362 font-size: var(--text-sm);
363 color: var(--meta);
364 margin: 0.75rem 0 2rem;
365}
366.blog-meta code {
367 font-size: var(--text-xs);
368 background: var(--code-bg);
369 padding: 0.1rem 0.35rem;
370 font-family: var(--font-mono);
371}
372
373/* Year separators in post list */
374.post-list-year {
375 font-family: var(--font-serif);
376 font-size: var(--text-xs);
377 font-weight: 700;
378 text-transform: uppercase;
379 letter-spacing: 0.14em;
380 color: var(--meta);
381 padding: 1.25rem 0 0.5rem;
382 list-style: none;
383 grid-column: 1 / -1;
384}
385
386/* Restore list styling inside content areas */
387.article-body ul,
388.article-body ol,
389.page-body ul,
390.page-body ol {
391 padding-left: 1.5rem;
392 margin-bottom: 1.2rem;
393}
394.article-body li,
395.page-body li {
396 margin-bottom: 0.3rem;
397}
398.article-body ul ul,
399.article-body ol ol,
400.page-body ul ul,
401.page-body ol ol {
402 margin-bottom: 0;
403}
404
405/* ============================================================
406 GARDEN
407 ============================================================ */
408.garden-index { list-style: none; }
409.garden-index li {
410 display: flex;
411 flex-direction: column;
412 gap: 0.15rem;
413 padding: 0.8rem 0;
414 border-bottom: 1px solid var(--border-soft);
415}
416.garden-index li:first-child { border-top: 1px solid var(--border-soft); }
417.garden-index a { font-size: var(--text-sm); }
418.garden-desc { font-size: var(--text-xs); color: var(--meta); }
419
420/* ============================================================
421 APP CARDS
422 ============================================================ */
423.app-card {
424 display: flex;
425 gap: 1.25rem;
426 align-items: flex-start;
427 padding: 1.25rem 0;
428 border-bottom: 1px solid var(--border-soft);
429}
430.app-card:first-of-type { border-top: 1px solid var(--border-soft); }
431.app-icon { width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0; filter: none !important; margin: 0; display: block; }
432.app-card a:has(.app-icon):hover { background: none; }
433.app-info { display: flex; flex-direction: column; gap: 0.2rem; }
434.app-title { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-sm); }
435.app-subtitle { font-size: var(--text-xs); color: var(--meta); }
436.app-links { font-size: var(--text-xs); margin-top: 0.3rem; }
437
438/* ============================================================
439 CODE & PRE
440 ============================================================ */
441pre {
442 padding: 1.25rem;
443 border-left: 1px solid var(--border-soft);
444 background: var(--code-bg);
445 overflow-x: auto;
446 font-size: var(--text-sm);
447 margin: 1.75rem 0;
448 line-height: 1.6;
449}
450code {
451 font-family: var(--font-mono);
452 background: var(--code-bg);
453 padding: 0.15rem 0.4rem;
454 font-size: 0.875em;
455}
456pre code { background: none; padding: 0; font-size: inherit; }
457
458/* ============================================================
459 BLOCKQUOTE — intentional Org-mode delimiters
460 ============================================================ */
461blockquote {
462 font-style: italic;
463 margin: 1.75rem 0;
464 padding: 0.75rem 1rem;
465 border-left: 1px solid var(--border-soft);
466 background: var(--code-bg);
467}
468blockquote p:last-child { margin-bottom: 0; }
469blockquote p { margin: 0; }
470blockquote::before {
471 content: "#+begin_quote";
472 display: block;
473 color: var(--meta);
474 font-style: normal;
475 font-size: var(--text-xs);
476 font-family: var(--font-mono);
477 letter-spacing: 0.04em;
478 margin-bottom: 0.5rem;
479}
480blockquote::after {
481 content: "#+end_quote";
482 display: block;
483 color: var(--meta);
484 font-style: normal;
485 font-size: var(--text-xs);
486 font-family: var(--font-mono);
487 letter-spacing: 0.04em;
488 margin-top: 0.5rem;
134} 489}
135 490
136/* Ensure the paragraph doesn't add its own block margins */ 491/* ============================================================
137.footpara { 492 TABLES
138 margin: 0; 493 ============================================================ */
139 flex: 1; 494table { width: 100%; border-collapse: collapse; margin: 2rem 0; }
140 display: flex; 495th, td {
141 flex-direction: column; 496 border-bottom: 1px solid var(--border-soft);
142 gap: 0.5rem; 497 padding: 0.65rem 0.75rem;
498 text-align: left;
499 font-size: var(--text-sm);
500}
501th {
502 border-bottom: 1px solid var(--fg);
503 font-size: var(--text-xs);
504 text-transform: uppercase;
505 letter-spacing: 0.1em;
506 font-weight: 700;
143} 507}
508tr:last-child td { border-bottom: none; }
144 509
145/* -- Garden -- */ 510/* ============================================================
511 IMAGES
512 ============================================================ */
513img {
514 max-width: 100%;
515 height: auto;
516 filter: grayscale(1);
517 transition: filter 0.25s;
518 display: block;
519 margin: 2rem 0;
520}
521img:hover { filter: grayscale(0); }
146 522
147/* Style the footnote number to be a fixed width for alignment */ 523/* ============================================================
524 FOOTNOTES
525 ============================================================ */
526.footdef { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 0.5rem; }
527.footpara { margin: 0; flex: 1; font-size: var(--text-sm); }
148.footnum { 528.footnum {
149 font-weight: bold; 529 font-weight: 700;
150 min-width: 1.5rem; 530 min-width: 1.5rem;
151 text-align: right; 531 text-align: right;
152 text-decoration: none; 532 text-decoration: none;
153 font-size: 0.85rem; 533 font-size: var(--text-xs);
154 color: var(--accent); 534 color: var(--meta);
535 font-family: var(--font-mono);
536}
537
538/* ============================================================
539 SKIP LINK
540 ============================================================ */
541.skip-link {
542 position: absolute;
543 top: -100px;
544 left: 50%;
545 transform: translateX(-50%);
546 background: var(--fg);
547 color: var(--bg);
548 padding: 0.75rem 1.5rem;
549 z-index: 999;
550 font-weight: 700;
551 font-size: var(--text-xs);
552 text-transform: uppercase;
553 letter-spacing: 0.12em;
554 text-decoration: none;
555 transition: top 0.2s;
556}
557.skip-link:focus { top: 0; outline: none; }
558#main-content:focus { outline: none; }
559
560/* ============================================================
561 RESPONSIVE
562 ============================================================ */
563@media (max-width: 700px) {
564 .masthead-title { font-size: clamp(3rem, 14vw, 5rem); }
565 .masthead nav ul { flex-wrap: wrap; }
566 .masthead nav li { flex: none; width: 50%; }
567 .masthead nav a { border-bottom: 1px solid var(--border-soft); }
568 .post-list-item { grid-template-columns: 2.25rem 1fr; }
569 .post-list-item time { display: none; }
570 .article-title { font-size: clamp(2rem, 9vw, 2.8rem); }
155} 571}
156 572
157@media (max-width: 600px) { 573@media (max-width: 480px) {
158 body { padding: 1rem; } 574 .masthead nav li { width: 100%; }
159 .post { flex-direction: column; align-items: flex-start; }
160} 575}
theme/static/tokens.css +36 −41
@@ -1,56 +1,51 @@
1/* ============================================================================= 1/* =============================================================================
2 BRAND TOKENS — cleberg.net 2 BRAND TOKENS — cleberg.net
3 Single source of truth for all design variables.
4 Import this before any other stylesheet.
5 ============================================================================= */ 3 ============================================================================= */
6
7:root { 4:root {
8 color-scheme: light dark; 5 color-scheme: light dark;
9 6
10 /* --- Color: Light Mode --- */ 7 /* Light */
11 --bg: #F6F4F0; /* Page background */ 8 --bg: #ffffff;
12 --bg-soft: #EDEAE4; /* Subtle surface (inputs, cards) */ 9 --bg-soft: #f5f5f5;
13 --fg: #111111; /* Primary text, borders, table headers */ 10 --fg: #0a0a0a;
14 --fg-soft: #555550; /* Secondary text, metadata */ 11 --fg-soft: #444444;
15 --accent: #c0392b; /* Interactive: links, h2 border. WCAG AA (4.6:1 on --bg). Text-safe. */ 12 --accent: #c0392b;
16 --salmon: #ee6f5c; /* Decorative only. NOT for body text on light backgrounds. */ 13 --border: #0a0a0a;
17 --border: #111111; /* Hard borders (nav, tables) */ 14 --border-soft: #dedede;
18 --border-soft: #DDDAD4; /* Dashed/subtle dividers */ 15 --code-bg: #f3f3f3;
19 --code-bg: #E8E4DE; /* Code blocks, blockquotes */ 16 --meta: #999999;
20 --meta: #555550; /* Timestamps, labels, footnote numbers */
21 17
22 /* --- Typography --- */ 18 /* Fonts */
23 --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace; 19 --font-serif: Georgia, 'Times New Roman', serif;
24 --font-size-base: 1rem; 20 --font-sans: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
25 --font-size-sm: 0.85rem; 21 --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
26 --font-size-xs: 0.8rem;
27 --font-weight-heavy: 900;
28 --line-height: 1.6;
29 22
30 /* --- Layout --- */ 23 /* Type scale */
31 --max-width: 800px; 24 --text-display: clamp(4rem, 8vw, 6.5rem);
32 --space-xs: 0.5rem; 25 --text-h1: clamp(2.2rem, 4vw, 3rem);
33 --space-sm: 1rem; 26 --text-h2: 1.2rem;
34 --space-md: 2rem; 27 --text-body: 1.0625rem;
35 --space-lg: 4rem; 28 --text-sm: 0.875rem;
29 --text-xs: 0.6875rem; /* 11px — label tier */
30 --lh-display: 0.95;
31 --lh-body: 1.75;
36 32
37 /* --- Borders --- */ 33 /* Layout */
38 --border-width-hard: 3px; /* Tables, skip-link */ 34 --outer-w: 1000px;
39 --border-width-nav: 4px; /* Nav underline */ 35 --prose-w: 720px;
40 --border-width-h2: 10px; /* h2 left accent bar */ 36 --pad: clamp(1.25rem, 4vw, 2.5rem);
41} 37}
42 38
43@media (prefers-color-scheme: dark) { 39@media (prefers-color-scheme: dark) {
44 :root { 40 :root {
45 --bg: #161412; 41 --bg: #080808;
46 --bg-soft: #1F1C1A; 42 --bg-soft: #111111;
47 --fg: #F0EDE8; 43 --fg: #eeebe6;
48 --fg-soft: #888580; 44 --fg-soft: #aaa8a3;
49 --accent: #ee6f5c; /* Salmon is WCAG AA on dark bg (~4.5:1 on #161412). Text-safe in dark mode. */ 45 --accent: #e05a48;
50 --salmon: #ee6f5c; 46 --border: #eeebe6;
51 --border: #2C2825; 47 --border-soft: #1e1e1e;
52 --border-soft: #2C2825; 48 --code-bg: #0d0d0d;
53 --code-bg: #0F0D0C; 49 --meta: #555555;
54 --meta: #888580;
55 } 50 }
56} 51}