Skip to main content

max / makenotwork

Give style.css's catch-all section real headers, and collapse the 680px measure Two separate cleanups in one sheet. INFO & WARNING BOXES was a 1772-line section holding fifteen unrelated page layouts. It is now NOTIFICATION SURFACES, covering only the components its name describes, and the fourteen page-scoped layouts that had drifted in behind it carry their own headers. A reader looking for the receipts rules finds them by the section header. No rule moved and no declaration changed; the diff is comment lines and one rename. The 680px reading column was four identical copies of one recipe: .article-container, .doc-container, .docs-index, and .media-container, the last living in media-player.css. They are now one grouped rule beside .container, which is where the file already keeps its width tiers. Grouping rather than a new class keeps each selector's own specificity, and the charter treats a new class as a smell. Verified no competing rule exists at any source position for any of the four, and both the old and new homes sit in the same components layer, so the cascade result is unchanged.
Co-Authored-By
Claude Opus 5 (1M context) <noreply@anthropic.com>
Author: Max Johnson <me@maxj.phd> · 2026-08-17 00:31 UTC
Signed with PGP, not checked
Commit: c635865047c1200419b6580d5f0965f03b6f6e35
Parent: d704e98
2 files changed, +85 insertions, -23 deletions
M server/static/media-player.css +3 -6
@@ -6,12 +6,9 @@
6 6 @layer components {
7 7 /* Unified media player styles, shared by audio and video player pages. */
8 8
9 - /* Media container */
10 - .media-container {
11 - max-width: 680px;
12 - margin: 0 auto;
13 - padding: var(--gap-page) var(--gap-pane) var(--gap-page);
14 - }
9 + /* Media container. The 680px measure lives in style.css as the shared
10 + reading column, alongside the three other long-form wrappers that used
11 + to carry their own copy of it. Only descendants are styled here. */
15 12
16 13 /* Author header */
17 14 .author-header {
M server/static/style.css +82 -17
@@ -431,6 +431,27 @@
431 431 .feed-page .container,
432 432 .creators-page .container { max-width: 900px; margin: 0 auto; }
433 433
434 + /* READING COLUMN, the 680px measure every long-form surface uses. Narrower
435 + than .container and with tighter horizontal padding, so it is its own
436 + primitive rather than a .container width tier.
437 +
438 + These four wrappers were four identical rules until 2026-08-16. They are
439 + grouped rather than replaced by one class because the charter treats a new
440 + class as a smell, and because grouping keeps each selector's own
441 + specificity intact. A fifth long-form surface joins this list; it does not
442 + copy the recipe.
443 +
444 + .media-container's rule used to live in media-player.css. It is here now so
445 + the measure has one definition; that sheet keeps its descendant rules. */
446 + .article-page .article-container,
447 + .doc-container,
448 + .docs-index,
449 + .media-container {
450 + max-width: 680px;
451 + margin: 0 auto;
452 + padding: var(--gap-page) var(--gap-pane) var(--gap-page);
453 + }
454 +
434 455 /* ===========================================
435 456 BUTTONS
436 457 =========================================== */
@@ -1326,7 +1347,7 @@
1326 1347 }
1327 1348
1328 1349 /* ===========================================
1329 - INFO & WARNING BOXES
1350 + NOTIFICATION SURFACES (info-box, warning-box, error-message)
1330 1351 =========================================== */
1331 1352
1332 1353 /* Notification surface roles (charter: docs/design-system.md).
@@ -1393,6 +1414,10 @@
1393 1414 display: none;
1394 1415 }
1395 1416
1417 + /* ===========================================
1418 + ERROR PAGE
1419 + =========================================== */
1420 +
1396 1421 /* Full-page error layout (templates/pages/error.html). Distinct from
1397 1422 the inline `.error-message` form-error class above; named to avoid
1398 1423 collision. */
@@ -1433,6 +1458,10 @@
1433 1458 }
1434 1459
1435 1460
1461 + /* ===========================================
1462 + BUY PAGE (standalone direct purchase)
1463 + =========================================== */
1464 +
1436 1465 /* Minimal direct-purchase page (templates/pages/buy.html). Standalone
1437 1466 page used for link-in-bio sharing, no site chrome, just a card.
1438 1467 Scoped under .buy-page so the rules don't bleed into the rest of
@@ -1574,6 +1603,10 @@
1574 1603 color: inherit;
1575 1604 }
1576 1605
1606 + /* ===========================================
1607 + SECTIONED CONTENT (tabs + panels, shared by three pages)
1608 + =========================================== */
1609 +
1577 1610 /* Sectioned content (templates/pages/item.html, project.html,
1578 1611 library_downloads.html). Tab+panel pattern shared by all three
1579 1612 pages, kept global, NOT scoped under .item-page. */
@@ -1628,6 +1661,10 @@
1628 1661 }
1629 1662 .section-panel code { font-size: var(--text-note); }
1630 1663
1664 + /* ===========================================
1665 + ITEM PAGE
1666 + =========================================== */
1667 +
1631 1668 /* Item detail page (templates/pages/item.html). Scoped under .item-page
1632 1669 body class so the .item-title / .item-meta / .item-price / .item-footer
1633 1670 names don't collide with the store-front item-card on project.html. */
@@ -1763,6 +1800,10 @@
1763 1800 .item-page .purchase-box { padding: var(--gap-section); }
1764 1801 }
1765 1802
1803 + /* ===========================================
1804 + PROJECT PAGE (store front)
1805 + =========================================== */
1806 +
1766 1807 /* Project store-front page (templates/pages/project.html). Scoped under
1767 1808 .project-page body class, `.item-card`, `.item-title`, `.item-meta`,
1768 1809 `.item-price`, etc. here mean store-front item cards, distinct from
@@ -1943,6 +1984,10 @@
1943 1984 .project-page .store-description { font-size: var(--text-body); }
1944 1985 }
1945 1986
1987 + /* ===========================================
1988 + LIBRARY DOWNLOADS PAGE
1989 + =========================================== */
1990 +
1946 1991 /* Library downloads page (templates/pages/library_downloads.html).
1947 1992 Scoped under .library-page body class. Class names like .item-footer,
1948 1993 .bundle-child, etc. overlap with .item-page; the scope keeps them
@@ -2090,15 +2135,15 @@
2090 2135 .library-page .library-cover img { max-width: 200px; }
2091 2136 }
2092 2137
2138 + /* ===========================================
2139 + ARTICLE & BLOG READER
2140 + =========================================== */
2141 +
2093 2142 /* Article reader pages (templates/pages/text_reader.html, blog_post.html,
2094 2143 library_text.html). Long-form article layout, centered narrow column,
2095 2144 author header, large heading, magazine-style body type. Scoped under
2096 - .article-page body class. */
2097 - .article-page .article-container {
2098 - max-width: 680px;
2099 - margin: 0 auto;
2100 - padding: var(--gap-page) var(--gap-pane) var(--gap-page);
2101 - }
2145 + .article-page body class. The container itself takes the shared reading
2146 + column near the top of this file. */
2102 2147
2103 2148 .article-page .author-header {
2104 2149 display: flex;
@@ -2328,6 +2373,10 @@
2328 2373 .article-page .article-body { font-size: var(--text-body); }
2329 2374 }
2330 2375
2376 + /* ===========================================
2377 + ADMIN & HEALTH DASHBOARDS
2378 + =========================================== */
2379 +
2331 2380 /* Admin dashboards (templates/dashboards/admin-*.html). Every admin
2332 2381 page had a duplicate `h1 { font-size: 2rem; margin-bottom: 0.5rem; }`
2333 2382 inline, consolidated here. */
@@ -2469,6 +2518,10 @@
2469 2518 .health-page details.check-list .test-list {
2470 2519 margin-top: var(--gap-section);
2471 2520 }
2521 + /* ===========================================
2522 + IMPORT WIZARD
2523 + =========================================== */
2524 +
2472 2525 /* Import data wizard (templates/dashboards/dashboard-import.html).
2473 2526 Page-specific upload + column-mapping + progress flow. Migration also
2474 2527 fixed token bypasses: --border-color → --border, --accent → --highlight,
@@ -2609,6 +2662,10 @@
2609 2662 margin-bottom: var(--gap-peer);
2610 2663 }
2611 2664
2665 + /* ===========================================
2666 + DELETE ACCOUNT PAGE
2667 + =========================================== */
2668 +
2612 2669 /* Delete account page (templates/dashboards/dashboard-delete-account.html).
2613 2670 Overrides .warning-box to use --danger (delete is danger, not warning)
2614 2671 and the .form-status partial styling. Scoped to keep the global versions
@@ -2703,6 +2760,10 @@
2703 2760 .delete-account-page .form-status.error { color: var(--danger); }
2704 2761 .delete-account-page .form-status.success { color: var(--success); }
2705 2762
2763 + /* ===========================================
2764 + EXPORT PAGE
2765 + =========================================== */
2766 +
2706 2767 /* Export data page (templates/dashboards/dashboard-export.html).
2707 2768 `.export-card` and its inner classes (`-info`, `-title`, `-desc`, `-meta`)
2708 2769 are intentionally page-scoped: this is a row-layout card (info on left,
@@ -2776,6 +2837,10 @@
2776 2837 .export-page .export-status.success { color: var(--success); }
2777 2838 .export-page .export-status.error { color: var(--danger); }
2778 2839
2840 + /* ===========================================
2841 + RECEIPT PAGE
2842 + =========================================== */
2843 +
2779 2844 /* Receipt page (templates/pages/receipt.html). */
2780 2845
2781 2846 .receipt-page .receipt-header {
@@ -2828,6 +2893,10 @@
2828 2893 .receipt-page .receipt-box { border: 1px solid var(--border); }
2829 2894 }
2830 2895
2896 + /* ===========================================
2897 + FAN+ PAGE
2898 + =========================================== */
2899 +
2831 2900 /* Fan+ subscription page (templates/pages/fan_plus.html). */
2832 2901 .fan-plus-page h1 { font-size: var(--text-display); margin-bottom: var(--gap-peer); }
2833 2902 .fan-plus-page h2 { font-size: var(--text-head); margin-top: var(--gap-page); margin-bottom: var(--gap-section); }
@@ -2874,6 +2943,10 @@
2874 2943
2875 2944 .fan-plus-page .login-link { font-family: var(--font-mono); }
2876 2945
2946 + /* ===========================================
2947 + PURCHASE PAGE
2948 + =========================================== */
2949 +
2877 2950 /* Purchase confirmation page (templates/pages/purchase.html). */
2878 2951 .purchase-page .container {
2879 2952 max-width: 800px;
@@ -6588,11 +6661,7 @@
6588 6661 DOCUMENTATION PAGES
6589 6662 =========================================== */
6590 6663
6591 - .doc-container {
6592 - max-width: 680px;
6593 - margin: 0 auto;
6594 - padding: var(--gap-page) var(--gap-pane) var(--gap-page);
6595 - }
6664 + /* .doc-container takes the shared reading column near the top of this file. */
6596 6665
6597 6666 .doc-breadcrumb {
6598 6667 font-family: var(--font-mono);
@@ -6721,11 +6790,7 @@
6721 6790 .doc-backlinks-list a:hover { text-decoration: underline; }
6722 6791
6723 6792 /* Docs index page */
6724 - .docs-index {
6725 - max-width: 680px;
6726 - margin: 0 auto;
6727 - padding: var(--gap-page) var(--gap-pane) var(--gap-page);
6728 - }
6793 + /* .docs-index takes the shared reading column near the top of this file. */
6729 6794
6730 6795 .docs-index-title {
6731 6796 font-family: var(--font-heading);