Skip to main content

max / goingson

Extend the spacing scale to the sizes the app actually uses The three off-scale paddings were not three accidents, they were the top of the scale being wrong. Measuring every rem in a gap, padding or margin outside the print block: 2rem appears 12 times and 3rem twice, both for a consistent purpose (empty and error states, page shells, the dashboard gutter, focus-overlay chrome). Those are scale steps that were never declared, so every consumer hardcoded them. --space-7 at 2rem and --space-8 at 3rem, and the tail is coarser than the head on purpose: steps 1 to 6 climb by 0.25rem because that is the granularity UI density needs, while above 1.5rem the values are layout gutters where a 4px distinction is noise. 15 declarations converted, 16 large literals gone, and no gap, padding or margin above --space-5 is a literal any more. Two values had one site each and snap into the new steps. .main-content's 1.75rem side padding becomes 2rem, which is 4px wider on every screen. The four main views' 2.5rem bottom clearance becomes 3rem: rounding up rather than down, since that padding exists to stop content butting against the viewport and losing 8px of it is the failure direction.
Co-Authored-By
Claude Opus 5 (1M context) <noreply@anthropic.com>
Author: Max Johnson <me@maxj.phd> · 2026-07-27 00:55 UTC
Signed with PGP, not checked
Commit: 7744e1147eefe38d2a990f6aaadde60b5f9e509d
Parent: 0ee63d2
1 file changed, +21 insertions, -15 deletions
@@ -318,6 +318,12 @@
318 318 --space-4: 1rem;
319 319 --space-5: 1.25rem;
320 320 --space-6: 1.5rem;
321 + /* The tail is coarser on purpose. Steps 1 to 6 climb by 0.25rem because
322 + that is the granularity UI density needs; above 1.5rem the values are
323 + layout gutters and page shells, where a 4px distinction is noise.
324 + 1.75rem and 2.5rem each had a single site and snap into this. */
325 + --space-7: 2rem;
326 + --space-8: 3rem;
321 327
322 328 --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
323 329 --font-serif: Georgia, 'Times New Roman', serif;
@@ -566,7 +572,7 @@
566 572 max-width: var(--width-container);
567 573 width: 100%;
568 574 margin: 0 auto;
569 - padding: var(--space-6) 1.75rem 2rem;
575 + padding: var(--space-6) var(--space-7) var(--space-7);
570 576 }
571 577
572 578 /* Page Header */
@@ -1404,7 +1410,7 @@
1404 1410
1405 1411 .no-upcoming-events {
1406 1412 text-align: center;
1407 - padding: 2rem;
1413 + padding: var(--space-7);
1408 1414 color: var(--content-secondary);
1409 1415 font-style: italic;
1410 1416 }
@@ -3241,17 +3247,17 @@
3241 3247 /* 22. Empty & Error States */
3242 3248 .empty-state {
3243 3249 text-align: center;
3244 - padding: 3rem;
3250 + padding: var(--space-8);
3245 3251 color: var(--content-secondary);
3246 3252 }
3247 3253
3248 3254 .empty-state--compact {
3249 - padding: 2rem 1rem;
3255 + padding: var(--space-7) var(--space-4);
3250 3256 font-size: var(--font-size-sm);
3251 3257 }
3252 3258
3253 3259 .empty-state--dashboard {
3254 - padding: 2rem 1rem;
3260 + padding: var(--space-7) var(--space-4);
3255 3261 }
3256 3262
3257 3263 .empty-state--error {
@@ -3292,7 +3298,7 @@
3292 3298
3293 3299 .error-state {
3294 3300 text-align: center;
3295 - padding: 2rem;
3301 + padding: var(--space-7);
3296 3302 color: var(--danger);
3297 3303 background: color-mix(in srgb, var(--danger) 10%, var(--surface-raised));
3298 3304 border: var(--border-width-sm) solid var(--danger);
@@ -3397,7 +3403,7 @@
3397 3403 }
3398 3404
3399 3405 .ui-mode-desktop .project-dashboard-grid {
3400 - gap: 2rem;
3406 + gap: var(--space-7);
3401 3407 }
3402 3408
3403 3409 .ui-mode-desktop .day-plan-sidebar {
@@ -4374,7 +4380,7 @@
4374 4380
4375 4381 .timeline-scroll-area {
4376 4382 position: relative;
4377 - padding: 0.5rem 1rem 3rem 0.5rem;
4383 + padding: var(--space-2) var(--space-4) var(--space-8) var(--space-2);
4378 4384 min-height: min-content;
4379 4385 }
4380 4386
@@ -4600,7 +4606,7 @@
4600 4606 .empty-unscheduled {
4601 4607 text-align: center;
4602 4608 color: var(--content-secondary);
4603 - padding: 2rem 1rem;
4609 + padding: var(--space-7) var(--space-4);
4604 4610 }
4605 4611
4606 4612 /* 41. Settings */
@@ -4716,7 +4722,7 @@
4716 4722
4717 4723 .settings-content {
4718 4724 flex: 1;
4719 - padding: var(--space-6) 2rem;
4725 + padding: var(--space-6) var(--space-7);
4720 4726 max-width: 640px;
4721 4727 overflow-y: auto;
4722 4728 }
@@ -5114,7 +5120,7 @@
5114 5120 #events-view,
5115 5121 #projects-view,
5116 5122 #emails-view {
5117 - padding-bottom: 2.5rem;
5123 + padding-bottom: var(--space-8);
5118 5124 }
5119 5125
5120 5126 /* Task view fills available height */
@@ -6990,7 +6996,7 @@
6990 6996
6991 6997 .import-empty,
6992 6998 .import-error {
6993 - padding: 2rem;
6999 + padding: var(--space-7);
6994 7000 text-align: center;
6995 7001 color: var(--content-muted);
6996 7002 }
@@ -8526,14 +8532,14 @@
8526 8532 text-align: center;
8527 8533 max-width: 400px;
8528 8534 width: 100%;
8529 - padding: 2rem;
8535 + padding: var(--space-7);
8530 8536 }
8531 8537
8532 8538 .focus-header {
8533 8539 display: flex;
8534 8540 align-items: center;
8535 8541 justify-content: space-between;
8536 - margin-bottom: 2rem;
8542 + margin-bottom: var(--space-7);
8537 8543 }
8538 8544
8539 8545 .focus-label {
@@ -8578,7 +8584,7 @@
8578 8584
8579 8585 .focus-task-name {
8580 8586 color: var(--content-secondary);
8581 - margin-bottom: 2rem;
8587 + margin-bottom: var(--space-7);
8582 8588 font-size: 0.9rem;
8583 8589 }
8584 8590