Skip to main content

max / makenotwork

Put the wizard and media player sheets on the type scale
Author: Max Johnson <me@maxj.phd> · 2026-08-02 21:17 UTC
Signed with PGP, not checked
Commit: 83b1c4b7202232ac54b1b62743dc9f2b6eb3e420
Parent: 8859ac7
2 files changed, +40 insertions, -40 deletions
M server/static/media-player.css +17 -17
@@ -24,7 +24,7 @@
24 24 align-items: center;
25 25 justify-content: center;
26 26 font-family: var(--font-heading);
27 - font-size: 1.25rem;
27 + font-size: var(--text-subhead);
28 28 color: var(--detail);
29 29 }
30 30
@@ -34,7 +34,7 @@
34 34
35 35 .author-name {
36 36 font-family: var(--font-mono);
37 - font-size: 1rem;
37 + font-size: var(--text-body);
38 38 color: var(--detail);
39 39 }
40 40
@@ -49,14 +49,14 @@
49 49
50 50 .media-meta {
51 51 font-family: var(--font-mono);
52 - font-size: 0.875rem;
52 + font-size: var(--text-note);
53 53 color: var(--text-muted);
54 54 }
55 55
56 56 /* Title */
57 57 .media-title {
58 58 font-family: var(--font-heading);
59 - font-size: 2.5rem;
59 + font-size: var(--text-display);
60 60 font-weight: normal;
61 61 line-height: 1.2;
62 62 margin-bottom: var(--gap-section);
@@ -67,7 +67,7 @@
67 67 /* Series name */
68 68 .media-series {
69 69 font-family: var(--font-mono);
70 - font-size: 0.9375rem;
70 + font-size: var(--text-note);
71 71 color: var(--text-muted);
72 72 margin-bottom: var(--gap-page);
73 73 }
@@ -143,7 +143,7 @@
143 143 display: flex;
144 144 align-items: center;
145 145 justify-content: center;
146 - font-size: 1.5rem;
146 + font-size: var(--text-head);
147 147 transition: opacity 0.2s ease;
148 148 flex-shrink: 0;
149 149 }
@@ -178,7 +178,7 @@
178 178 display: flex;
179 179 justify-content: space-between;
180 180 font-family: var(--font-mono);
181 - font-size: 0.8125rem;
181 + font-size: var(--text-fine);
182 182 color: var(--text-muted);
183 183 }
184 184
@@ -192,7 +192,7 @@
192 192
193 193 .speed-control {
194 194 font-family: var(--font-mono);
195 - font-size: 0.875rem;
195 + font-size: var(--text-note);
196 196 display: flex;
197 197 align-items: center;
198 198 gap: var(--gap-peer);
@@ -203,7 +203,7 @@
203 203 border: none;
204 204 padding: var(--gap-peer) var(--gap-section);
205 205 font-family: var(--font-mono);
206 - font-size: 0.8125rem;
206 + font-size: var(--text-fine);
207 207 cursor: pointer;
208 208 color: var(--detail);
209 209 }
@@ -257,7 +257,7 @@
257 257 /* Description */
258 258 .media-description {
259 259 font-family: var(--font-body);
260 - font-size: 1.125rem;
260 + font-size: var(--text-lead);
261 261 line-height: 1.9;
262 262 margin-bottom: var(--gap-page);
263 263 }
@@ -275,7 +275,7 @@
275 275
276 276 .chapters h3 {
277 277 font-family: var(--font-mono);
278 - font-size: 1rem;
278 + font-size: var(--text-body);
279 279 font-weight: normal;
280 280 margin-bottom: var(--gap-section);
281 281 color: var(--detail);
@@ -314,7 +314,7 @@
314 314
315 315 .chapter-time {
316 316 font-family: var(--font-mono);
317 - font-size: 0.875rem;
317 + font-size: var(--text-note);
318 318 color: var(--text-muted);
319 319 }
320 320
@@ -333,7 +333,7 @@
333 333 background: var(--surface-muted);
334 334 color: var(--detail);
335 335 padding: var(--gap-peer) var(--gap-section);
336 - font-size: 0.8125rem;
336 + font-size: var(--text-fine);
337 337 }
338 338
339 339 /* Footer */
@@ -341,7 +341,7 @@
341 341 font-family: var(--font-mono);
342 342 text-align: center;
343 343 padding: var(--gap-page);
344 - font-size: 0.875rem;
344 + font-size: var(--text-note);
345 345 color: var(--text-muted);
346 346 border-top: 1px solid var(--border);
347 347 }
@@ -363,7 +363,7 @@
363 363 /* Skip button for insertion segments */
364 364 .skip-insertion {
365 365 font-family: var(--font-mono);
366 - font-size: 0.8125rem;
366 + font-size: var(--text-fine);
367 367 background: var(--surface-muted);
368 368 border: 1px solid var(--border);
369 369 padding: var(--gap-peer) var(--gap-section);
@@ -380,7 +380,7 @@
380 380 /* Insertion label shown during playback */
381 381 .insertion-label {
382 382 font-family: var(--font-mono);
383 - font-size: 0.8125rem;
383 + font-size: var(--text-fine);
384 384 color: var(--text-muted);
385 385 font-style: italic;
386 386 display: none;
@@ -390,7 +390,7 @@
390 390 /* Responsive */
391 391 @media (max-width: 600px) {
392 392 .media-title {
393 - font-size: 2rem;
393 + font-size: var(--text-title);
394 394 }
395 395
396 396 .cover-art {
M server/static/wizard.css +23 -23
@@ -16,7 +16,7 @@
16 16
17 17 .wizard-sidebar h2 {
18 18 font-family: var(--font-heading); font-weight: bold;
19 - font-size: 1.3rem;
19 + font-size: var(--text-subhead);
20 20 margin-bottom: var(--gap-pane);
21 21 }
22 22
@@ -38,7 +38,7 @@
38 38 align-items: center;
39 39 gap: var(--gap-group);
40 40 padding: var(--gap-peer) 0;
41 - font-size: 0.9rem;
41 + font-size: var(--text-note);
42 42 color: var(--text-muted);
43 43 position: relative;
44 44 }
@@ -64,7 +64,7 @@
64 64 width: 24px;
65 65 height: 24px;
66 66 border-radius: 50%;
67 - font-size: 0.75rem;
67 + font-size: var(--text-fine);
68 68 font-weight: bold;
69 69 flex-shrink: 0;
70 70 border: 2px solid var(--border);
@@ -102,13 +102,13 @@
102 102
103 103 .wizard-step h2 {
104 104 font-family: var(--font-heading); font-weight: bold;
105 - font-size: 1.6rem;
105 + font-size: var(--text-head);
106 106 margin-bottom: var(--gap-bound);
107 107 }
108 108
109 109 .step-description {
110 110 color: var(--text-muted);
111 - font-size: 0.9rem;
111 + font-size: var(--text-note);
112 112 margin-bottom: var(--gap-pane);
113 113 }
114 114
@@ -173,7 +173,7 @@
173 173 .suggestion-item {
174 174 padding: var(--gap-peer) var(--gap-section);
175 175 cursor: pointer;
176 - font-size: 0.9rem;
176 + font-size: var(--text-note);
177 177 }
178 178
179 179 .suggestion-item:hover {
@@ -194,7 +194,7 @@
194 194 display: flex;
195 195 justify-content: space-between;
196 196 padding: var(--gap-peer) 0;
197 - font-size: 0.9rem;
197 + font-size: var(--text-note);
198 198 border-bottom: 1px solid var(--border);
199 199 }
200 200
@@ -240,7 +240,7 @@
240 240 display: flex;
241 241 padding: var(--gap-group) 0;
242 242 border-bottom: 1px solid var(--border);
243 - font-size: 0.9rem;
243 + font-size: var(--text-note);
244 244 }
245 245
246 246 .preview-row.indent {
@@ -266,7 +266,7 @@
266 266
267 267 .preview-checklist h3 {
268 268 font-family: var(--font-mono);
269 - font-size: 0.95rem;
269 + font-size: var(--text-body);
270 270 margin-bottom: var(--gap-peer);
271 271 }
272 272
@@ -280,14 +280,14 @@
280 280 padding: var(--gap-bound) 0;
281 281 padding-left: var(--gap-page);
282 282 position: relative;
283 - font-size: 0.9rem;
283 + font-size: var(--text-note);
284 284 }
285 285
286 286 .preview-checklist li::before {
287 287 position: absolute;
288 288 left: 0;
289 289 font-family: var(--font-mono);
290 - font-size: 0.75rem;
290 + font-size: var(--text-fine);
291 291 text-transform: uppercase;
292 292 letter-spacing: 0.04em;
293 293 line-height: 1.6;
@@ -361,7 +361,7 @@
361 361 }
362 362
363 363 .upload-progress-inline {
364 - font-size: 0.85rem;
364 + font-size: var(--text-note);
365 365 display: flex;
366 366 flex-wrap: wrap;
367 367 align-items: center;
@@ -383,7 +383,7 @@
383 383 }
384 384
385 385 .upload-error-inline {
386 - font-size: 0.85rem;
386 + font-size: var(--text-note);
387 387 color: var(--danger, #c0392b);
388 388 padding: var(--gap-peer) var(--gap-section);
389 389 background: rgba(192, 57, 43, 0.08);
@@ -422,7 +422,7 @@
422 422 align-items: center;
423 423 justify-content: center;
424 424 height: 100%;
425 - font-size: 0.75rem;
425 + font-size: var(--text-fine);
426 426 color: var(--text-muted);
427 427 }
428 428
@@ -437,7 +437,7 @@
437 437
438 438 .distribution-section h3 {
439 439 font-family: var(--font-mono);
440 - font-size: 0.95rem;
440 + font-size: var(--text-body);
441 441 margin-bottom: var(--gap-peer);
442 442 }
443 443
@@ -446,14 +446,14 @@
446 446 align-items: center;
447 447 gap: var(--gap-peer);
448 448 cursor: pointer;
449 - font-size: 0.9rem;
449 + font-size: var(--text-note);
450 450 }
451 451
452 452 /* Monospace input for text editor */
453 453
454 454 .monospace-input {
455 455 font-family: var(--font-mono);
456 - font-size: 0.85rem;
456 + font-size: var(--text-note);
457 457 line-height: 1.6;
458 458 }
459 459
@@ -470,7 +470,7 @@
470 470 background: var(--surface-alt);
471 471 padding: var(--gap-section);
472 472 border-radius: 4px;
473 - font-size: 0.9rem;
473 + font-size: var(--text-note);
474 474 }
475 475
476 476 /* Responsive */
@@ -493,7 +493,7 @@
493 493 .wizard-step-indicator {
494 494 flex-direction: column;
495 495 gap: var(--gap-bound);
496 - font-size: 0.75rem;
496 + font-size: var(--text-fine);
497 497 min-width: 0;
498 498 }
499 499
@@ -546,7 +546,7 @@
546 546
547 547 /* "Checking..." style spinner shown next to async-validated inputs. */
548 548 .wizard-field-spinner {
549 - font-size: 0.85rem;
549 + font-size: var(--text-note);
550 550 }
551 551
552 552 /* Spacing helpers for hints that sit just above a control group. */
@@ -611,13 +611,13 @@
611 611 }
612 612
613 613 .stripe-connect-note {
614 - font-size: 0.8rem;
614 + font-size: var(--text-fine);
615 615 opacity: 0.5;
616 616 margin-top: var(--gap-section);
617 617 }
618 618
619 619 .stripe-connect-note-secondary {
620 - font-size: 0.8rem;
620 + font-size: var(--text-fine);
621 621 opacity: 0.7;
622 622 margin-top: var(--gap-peer);
623 623 }
@@ -630,7 +630,7 @@
630 630 .benefit-item {
631 631 padding: var(--gap-peer) 0 var(--gap-peer) var(--gap-pane);
632 632 position: relative;
633 - font-size: 0.9rem;
633 + font-size: var(--text-note);
634 634 }
635 635
636 636 .benefit-item::before {