Skip to main content

max / makenotwork

Move the style.css catch-all region onto the gap scale L1327-3099, 218 declarations. The section is labelled INFO & WARNING BOXES but is really a 1772-line catch-all covering the project page, the article and blog layouts, the health dashboard, receipts, Fan+ and purchase. Three values stay literal because they sit above the scale top of 3rem, each with the reason in place: two footers that want more separation than --gap-page can express, and the article container's long-scroll runout, which is the same shape as .media-container and should move with it.
Co-Authored-By
Claude Opus 5 (1M context) <noreply@anthropic.com>
Author: Max Johnson <me@maxj.phd> · 2026-08-02 20:12 UTC
Signed with PGP, not checked
Commit: 0c419e3f0f62cf1d043c7ce058b85abbfdee9489
Parent: d20c576
1 file changed, +82 insertions, -78 deletions
M server/static/style.css +82 -78
@@ -1345,8 +1345,8 @@
1345 1345 with .is-active. Distinct from page-level .alert. */
1346 1346 .info-box {
1347 1347 background: var(--surface-sunken);
1348 - padding: 1rem;
1349 - margin-bottom: 1rem;
1348 + padding: var(--gap-section);
1349 + margin-bottom: var(--gap-section);
1350 1350 font-size: 0.9rem;
1351 1351 font-family: var(--font-body);
1352 1352 }
@@ -1354,16 +1354,16 @@
1354 1354 .info-box h3 {
1355 1355 font-size: 1rem;
1356 1356 font-weight: normal;
1357 - margin-bottom: 0.5rem;
1357 + margin-bottom: var(--gap-peer);
1358 1358 }
1359 1359
1360 1360 .info-box ul {
1361 1361 list-style: none;
1362 - margin-top: 0.5rem;
1362 + margin-top: var(--gap-peer);
1363 1363 }
1364 1364
1365 1365 .info-box li {
1366 - padding: 0.25rem 0;
1366 + padding: var(--gap-bound) 0;
1367 1367 }
1368 1368
1369 1369 .info-box li::before {
@@ -1374,8 +1374,8 @@
1374 1374 .warning-box {
1375 1375 background: var(--warning);
1376 1376 color: var(--primary-light);
1377 - padding: 1rem;
1378 - margin-bottom: 1rem;
1377 + padding: var(--gap-section);
1378 + margin-bottom: var(--gap-section);
1379 1379 font-size: 0.9rem;
1380 1380 font-family: var(--font-body);
1381 1381 }
@@ -1400,7 +1400,7 @@
1400 1400 display: flex;
1401 1401 align-items: center;
1402 1402 justify-content: center;
1403 - padding: var(--space-6);
1403 + padding: var(--gap-page);
1404 1404 background: var(--surface-page);
1405 1405 }
1406 1406
@@ -1415,19 +1415,19 @@
1415 1415 letter-spacing: 0.08em;
1416 1416 text-transform: uppercase;
1417 1417 color: var(--content-muted);
1418 - margin-bottom: var(--space-4);
1418 + margin-bottom: var(--gap-section);
1419 1419 }
1420 1420
1421 1421 .error-page-message {
1422 1422 font-size: 1.5rem;
1423 1423 line-height: 1.4;
1424 1424 color: var(--content);
1425 - margin-bottom: var(--space-6);
1425 + margin-bottom: var(--gap-page);
1426 1426 }
1427 1427
1428 1428 .error-actions {
1429 1429 display: flex;
1430 - gap: var(--space-4);
1430 + gap: var(--gap-section);
1431 1431 justify-content: center;
1432 1432 }
1433 1433
@@ -1445,13 +1445,13 @@
1445 1445 display: flex;
1446 1446 align-items: center;
1447 1447 justify-content: center;
1448 - padding: var(--space-6);
1448 + padding: var(--gap-page);
1449 1449 }
1450 1450
1451 1451 .buy-page .buy-card {
1452 1452 background: var(--surface-overlay);
1453 1453 border-radius: 12px;
1454 - padding: var(--space-6);
1454 + padding: var(--gap-page);
1455 1455 max-width: 420px;
1456 1456 width: 100%;
1457 1457 box-shadow: var(--shadow-3);
@@ -1463,7 +1463,7 @@
1463 1463 aspect-ratio: 1;
1464 1464 max-height: 280px;
1465 1465 border-radius: 8px;
1466 - margin-bottom: var(--space-5);
1466 + margin-bottom: var(--gap-pane);
1467 1467 background: var(--surface-raised);
1468 1468 }
1469 1469
@@ -1482,14 +1482,14 @@
1482 1482 .buy-page h1 {
1483 1483 text-align: left;
1484 1484 font-size: 1.4rem;
1485 - margin-bottom: var(--space-1);
1485 + margin-bottom: var(--gap-bound);
1486 1486 }
1487 1487
1488 1488 .buy-page .creator {
1489 1489 font-family: var(--font-mono);
1490 1490 font-size: 0.85rem;
1491 1491 opacity: 0.6;
1492 - margin-bottom: var(--space-5);
1492 + margin-bottom: var(--gap-pane);
1493 1493 }
1494 1494
1495 1495 .buy-page .creator a {
@@ -1499,14 +1499,14 @@
1499 1499 .buy-page .price {
1500 1500 font-family: var(--font-mono);
1501 1501 font-size: 1.3rem;
1502 - margin-bottom: var(--space-5);
1502 + margin-bottom: var(--gap-pane);
1503 1503 }
1504 1504
1505 1505 .buy-page .description {
1506 1506 font-size: 0.9rem;
1507 1507 line-height: 1.5;
1508 1508 opacity: 0.8;
1509 - margin-bottom: var(--space-5);
1509 + margin-bottom: var(--gap-pane);
1510 1510 max-height: 4.5em;
1511 1511 overflow: hidden;
1512 1512 }
@@ -1539,8 +1539,8 @@
1539 1539 .buy-page .pwyw-input {
1540 1540 display: flex;
1541 1541 align-items: center;
1542 - gap: var(--space-1);
1543 - margin-bottom: var(--space-4);
1542 + gap: var(--gap-bound);
1543 + margin-bottom: var(--gap-section);
1544 1544 }
1545 1545
1546 1546 .buy-page .pwyw-input input {
@@ -1555,7 +1555,7 @@
1555 1555 font-size: 0.8rem;
1556 1556 opacity: 0.5;
1557 1557 text-align: center;
1558 - margin-top: var(--space-4);
1558 + margin-top: var(--gap-section);
1559 1559 }
1560 1560
1561 1561 .buy-page .note a {
@@ -1564,8 +1564,8 @@
1564 1564
1565 1565 .buy-page .footer {
1566 1566 text-align: center;
1567 - margin-top: var(--space-5);
1568 - padding-top: var(--space-4);
1567 + margin-top: var(--gap-pane);
1568 + padding-top: var(--gap-section);
1569 1569 border-top: 1px solid var(--border);
1570 1570 font-size: 0.8rem;
1571 1571 opacity: 0.5;
@@ -1582,13 +1582,13 @@
1582 1582 display: flex;
1583 1583 gap: 0;
1584 1584 border-bottom: 1px solid var(--border);
1585 - margin-bottom: var(--space-5);
1585 + margin-bottom: var(--gap-pane);
1586 1586 }
1587 1587
1588 1588 .section-tab {
1589 1589 background: none;
1590 1590 border: none;
1591 - padding: 0.6rem 1.2rem;
1591 + padding: var(--gap-group) var(--gap-section);
1592 1592 cursor: pointer;
1593 1593 font-size: 0.95rem;
1594 1594 opacity: 0.6;
@@ -1611,21 +1611,21 @@
1611 1611 .section-panel p { margin-bottom: var(--space-4); }
1612 1612 .section-panel ul,
1613 1613 .section-panel ol {
1614 - margin-left: var(--space-5);
1615 - margin-bottom: var(--space-4);
1614 + margin-left: var(--gap-pane);
1615 + margin-bottom: var(--gap-section);
1616 1616 }
1617 1617 .section-panel li { margin-bottom: var(--space-2); }
1618 1618 .section-panel h1,
1619 1619 .section-panel h2,
1620 1620 .section-panel h3 {
1621 - margin-top: var(--space-4);
1622 - margin-bottom: var(--space-2);
1621 + margin-top: var(--gap-section);
1622 + margin-bottom: var(--gap-peer);
1623 1623 }
1624 1624 .section-panel pre {
1625 1625 background: var(--surface-sunken);
1626 - padding: var(--space-4);
1626 + padding: var(--gap-section);
1627 1627 overflow-x: auto;
1628 - margin-bottom: var(--space-4);
1628 + margin-bottom: var(--gap-section);
1629 1629 }
1630 1630 .section-panel code { font-size: 0.9rem; }
1631 1631
@@ -1635,36 +1635,36 @@
1635 1635 .item-page .item-layout {
1636 1636 display: grid;
1637 1637 grid-template-columns: 400px 1fr;
1638 - gap: var(--space-6);
1639 - margin-bottom: var(--space-6);
1638 + gap: var(--gap-page);
1639 + margin-bottom: var(--gap-page);
1640 1640 }
1641 1641
1642 1642 .item-page .item-layout.no-media { grid-template-columns: 1fr; }
1643 1643
1644 1644 .item-page .item-title {
1645 1645 font-size: 2rem;
1646 - margin-bottom: var(--space-2);
1646 + margin-bottom: var(--gap-peer);
1647 1647 }
1648 1648
1649 1649 .item-page .item-creator {
1650 1650 font-size: 1rem;
1651 1651 opacity: 0.7;
1652 - margin-bottom: var(--space-5);
1652 + margin-bottom: var(--gap-pane);
1653 1653 }
1654 1654
1655 1655 .item-page .item-creator a { color: var(--content); }
1656 1656
1657 1657 .item-page .item-price {
1658 1658 font-size: 2.5rem;
1659 - margin-bottom: var(--space-5);
1659 + margin-bottom: var(--gap-pane);
1660 1660 }
1661 1661
1662 1662 .item-page .item-meta {
1663 1663 display: grid;
1664 1664 grid-template-columns: 1fr 1fr;
1665 - gap: var(--space-4);
1666 - margin-bottom: var(--space-5);
1667 - padding-bottom: var(--space-5);
1665 + gap: var(--gap-section);
1666 + margin-bottom: var(--gap-pane);
1667 + padding-bottom: var(--gap-pane);
1668 1668 border-bottom: 1px solid var(--border);
1669 1669 }
1670 1670
@@ -1678,7 +1678,7 @@
1678 1678 .purchase-box h3 {
1679 1679 font-size: 1rem;
1680 1680 font-weight: normal;
1681 - margin-bottom: var(--space-4);
1681 + margin-bottom: var(--gap-section);
1682 1682 }
1683 1683 .purchase-box ul { list-style: none; margin-bottom: var(--space-4); }
1684 1684 .purchase-box li { padding: var(--space-1) 0; }
@@ -1689,20 +1689,20 @@
1689 1689
1690 1690 .item-page .btn-primary {
1691 1691 width: 100%;
1692 - padding: var(--space-4) var(--space-6);
1692 + padding: var(--gap-section) var(--gap-page);
1693 1693 font-size: 1.1rem;
1694 1694 }
1695 1695
1696 1696 .item-page .btn-secondary {
1697 1697 width: 100%;
1698 - margin-top: var(--space-2);
1698 + margin-top: var(--gap-peer);
1699 1699 }
1700 1700
1701 1701 .item-page .payment-note {
1702 1702 font-size: 0.85rem;
1703 1703 opacity: 0.6;
1704 1704 text-align: center;
1705 - margin-top: var(--space-4);
1705 + margin-top: var(--gap-section);
1706 1706 }
1707 1707
1708 1708 /* bundle-child uses .list-row co-class; only the gap-4 override remains. */
@@ -1710,7 +1710,7 @@
1710 1710
1711 1711 .item-page .bundle-child-type {
1712 1712 font-size: 0.8rem;
1713 - padding: 0.2rem 0.6rem;
1713 + padding: var(--gap-bound) var(--gap-group);
1714 1714 background: var(--surface-sunken);
1715 1715 white-space: nowrap;
1716 1716 }
@@ -1721,8 +1721,8 @@
1721 1721
1722 1722 .item-page .bundle-notice {
1723 1723 background: var(--surface-sunken);
1724 - padding: var(--space-5);
1725 - margin-bottom: var(--space-5);
1724 + padding: var(--gap-pane);
1725 + margin-bottom: var(--gap-pane);
1726 1726 text-align: center;
1727 1727 }
1728 1728
@@ -1735,12 +1735,12 @@
1735 1735 .item-page .features-grid {
1736 1736 display: grid;
1737 1737 grid-template-columns: repeat(2, 1fr);
1738 - gap: var(--space-5);
1738 + gap: var(--gap-pane);
1739 1739 }
1740 1740 .item-page .version-number { font-size: 1.1rem; }
1741 1741 .item-page .item-footer {
1742 - margin-top: 3rem;
1743 - padding-top: var(--space-6);
1742 + margin-top: var(--gap-page);
1743 + padding-top: var(--gap-page);
1744 1744 border-top: 1px solid var(--border);
1745 1745 text-align: center;
1746 1746 opacity: 0.6;
@@ -1774,18 +1774,18 @@
1774 1774 .project-page .store-meta {
1775 1775 font-size: 0.9rem;
1776 1776 opacity: 0.7;
1777 - margin-bottom: var(--space-5);
1777 + margin-bottom: var(--gap-pane);
1778 1778 }
1779 1779 .project-page .store-meta a { color: var(--content); }
1780 1780 .project-page .store-description {
1781 1781 font-size: 1.1rem;
1782 1782 max-width: 800px;
1783 - margin-bottom: var(--space-6);
1783 + margin-bottom: var(--gap-page);
1784 1784 text-align: left;
1785 1785 }
1786 1786 .project-page .store-actions {
1787 1787 display: flex;
1788 - gap: var(--space-4);
1788 + gap: var(--gap-section);
1789 1789 flex-wrap: wrap;
1790 1790 }
1791 1791
@@ -1794,7 +1794,7 @@
1794 1794 .project-page .items-grid {
1795 1795 display: grid;
1796 1796 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
1797 - gap: var(--space-6);
1797 + gap: var(--gap-page);
1798 1798 }
1799 1799
1800 1800 .project-page .item-card {
@@ -1823,7 +1823,7 @@
1823 1823 .project-page a.item-thumbnail:hover { opacity: 0.5; }
1824 1824
1825 1825 .project-page .item-content {
1826 - padding: var(--space-5);
1826 + padding: var(--gap-pane);
1827 1827 display: flex;
1828 1828 flex-direction: column;
1829 1829 flex-grow: 1;
@@ -1831,7 +1831,7 @@
1831 1831
1832 1832 .project-page .item-title {
1833 1833 font-size: 1.2rem;
1834 - margin-bottom: var(--space-2);
1834 + margin-bottom: var(--gap-peer);
1835 1835 font-family: var(--font-heading);
1836 1836 font-weight: bold;
1837 1837 }
@@ -1842,14 +1842,14 @@
1842 1842 .project-page .item-meta {
1843 1843 font-size: 0.85rem;
1844 1844 opacity: 0.7;
1845 - margin-bottom: var(--space-4);
1845 + margin-bottom: var(--gap-section);
1846 1846 }
1847 1847
1848 1848 .project-page .item-tags { margin-bottom: var(--space-4); }
1849 1849
1850 1850 .project-page .item-description {
1851 1851 font-size: 0.9rem;
1852 - margin-bottom: var(--space-4);
1852 + margin-bottom: var(--gap-section);
1853 1853 opacity: 0.8;
1854 1854 text-align: left;
1855 1855 flex-grow: 1;
@@ -1866,8 +1866,12 @@
1866 1866 .project-page .item-stats { font-size: 0.85rem; opacity: 0.6; }
1867 1867
1868 1868 .project-page .store-footer {
1869 + /* 4rem sits above the scale top of 3rem. The gap vocabulary ends at
1870 + --gap-page, and this wants more separation than a page: it is the last
1871 + rule on a store before the footer. Kept literal until the scale grows a
1872 + name for it. Pairs with .article-page .article-footer. */
1869 1873 margin-top: 4rem;
1870 - padding-top: var(--space-6);
1874 + padding-top: var(--gap-page);
1871 1875 border-top: 1px solid var(--border);
1872 1876 opacity: 0.6;
1873 1877 }
@@ -1877,7 +1881,7 @@
1877 1881 .project-page .item-content .btn-primary,
1878 1882 .project-page .item-content .btn-secondary {
1879 1883 width: 100%;
1880 - margin-top: var(--space-4);
1884 + margin-top: var(--gap-section);
1881 1885 }
1882 1886
1883 1887 /* project.html allows .section-tabs to wrap (other pages don't). */
@@ -1888,12 +1892,12 @@
1888 1892 .project-page .tiers-grid {
1889 1893 display: grid;
1890 1894 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
1891 - gap: var(--space-5);
1895 + gap: var(--gap-pane);
1892 1896 }
1893 1897
1894 1898 .project-page .tier-card {
1895 1899 background: var(--surface-overlay);
1896 - padding: var(--space-6);
1900 + padding: var(--gap-page);
1897 1901 display: flex;
1898 1902 flex-direction: column;
1899 1903 }
@@ -1902,18 +1906,18 @@
1902 1906 font-family: var(--font-heading);
1903 1907 font-weight: bold;
1904 1908 font-size: 1.3rem;
1905 - margin-bottom: var(--space-2);
1909 + margin-bottom: var(--gap-peer);
1906 1910 }
1907 1911
1908 1912 .project-page .tier-price {
1909 1913 font-size: 1.5rem;
1910 - margin-bottom: var(--space-4);
1914 + margin-bottom: var(--gap-section);
1911 1915 }
1912 1916
1913 1917 .project-page .tier-description {
1914 1918 font-size: 0.9rem;
1915 1919 opacity: 0.8;
1916 - margin-bottom: var(--space-5);
1920 + margin-bottom: var(--gap-pane);
1917 1921 flex-grow: 1;
1918 1922 text-align: left;
1919 1923 }
@@ -1924,7 +1928,7 @@
1924 1928
1925 1929 .project-page .tier-active-badge {
1926 1930 font-size: 0.85rem;
1927 - padding: var(--space-2) var(--space-4);
1931 + padding: var(--gap-peer) var(--gap-section);
1928 1932 background: var(--surface-sunken);
1929 1933 text-align: center;
1930 1934 opacity: 0.7;
@@ -1945,8 +1949,8 @@
1945 1949 .library-page .library-header {
1946 1950 display: grid;
1947 1951 grid-template-columns: 200px 1fr;
1948 - gap: var(--space-5);
1949 - margin-bottom: var(--space-6);
1952 + gap: var(--gap-pane);
1953 + margin-bottom: var(--gap-page);
1950 1954 align-items: center;
1951 1955 }
1952 1956
@@ -1961,7 +1965,7 @@
1961 1965
1962 1966 .library-page .library-title {
1963 1967 font-size: 2rem;
1964 - margin-bottom: var(--space-1);
1968 + margin-bottom: var(--gap-bound);
1965 1969 }
1966 1970
1967 1971 /* Byline sits under the centered H1 (global `h1 { text-align: center }`),
@@ -1971,7 +1975,7 @@
1971 1975 .library-page .library-creator {
1972 1976 font-size: 0.95rem;
1973 1977 opacity: 0.7;
1974 - margin-bottom: var(--space-4);
1978 + margin-bottom: var(--gap-section);
1975 1979 text-align: center;
1976 1980 }
1977 1981
@@ -1994,16 +1998,16 @@
1994 1998
1995 1999 .library-page .downloads-hero h2 {
1996 2000 font-size: 1.5rem;
1997 - margin-bottom: var(--space-4);
1998 - padding-bottom: var(--space-2);
2001 + margin-bottom: var(--gap-section);
2002 + padding-bottom: var(--gap-peer);
1999 2003 border-bottom: 1px solid var(--border);
2000 2004 }
2001 2005
2002 2006 .library-page .download-row {
2003 2007 display: flex;
2004 2008 align-items: center;
2005 - gap: var(--space-4);
2006 - padding: 0.6rem 0;
2009 + gap: var(--gap-section);
2010 + padding: var(--gap-group) 0;
2007 2011 border-bottom: 1px solid var(--border);
2008 2012 }
2009 2013
@@ -2026,8 +2030,8 @@
2026 2030
2027 2031 .library-page .download-notice {
2028 2032 background: var(--surface-sunken);
2029 - padding: var(--space-5);
2030 - margin-bottom: var(--space-6);
2033 + padding: var(--gap-pane);
2034 + margin-bottom: var(--gap-page);
2031 2035 font-size: 0.85rem;
2032 2036 opacity: 0.8;
2033 2037 }
@@ -2039,21 +2043,21 @@
2039 2043
2040 2044 .library-page .library-downloads h3 {
2041 2045 font-size: 1.1rem;
2042 - margin-bottom: var(--space-4);
2046 + margin-bottom: var(--gap-section);
2043 2047 }
2044 2048
2045 2049 .library-page .library-section h2 {
2046 2050 font-size: 1.3rem;
2047 - margin-bottom: var(--space-4);
2048 - padding-bottom: var(--space-2);
2051 + margin-bottom: var(--gap-section);
2052 + padding-bottom: var(--gap-peer);
2049 2053 border-bottom: 1px solid var(--border);
2050 2054 }
2051 2055
2052 2056 .library-page .bundle-child {
Lines truncated