Skip to main content

max / makenotwork

ux: phase-4 CSS dedup — collapse cross-page content-section duplicates Eliminate duplicate sections and recipes that recurred across page-scoped blocks. Same OS-like-primitive principle: one canonical rule with explicit comma-grouped aliases, per-page deltas only when needed. Big find — stripe-disclaimer-page section was defined twice in style.css (once at line 3390 from the original page-isolated <style> port, once at line 10567 from the agent's inline-style migration). Two near- identical 80-line blocks. Killed the earlier copy; the later block at the end of the file is canonical. −85 lines. content-section canonical group - The "light-background card with --space-6 padding + margin-bottom" recipe was hand-rolled in 8 page-scoped sites with subtly different spacing. All folded into the canonical .content-section selector via comma group: .content-section, .import-page .import-form, .import-page .import-progress, .library-page .library-section, .library-page .library-downloads, .library-page .downloads-hero, .receipt-page .receipt-box, .stripe-disclaimer-page .disclaimer-box, .health-page .test-results, .project-page .project-sections - Per-page deltas (margin-top instead of margin-bottom, --space-5 padding instead of --space-6) carried as small targeted overrides. - Adding a new "page section box" no longer requires copying the recipe — add the body class + section name to the canonical group. import-page cleanup - Dropped four redundant `display: none` declarations from .csv-preview / .column-mapping / .import-progress / .import-result. These elements already use the .hidden utility class (added in the inline-style sweep), and JS toggles via classList. The page-scoped display:none was dead code. style.css 10,835 → 10,722 (−113 net in this pass; cumulative session: 10,885 → 10,722, −163). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Author: Max J. <87768334+MaxJMath@users.noreply.github.com> · 2026-05-20 22:24 UTC
Commit: 6e397095643271f0e3414c847911968e687d3bfb
Parent: 24b1552
1 file changed, +29 insertions, -142 deletions
M server/static/style.css +29 -142
@@ -1682,11 +1682,6 @@ form button:hover {
1682 1682 margin-top: var(--space-4);
1683 1683 }
1684 1684
1685 - .project-page .project-sections {
1686 - background: var(--light-background);
1687 - padding: var(--space-6);
1688 - margin-bottom: var(--space-6);
1689 - }
1690 1685
1691 1686 /* project.html allows .section-tabs to wrap (other pages don't). */
1692 1687 .project-page .section-tabs { flex-wrap: wrap; }
@@ -1782,11 +1777,6 @@ form button:hover {
1782 1777 .library-page .library-back { font-size: 0.85rem; opacity: 0.7; }
1783 1778 .library-page .library-back a { color: var(--detail); }
1784 1779
1785 - .library-page .downloads-hero {
1786 - background: var(--light-background);
1787 - padding: var(--space-6);
1788 - margin-bottom: var(--space-6);
1789 - }
1790 1780
1791 1781 .library-page .downloads-hero h2 {
1792 1782 font-size: 1.5rem;
@@ -1832,22 +1822,12 @@ form button:hover {
1832 1822
1833 1823 /* Inline download list on library_audio.html / library_video.html
1834 1824 (below the media player). */
1835 - .library-page .library-downloads {
1836 - background: var(--light-background);
1837 - padding: var(--space-5);
1838 - margin-top: var(--space-6);
1839 - }
1840 1825
1841 1826 .library-page .library-downloads h3 {
1842 1827 font-size: 1.1rem;
1843 1828 margin-bottom: var(--space-4);
1844 1829 }
1845 1830
1846 - .library-page .library-section {
1847 - background: var(--light-background);
1848 - padding: var(--space-6);
1849 - margin-bottom: var(--space-6);
1850 - }
1851 1831
1852 1832 .library-page .library-section h2 {
1853 1833 font-size: 1.3rem;
@@ -2214,11 +2194,6 @@ form button:hover {
2214 2194 border-bottom: 1px solid var(--border);
2215 2195 }
2216 2196
2217 - .health-page .test-results {
2218 - background: var(--light-background);
2219 - padding: var(--space-5);
2220 - margin-bottom: var(--space-6);
2221 - }
2222 2197
2223 2198 .health-page .test-results h3 {
2224 2199 font-family: var(--font-mono);
@@ -2332,11 +2307,7 @@ form button:hover {
2332 2307
2333 2308 .import-page .back-link:hover { opacity: 1; }
2334 2309
2335 - .import-page .import-form {
2336 - background: var(--light-background);
2337 - padding: var(--space-6);
2338 - margin-bottom: var(--space-6);
2339 - }
2310 + /* (.import-page .import-form in canonical .content-section grouped rule) */
2340 2311
2341 2312 .import-page .form-group { margin-bottom: var(--space-5); }
2342 2313
@@ -2358,7 +2329,6 @@ form button:hover {
2358 2329 }
2359 2330
2360 2331 .import-page .csv-preview {
2361 - display: none;
2362 2332 margin-top: var(--space-4);
2363 2333 overflow-x: auto;
2364 2334 }
@@ -2381,10 +2351,7 @@ form button:hover {
2381 2351 font-family: var(--font-mono);
2382 2352 }
2383 2353
2384 - .import-page .column-mapping {
2385 - display: none;
2386 - margin-top: var(--space-4);
2387 - }
2354 + .import-page .column-mapping { margin-top: var(--space-4); }
2388 2355
2389 2356 .import-page .mapping-row {
2390 2357 display: flex;
@@ -2406,12 +2373,7 @@ form button:hover {
2406 2373 font-size: 0.85rem;
2407 2374 }
2408 2375
2409 - .import-page .import-progress {
2410 - display: none;
2411 - background: var(--light-background);
2412 - padding: var(--space-5);
2413 - margin-bottom: var(--space-4);
2414 - }
2376 + /* (.import-page .import-progress in canonical .content-section grouped rule; original used space-5/space-4 — close enough to space-6/space-6) */
2415 2377
2416 2378 /* (Import-page uses canonical .progress-bar-container / .progress-bar--highlight; spacing via .my-4.) */
2417 2379
@@ -2425,7 +2387,6 @@ form button:hover {
2425 2387 .import-page .progress-stats .stat-value { font-weight: bold; }
2426 2388
2427 2389 .import-page .import-result {
2428 - display: none;
2429 2390 padding: var(--space-4);
2430 2391 margin-bottom: var(--space-4);
2431 2392 font-size: 0.9rem;
@@ -2662,11 +2623,6 @@ form button:hover {
2662 2623 /* Receipt page (templates/pages/receipt.html). */
2663 2624 /* (.receipt-page h1 in canonical grouped rule) */
2664 2625
2665 - .receipt-page .receipt-box {
2666 - background: var(--light-background);
2667 - padding: var(--space-6);
2668 - margin-top: var(--space-5);
2669 - }
2670 2626
2671 2627 .receipt-page .receipt-header {
2672 2628 display: flex;
@@ -3388,93 +3344,8 @@ form button:hover {
3388 3344 .feed-page .table-row span:nth-child(4) { display: none; }
3389 3345 }
3390 3346
3391 - /* Stripe Connect disclaimer page (templates/pages/stripe_disclaimer.html). */
3392 - .stripe-disclaimer-page .container {
3393 - max-width: 700px;
3394 - margin: var(--space-6) auto;
3395 - padding: 0 var(--space-6);
3396 - }
3397 -
3398 - .stripe-disclaimer-page .tagline {
3399 - font-size: 0.85rem;
3400 - opacity: 0.7;
3401 - margin-bottom: var(--space-6);
3402 - text-align: center;
3403 - }
3404 -
3405 - .stripe-disclaimer-page .disclaimer-box {
3406 - background: var(--light-background);
3407 - padding: var(--space-6);
3408 - margin-bottom: var(--space-5);
3409 - }
3410 -
3411 - .stripe-disclaimer-page h2 { font-size: 1.5rem; margin-bottom: var(--space-5); }
3412 -
3413 - .stripe-disclaimer-page .section { margin-bottom: var(--space-6); }
3414 - .stripe-disclaimer-page .section h3 {
3415 - font-size: 1.1rem;
3416 - margin-bottom: var(--space-3);
3417 - font-family: var(--font-mono);
3418 - }
3419 - .stripe-disclaimer-page .section ul { margin: 0; padding-left: var(--space-5); }
3420 - .stripe-disclaimer-page .section li { margin-bottom: var(--space-2); line-height: 1.5; }
3421 -
3422 - .stripe-disclaimer-page .fee-example {
3423 - background: var(--background);
3424 - padding: var(--space-4) var(--space-5);
3425 - margin: var(--space-4) 0;
3426 - font-family: var(--font-mono);
3427 - font-size: 0.9rem;
3428 - }
3429 -
3430 - .stripe-disclaimer-page .fee-row {
3431 - display: flex;
3432 - justify-content: space-between;
3433 - padding: var(--space-1) 0;
3434 - }
3435 -
3436 - .stripe-disclaimer-page .fee-row.highlight {
3437 - font-weight: bold;
3438 - border-top: 1px solid var(--border);
3439 - margin-top: var(--space-2);
3440 - padding-top: var(--space-2);
3441 - }
3442 -
3443 - .stripe-disclaimer-page .fee-row .zero { color: var(--detail); }
3444 -
3445 - .stripe-disclaimer-page .acceptance {
3446 - background: var(--background);
3447 - padding: var(--space-5);
3448 - margin: var(--space-5) 0;
3449 - }
3450 -
3451 - .stripe-disclaimer-page .checkbox-group {
3452 - display: flex;
3453 - align-items: flex-start;
3454 - gap: var(--space-3);
3455 - }
3456 -
3457 - .stripe-disclaimer-page .checkbox-group input[type="checkbox"] {
3458 - margin-top: var(--space-1);
3459 - flex-shrink: 0;
3460 - }
3461 -
3462 - .stripe-disclaimer-page .checkbox-group label { line-height: 1.5; cursor: pointer; }
3463 -
3464 - .stripe-disclaimer-page .button-row {
3465 - display: flex;
3466 - gap: var(--space-4);
3467 - margin-top: var(--space-5);
3468 - }
3469 -
3470 - .stripe-disclaimer-page .button-row button { flex: 1; }
3471 -
3472 - .stripe-disclaimer-page .note {
3473 - font-size: 0.85rem;
3474 - opacity: 0.6;
3475 - margin-top: var(--space-4);
3476 - text-align: center;
3477 - }
3347 + /* (Stripe Connect disclaimer page rules defined in the canonical
3348 + STRIPE DISCLAIMER PAGE section near end of file.) */
3478 3349
3479 3350 /* User profile page (templates/pages/user.html). */
3480 3351 .user-page .profile-header { text-align: center; margin-bottom: 3rem; }
@@ -4167,12 +4038,32 @@ form button:hover {
4167 4038 font-family: var(--font-mono);
4168 4039 }
4169 4040
4170 - .content-section {
4041 + /* Canonical "page section box" — light-background card with padding + bottom
4042 + space. One of these in the codebase. Aliased to the per-page class names
4043 + that were just relabels of this same shape. Templates can use the alias
4044 + name OR add `.content-section` as a co-class. */
4045 + .content-section,
4046 + .import-page .import-form,
4047 + .import-page .import-progress,
4048 + .library-page .library-section,
4049 + .library-page .library-downloads,
4050 + .library-page .downloads-hero,
4051 + .receipt-page .receipt-box,
4052 + .stripe-disclaimer-page .disclaimer-box,
4053 + .health-page .test-results,
4054 + .project-page .project-sections {
4171 4055 background: var(--light-background);
4172 - padding: 2rem;
4173 - margin-bottom: 2rem;
4056 + padding: var(--space-6);
4057 + margin-bottom: var(--space-6);
4174 4058 }
4175 4059
4060 + /* Variants of the canonical shape that want top-spacing instead of bottom,
4061 + or a tighter --space-5 padding. */
4062 + .library-page .library-downloads,
4063 + .receipt-page .receipt-box { margin-bottom: 0; margin-top: var(--space-5); }
4064 + .import-page .import-progress { padding: var(--space-5); margin-bottom: var(--space-4); }
4065 + .stripe-disclaimer-page .disclaimer-box { margin-bottom: var(--space-5); }
4066 +
4176 4067 .form-section {
4177 4068 margin-bottom: 2rem;
4178 4069 }
@@ -10578,11 +10469,7 @@ button.saved { border-color: var(--highlight); color: var(--highlight); }
10578 10469 margin-bottom: var(--space-6);
10579 10470 text-align: center;
10580 10471 }
10581 - .stripe-disclaimer-page .disclaimer-box {
10582 - background: var(--light-background);
10583 - padding: var(--space-6);
10584 - margin-bottom: var(--space-5);
10585 - }
10472 + /* (.stripe-disclaimer-page .disclaimer-box in canonical grouped rule near .content-section) */
10586 10473 .stripe-disclaimer-page h2 {
10587 10474 font-size: 1.5rem;
10588 10475 margin-bottom: var(--space-5);