Commit cd0f20fa2d
Verified · cmc
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 | 1 | @import url('tokens.css'); |
| 4 | 2 | |
| 5 | /* --- Layout Architecture --- */ | |
| 6 | * { box-sizing: border-box; } | |
| 3 | /* ============================================================ | |
| 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 | |
| 8 | 36 | body { |
| 9 | 37 | background: var(--bg); |
| 10 | 38 | color: var(--fg); |
| 11 | font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace; | |
| 12 | line-height: 1.6; | |
| 13 | max-width: var(--max-width); | |
| 14 | margin: 0 auto; | |
| 15 | padding: 2rem 1rem; | |
| 39 | font-family: var(--font-sans); | |
| 40 | font-size: var(--text-body); | |
| 41 | line-height: var(--lh-body); | |
| 42 | -webkit-font-smoothing: antialiased; | |
| 16 | 43 | text-rendering: optimizeLegibility; |
| 17 | 44 | } |
| 18 | 45 | |
| 19 | /* --- Navigation & Footer --- */ | |
| 20 | nav ul { list-style: none; padding: 0; display: flex; gap: 1rem; padding-bottom: 0.5rem; } | |
| 21 | nav a { text-transform: uppercase; font-weight: 900; text-decoration: none; } | |
| 22 | nav a:hover { background: var(--fg); color: var(--bg); } | |
| 23 | footer { padding-top: 1rem; font-size: 0.8rem; text-transform: uppercase; } | |
| 24 | ||
| 25 | /* --- Typography (Brutalist) --- */ | |
| 26 | h1, h2, h3 { line-height: 1.1; margin-top: 2rem; font-weight: 900; text-transform: uppercase; } | |
| 27 | h1 { font-size: 2.2rem; margin-bottom: 1rem; } | |
| 28 | h2 { border-left: 10px solid var(--accent); padding-left: 0.75rem; } | |
| 29 | ||
| 30 | a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } | |
| 31 | a:hover { background: var(--accent); color: var(--bg); text-decoration: none; } | |
| 32 | ||
| 33 | /* --- Weblorg / Template Specifics --- */ | |
| 34 | section 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) --- */ | |
| 40 | table { width: 100%; border-collapse: collapse; margin: 2rem 0; border: 3px solid var(--fg); } | |
| 41 | th, td { border: 1px solid var(--fg); padding: 0.75rem; text-align: left; } | |
| 42 | th { background: var(--fg); color: var(--bg); text-transform: uppercase; font-size: 0.8rem; } | |
| 43 | ||
| 44 | /* --- Code & Pre blocks --- */ | |
| 45 | pre { padding: 1rem; border: 1px solid var(--border); background: var(--code-bg); overflow-x: auto; } | |
| 46 | code { background: var(--code-bg); padding: 0.2rem 0.4rem; } | |
| 47 | ||
| 48 | /* Blockquote styling */ | |
| 49 | blockquote { | |
| 50 | background-color: var(--code-bg); | |
| 51 | font-style: italic; | |
| 52 | margin: 1.5em 0; | |
| 53 | padding: 0; | |
| 46 | /* Full-bleed header — border and nav span 100vw */ | |
| 47 | header { | |
| 48 | width: 100%; | |
| 54 | 49 | } |
| 55 | blockquote p { margin: 0; } | |
| 56 | blockquote::before { | |
| 57 | content: "#+begin_quote"; | |
| 58 | display: block; | |
| 59 | color: var(--fg); | |
| 50 | ||
| 51 | /* Centered content column */ | |
| 52 | main, | |
| 53 | footer, | |
| 54 | header { | |
| 55 | max-width: var(--outer-w); | |
| 56 | margin: 0 auto; | |
| 57 | padding-left: var(--pad); | |
| 58 | padding-right: var(--pad); | |
| 60 | 59 | } |
| 60 | main { padding-bottom: 6rem; } | |
| 61 | footer { padding-bottom: 3rem; } | |
| 61 | 62 | |
| 62 | blockquote::after { | |
| 63 | content: "#+end_quote"; | |
| 64 | display: block; | |
| 65 | color: var(--fg); | |
| 63 | /* Prose constraint — applied to article/page body text only */ | |
| 64 | .prose { | |
| 65 | max-width: var(--prose-w); | |
| 66 | 66 | } |
| 67 | 67 | |
| 68 | /* --- Accessibility & Efficiency --- */ | |
| 69 | img { max-width: 100%; height: auto; filter: grayscale(1); } | |
| 70 | img:hover { filter: grayscale(0); } | |
| 68 | /* ============================================================ | |
| 69 | MASTHEAD | |
| 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 --- */ | |
| 73 | .skip-link { | |
| 74 | position: absolute; | |
| 75 | top: -100px; /* Hide off-screen */ | |
| 76 | left: 50%; | |
| 77 | transform: translateX(-50%); | |
| 78 | background: var(--fg); | |
| 79 | color: var(--bg); | |
| 80 | padding: 1rem 2rem; | |
| 81 | z-index: 999; | |
| 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; | |
| 79 | .masthead-title { | |
| 80 | display: block; | |
| 81 | font-family: var(--font-serif); | |
| 82 | font-size: var(--text-display); | |
| 83 | font-weight: 700; | |
| 84 | line-height: var(--lh-display); | |
| 85 | letter-spacing: -0.03em; | |
| 86 | text-decoration: none; | |
| 87 | color: var(--fg); | |
| 88 | margin-bottom: 1.25rem; | |
| 87 | 89 | } |
| 90 | .masthead-title:hover { color: var(--accent); background: none; } | |
| 88 | 91 | |
| 89 | /* Show the link when a user tabs to it */ | |
| 90 | .skip-link:focus { | |
| 91 | top: 0; | |
| 92 | outline: none; /* We use the border and color change as the indicator */ | |
| 92 | .masthead-subtitle { | |
| 93 | font-family: var(--font-sans); | |
| 94 | font-size: var(--text-xs); | |
| 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 */ | |
| 96 | #main-content:focus { | |
| 97 | outline: none; | |
| 101 | /* ============================================================ | |
| 102 | NAV STRIP — full outer width, equal cells | |
| 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 | ============================================================ */ | |
| 131 | main { padding-top: 2rem; } | |
| 132 | ||
| 133 | /* ============================================================ | |
| 134 | KOI HR | |
| 135 | ============================================================ */ | |
| 101 | 136 | hr { |
| 102 | 137 | border: none; |
| 103 | height: 2rem; | |
| 138 | height: 2.5rem; | |
| 104 | 139 | position: relative; |
| 105 | 140 | display: flex; |
| 106 | 141 | align-items: center; |
| @@ -109,52 +144,432 @@ hr { | ||
| 109 | 144 | background-repeat: no-repeat; |
| 110 | 145 | background-position: center; |
| 111 | 146 | background-size: auto 100%; |
| 147 | margin: 3rem 0; | |
| 112 | 148 | } |
| 113 | ||
| 114 | hr::before, | |
| 115 | hr::after { | |
| 149 | hr::before, hr::after { | |
| 116 | 150 | content: ''; |
| 117 | 151 | position: absolute; |
| 118 | 152 | top: 50%; |
| 119 | 153 | transform: translateY(-50%); |
| 120 | width: calc(50% - 1.75rem); | |
| 154 | width: calc(50% - 2rem); | |
| 121 | 155 | height: 1px; |
| 122 | background: var(--fg); | |
| 156 | background: var(--border-soft); | |
| 123 | 157 | } |
| 124 | ||
| 125 | 158 | hr::before { left: 0; } |
| 126 | 159 | hr::after { right: 0; } |
| 127 | 160 | |
| 128 | /* --- Footnote Alignment --- */ | |
| 129 | .footdef { | |
| 130 | display: flex; | |
| 131 | align-items: flex-start; /* Keeps number at the top if text wraps */ | |
| 132 | gap: 1rem; /* Space between number and text */ | |
| 133 | margin-bottom: 0.5rem; | |
| 161 | /* ============================================================ | |
| 162 | FOOTER | |
| 163 | ============================================================ */ | |
| 164 | footer { | |
| 165 | font-size: var(--text-xs); | |
| 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 | } | |
| 173 | footer a { color: var(--meta); text-decoration: none; transition: color 0.1s; } | |
| 174 | footer a:hover { color: var(--fg); background: none; } | |
| 175 | ||
| 176 | /* ============================================================ | |
| 177 | TYPOGRAPHY | |
| 178 | ============================================================ */ | |
| 179 | h1, 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) */ | |
| 187 | h1 { | |
| 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 | ||
| 202 | h2 { | |
| 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 | } | |
| 209 | h3 { font-size: 1.05rem; margin-top: 2rem; margin-bottom: 0.3rem; } | |
| 210 | ||
| 211 | p { margin-bottom: 1.2rem; } | |
| 212 | ||
| 213 | /* Accent ONLY on links and h2 bar — nowhere else */ | |
| 214 | a { | |
| 215 | color: var(--accent); | |
| 216 | text-decoration: underline; | |
| 217 | text-underline-offset: 3px; | |
| 218 | transition: background 0.1s, color 0.1s; | |
| 219 | } | |
| 220 | a: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 | ============================================================ */ | |
| 441 | pre { | |
| 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 | } | |
| 450 | code { | |
| 451 | font-family: var(--font-mono); | |
| 452 | background: var(--code-bg); | |
| 453 | padding: 0.15rem 0.4rem; | |
| 454 | font-size: 0.875em; | |
| 455 | } | |
| 456 | pre code { background: none; padding: 0; font-size: inherit; } | |
| 457 | ||
| 458 | /* ============================================================ | |
| 459 | BLOCKQUOTE — intentional Org-mode delimiters | |
| 460 | ============================================================ */ | |
| 461 | blockquote { | |
| 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 | } | |
| 468 | blockquote p:last-child { margin-bottom: 0; } | |
| 469 | blockquote p { margin: 0; } | |
| 470 | blockquote::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 | } | |
| 480 | blockquote::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 */ | |
| 137 | .footpara { | |
| 138 | margin: 0; | |
| 139 | flex: 1; | |
| 140 | display: flex; | |
| 141 | flex-direction: column; | |
| 142 | gap: 0.5rem; | |
| 491 | /* ============================================================ | |
| 492 | TABLES | |
| 493 | ============================================================ */ | |
| 494 | table { width: 100%; border-collapse: collapse; margin: 2rem 0; } | |
| 495 | th, td { | |
| 496 | border-bottom: 1px solid var(--border-soft); | |
| 497 | padding: 0.65rem 0.75rem; | |
| 498 | text-align: left; | |
| 499 | font-size: var(--text-sm); | |
| 500 | } | |
| 501 | th { | |
| 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 | } |
| 508 | tr:last-child td { border-bottom: none; } | |
| 144 | 509 | |
| 145 | /* -- Garden -- */ | |
| 510 | /* ============================================================ | |
| 511 | IMAGES | |
| 512 | ============================================================ */ | |
| 513 | img { | |
| 514 | max-width: 100%; | |
| 515 | height: auto; | |
| 516 | filter: grayscale(1); | |
| 517 | transition: filter 0.25s; | |
| 518 | display: block; | |
| 519 | margin: 2rem 0; | |
| 520 | } | |
| 521 | img: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 | 528 | .footnum { |
| 149 | font-weight: bold; | |
| 150 | min-width: 1.5rem; | |
| 151 | text-align: right; | |
| 152 | text-decoration: none; | |
| 153 | font-size: 0.85rem; | |
| 154 | color: var(--accent); | |
| 529 | font-weight: 700; | |
| 530 | min-width: 1.5rem; | |
| 531 | text-align: right; | |
| 532 | text-decoration: none; | |
| 533 | font-size: var(--text-xs); | |
| 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) { | |
| 158 | body { padding: 1rem; } | |
| 159 | .post { flex-direction: column; align-items: flex-start; } | |
| 573 | @media (max-width: 480px) { | |
| 574 | .masthead nav li { width: 100%; } | |
| 160 | 575 | } |
theme/static/tokens.css +36 −41
| @@ -1,56 +1,51 @@ | ||
| 1 | 1 | /* ============================================================================= |
| 2 | 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 | 4 | :root { |
| 8 | 5 | color-scheme: light dark; |
| 9 | 6 | |
| 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 */ | |
| 7 | /* Light */ | |
| 8 | --bg: #ffffff; | |
| 9 | --bg-soft: #f5f5f5; | |
| 10 | --fg: #0a0a0a; | |
| 11 | --fg-soft: #444444; | |
| 12 | --accent: #c0392b; | |
| 13 | --border: #0a0a0a; | |
| 14 | --border-soft: #dedede; | |
| 15 | --code-bg: #f3f3f3; | |
| 16 | --meta: #999999; | |
| 21 | 17 | |
| 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; | |
| 18 | /* Fonts */ | |
| 19 | --font-serif: Georgia, 'Times New Roman', serif; | |
| 20 | --font-sans: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; | |
| 21 | --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace; | |
| 29 | 22 | |
| 30 | /* --- Layout --- */ | |
| 31 | --max-width: 800px; | |
| 32 | --space-xs: 0.5rem; | |
| 33 | --space-sm: 1rem; | |
| 34 | --space-md: 2rem; | |
| 35 | --space-lg: 4rem; | |
| 23 | /* Type scale */ | |
| 24 | --text-display: clamp(4rem, 8vw, 6.5rem); | |
| 25 | --text-h1: clamp(2.2rem, 4vw, 3rem); | |
| 26 | --text-h2: 1.2rem; | |
| 27 | --text-body: 1.0625rem; | |
| 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 --- */ | |
| 38 | --border-width-hard: 3px; /* Tables, skip-link */ | |
| 39 | --border-width-nav: 4px; /* Nav underline */ | |
| 40 | --border-width-h2: 10px; /* h2 left accent bar */ | |
| 33 | /* Layout */ | |
| 34 | --outer-w: 1000px; | |
| 35 | --prose-w: 720px; | |
| 36 | --pad: clamp(1.25rem, 4vw, 2.5rem); | |
| 41 | 37 | } |
| 42 | 38 | |
| 43 | 39 | @media (prefers-color-scheme: dark) { |
| 44 | 40 | :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; | |
| 41 | --bg: #080808; | |
| 42 | --bg-soft: #111111; | |
| 43 | --fg: #eeebe6; | |
| 44 | --fg-soft: #aaa8a3; | |
| 45 | --accent: #e05a48; | |
| 46 | --border: #eeebe6; | |
| 47 | --border-soft: #1e1e1e; | |
| 48 | --code-bg: #0d0d0d; | |
| 49 | --meta: #555555; | |
| 55 | 50 | } |
| 56 | 51 | } |