Skip to main content

max / makenotwork

Put style.css on the type scale
Author: Max Johnson <me@maxj.phd> · 2026-08-02 21:16 UTC
Signed with PGP, not checked
Commit: 8859ac7b0924703eeb4ae8f4ee76ab1c66545be0
Parent: c87492d
2 files changed, +69 insertions, -69 deletions
M server/Cargo.lock +2 -2
@@ -5281,9 +5281,9 @@
5281 5281
5282 5282 [[package]]
5283 5283 name = "makeover-geometry"
5284 - version = "0.6.0"
5284 + version = "0.6.1"
5285 5285 source = "registry+https://github.com/rust-lang/crates.io-index"
5286 - checksum = "b2466b8ca54dba9ef62f3679b33c90a0554e507c23e7b725c178ce9d277f542e"
5286 + checksum = "a77509284612547c48a23a1773cba70ac4b6510ff5c7618979d49cac7976878b"
5287 5287
5288 5288 [[package]]
5289 5289 name = "makeover-layout"
M server/static/style.css +67 -67
@@ -265,7 +265,7 @@
265 265 }
266 266
267 267 .centered-page h1 {
268 - font-size: 4.5rem;
268 + font-size: var(--text-hero);
269 269 }
270 270
271 271 .message-container {
@@ -283,7 +283,7 @@
283 283 font-weight: normal;
284 284 color: var(--content);
285 285 text-align: center;
286 - font-size: 2.5rem;
286 + font-size: var(--text-display);
287 287 }
288 288
289 289 h2,
@@ -309,7 +309,7 @@
309 309 font-weight: normal;
310 310 color: var(--content);
311 311 text-align: center;
312 - font-size: 2.5rem;
312 + font-size: var(--text-display);
313 313 }
314 314
315 315 .subtitle-h2 {
@@ -317,7 +317,7 @@
317 317 font-weight: normal;
318 318 color: var(--content);
319 319 text-align: center;
320 - font-size: 1.5rem;
320 + font-size: var(--text-head);
321 321 }
322 322
323 323 .subsection-title {
@@ -399,7 +399,7 @@
399 399 border: none;
400 400 padding: var(--gap-section) var(--gap-pane);
401 401 font-family: inherit;
402 - font-size: 1rem;
402 + font-size: var(--text-body);
403 403 cursor: pointer;
404 404 box-shadow: var(--shadow-raised);
405 405 transition: box-shadow 0.1s ease, background 0.2s ease;
@@ -426,7 +426,7 @@
426 426 border: none;
427 427 padding: var(--gap-section) var(--gap-pane);
428 428 font-family: var(--font-mono);
429 - font-size: 1rem;
429 + font-size: var(--text-body);
430 430 cursor: pointer;
431 431 box-shadow: var(--shadow-raised);
432 432 transition: box-shadow 0.1s ease, background 0.2s ease;
@@ -449,7 +449,7 @@
449 449 border: none;
450 450 padding: var(--gap-section) var(--gap-pane);
451 451 font-family: var(--font-mono);
452 - font-size: 1rem;
452 + font-size: var(--text-body);
453 453 cursor: pointer;
454 454 box-shadow: var(--shadow-raised);
455 455 transition: box-shadow 0.1s ease, background 0.2s ease;
@@ -501,12 +501,12 @@
501 501 These are documented variants, not deprecation targets. */
502 502 .btn--large {
503 503 padding: var(--gap-section) var(--gap-page);
504 - font-size: 1.125rem;
504 + font-size: var(--text-lead);
505 505 }
506 506
507 507 .btn--icon {
508 508 padding: var(--gap-bound) var(--gap-peer);
509 - font-size: 0.85rem;
509 + font-size: var(--text-note);
510 510 line-height: 1;
511 511 min-width: 1.75rem;
512 512 }
@@ -517,7 +517,7 @@
517 517 border: none;
518 518 padding: 0;
519 519 font-family: var(--font-mono);
520 - font-size: 1rem;
520 + font-size: var(--text-body);
521 521 cursor: pointer;
522 522 /* Link semantics, flat, no depth. Overrides the shadow that would
523 523 otherwise cascade from `button` / `form button` when a .btn--link
@@ -582,7 +582,7 @@
582 582 label {
583 583 font-family: var(--font-mono);
584 584 color: var(--content);
585 - font-size: 14px;
585 + font-size: var(--text-note);
586 586 }
587 587
588 588 input[type="text"],
@@ -597,7 +597,7 @@
597 597 border: 1px solid var(--border);
598 598 padding: var(--gap-section);
599 599 font-family: var(--font-mono);
600 - font-size: 0.9rem;
600 + font-size: var(--text-note);
601 601 color: var(--content);
602 602 box-shadow: var(--shadow-inset);
603 603 }
@@ -629,7 +629,7 @@
629 629 input[type="submit"],
630 630 form button {
631 631 font-family: var(--font-heading);
632 - font-size: 16px;
632 + font-size: var(--text-body);
633 633 color: var(--content);
634 634 background: var(--surface-overlay);
635 635 padding: 12px 24px;
@@ -656,7 +656,7 @@
656 656 .form-group label {
657 657 display: block;
658 658 margin-bottom: var(--gap-peer);
659 - font-size: 0.9rem;
659 + font-size: var(--text-note);
660 660 }
661 661
662 662 .form-group input,
@@ -672,7 +672,7 @@
672 672 }
673 673
674 674 .hint {
675 - font-size: 0.85rem;
675 + font-size: var(--text-note);
676 676 opacity: 0.6;
677 677 margin-top: var(--gap-peer);
678 678 }
@@ -690,7 +690,7 @@
690 690 }
691 691
692 692 .field-error {
693 - font-size: 0.85rem;
693 + font-size: var(--text-note);
694 694 color: var(--danger);
695 695 margin-top: var(--gap-peer);
696 696 }
@@ -762,7 +762,7 @@
762 762 border: none;
763 763 padding: var(--gap-section) var(--gap-page);
764 764 font-family: var(--font-mono);
765 - font-size: 1rem;
765 + font-size: var(--text-body);
766 766 cursor: pointer;
767 767 /* Tabs navigate, they don't commit, stay flat. Overrides the base
768 768 `button` shadow if a tab is a <button>. */
@@ -833,7 +833,7 @@
833 833 .data-table {
834 834 width: 100%;
835 835 border-collapse: collapse;
836 - font-size: 0.9rem;
836 + font-size: var(--text-note);
837 837 font-family: var(--font-body);
838 838 margin-bottom: var(--gap-section);
839 839 }
@@ -861,7 +861,7 @@
861 861 .data-table th.sortable::after {
862 862 content: " ^";
863 863 opacity: 0.3;
864 - font-size: 0.8rem;
864 + font-size: var(--text-fine);
865 865 }
866 866
867 867 .data-table tbody tr {
@@ -895,7 +895,7 @@
895 895 }
896 896
897 897 .compact-table thead tr {
898 - font-size: 0.85rem;
898 + font-size: var(--text-note);
899 899 opacity: 0.7;
900 900 }
901 901
@@ -916,12 +916,12 @@
916 916 UTILITIES
917 917 =========================================== */
918 918
919 - .text-sm { font-size: 0.85rem; }
920 - .text-xs { font-size: 0.8rem; }
919 + .text-sm { font-size: var(--text-note); }
920 + .text-xs { font-size: var(--text-fine); }
921 921 .muted { opacity: 0.7; }
922 922 .dimmed { opacity: 0.6; }
923 923 .dimmer { opacity: 0.5; }
924 - .meta { font-size: 0.85rem; opacity: 0.7; }
924 + .meta { font-size: var(--text-note); opacity: 0.7; }
925 925 .nowrap { white-space: nowrap; }
926 926 .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
927 927 .text-center { text-align: center; }
@@ -960,15 +960,15 @@
960 960 /* Compact button sizes. Canonical: .small (broad use, 0.25rem 0.6rem 0.8rem).
961 961 The tiny / row-btn / cart-row-btn aliases are visually equivalent, within
962 962 sub-pixel of each other in the original templates, and folded into .small. */
963 - .small { padding: var(--gap-bound) var(--gap-group); font-size: 0.8rem; }
963 + .small { padding: var(--gap-bound) var(--gap-group); font-size: var(--text-fine); }
964 964
965 965 /* Canonical empty-state primitive. Use modifiers for tight/sized contexts.
966 966 Markup: <div class="empty-state">…</div> (optionally with .empty-state--compact
967 967 inside dropdowns or .empty-state--chart inside a fixed-height chart slot). */
968 968 .empty-state { text-align: center; padding: var(--gap-page); opacity: 0.6; }
969 - .empty-state--compact { padding: var(--gap-section); font-size: 0.9rem; }
969 + .empty-state--compact { padding: var(--gap-section); font-size: var(--text-note); }
970 970 .empty-state--chart { height: 200px; padding: 0; display: flex; align-items: center; justify-content: center; opacity: 0.5; }
971 - .empty-state-hint { font-family: var(--font-mono); font-size: 0.8rem; margin-top: var(--gap-peer); opacity: 0.6; }
971 + .empty-state-hint { font-family: var(--font-mono); font-size: var(--text-fine); margin-top: var(--gap-peer); opacity: 0.6; }
972 972
973 973 .tab-docs {
974 974 display: flex;
@@ -978,7 +978,7 @@
978 978
979 979 .tab-docs a {
980 980 font-family: var(--font-mono);
981 - font-size: 0.8rem;
981 + font-size: var(--text-fine);
982 982 opacity: 0.5;
983 983 transition: opacity 0.2s ease;
984 984 }
@@ -994,7 +994,7 @@
994 994 .badge {
995 995 display: inline-block;
996 996 padding: var(--gap-bound) var(--gap-peer);
997 - font-size: 0.75rem;
997 + font-size: var(--text-fine);
998 998 font-family: var(--font-mono);
999 999 background: var(--primary-dark);
1000 1000 color: var(--primary-light);
@@ -1067,14 +1067,14 @@
1067 1067 }
1068 1068 .ai-disclosure-label {
1069 1069 font-family: var(--font-mono);
1070 - font-size: 0.75rem;
1070 + font-size: var(--text-fine);
1071 1071 text-transform: uppercase;
1072 1072 letter-spacing: 0.05em;
1073 1073 color: var(--content-muted);
1074 1074 margin-bottom: var(--gap-bound);
1075 1075 }
1076 1076 .ai-disclosure-text {
1077 - font-size: 0.9rem;
1077 + font-size: var(--text-note);
1078 1078 color: var(--content);
1079 1079 }
1080 1080
@@ -1083,7 +1083,7 @@
1083 1083 and use the explicit filter when they care. */
1084 1084 .discover-row-ai-tier {
1085 1085 font-family: var(--font-mono);
1086 - font-size: 0.75rem;
1086 + font-size: var(--text-fine);
1087 1087 color: var(--content-muted);
1088 1088 }
1089 1089
@@ -1096,7 +1096,7 @@
1096 1096 background: var(--primary-dark);
1097 1097 color: var(--primary-light);
1098 1098 padding: var(--gap-bound) var(--gap-peer);
1099 - font-size: 0.75rem;
1099 + font-size: var(--text-fine);
1100 1100 margin-right: var(--gap-bound);
1101 1101 }
1102 1102
@@ -1115,7 +1115,7 @@
1115 1115 align-items: center;
1116 1116 gap: var(--gap-peer);
1117 1117 padding: var(--gap-bound) var(--gap-peer);
1118 - font-size: 0.85rem;
1118 + font-size: var(--text-note);
1119 1119 }
1120 1120
1121 1121 .tag-input .tag button {
@@ -1124,7 +1124,7 @@
1124 1124 color: var(--primary-light);
1125 1125 cursor: pointer;
1126 1126 padding: 0;
1127 - font-size: 1rem;
1127 + font-size: var(--text-body);
1128 1128 }
1129 1129
1130 1130 /* ===========================================
@@ -1177,20 +1177,20 @@
1177 1177 .fork-card { padding: var(--gap-pane); display: flex; flex-direction: column; }
1178 1178
1179 1179 .card-title {
1180 - font-size: 1.2rem;
1180 + font-size: var(--text-subhead);
1181 1181 margin-bottom: var(--gap-peer);
1182 1182 font-family: var(--font-heading);
1183 1183 }
1184 1184
1185 1185 .card-meta {
1186 - font-size: 0.85rem;
1186 + font-size: var(--text-note);
1187 1187 color: var(--content-muted);
1188 1188 margin-bottom: var(--gap-peer);
1189 1189 font-family: var(--font-mono);
1190 1190 }
1191 1191
1192 1192 .card-description {
1193 - font-size: 0.9rem;
1193 + font-size: var(--text-note);
1194 1194 opacity: 0.8;
1195 1195 font-family: var(--font-body);
1196 1196 }
@@ -1222,28 +1222,28 @@
1222 1222 .stat-box .number {
1223 1223 font-family: var(--font-heading);
1224 1224 font-weight: bold;
1225 - font-size: 1.5rem;
1225 + font-size: var(--text-head);
1226 1226 }
1227 1227
1228 1228 .stat-box .label {
1229 - font-size: 0.8rem;
1229 + font-size: var(--text-fine);
1230 1230 opacity: 0.7;
1231 1231 }
1232 1232
1233 1233 /* .stat-card base recipe defined above with .card-muted */
1234 1234
1235 1235 .stat-label {
1236 - font-size: 0.85rem;
1236 + font-size: var(--text-note);
1237 1237 opacity: 0.7;
1238 1238 margin-bottom: var(--gap-bound);
1239 1239 }
1240 1240
1241 1241 .stat-value {
1242 - font-size: 1.5rem;
1242 + font-size: var(--text-head);
1243 1243 }
1244 1244
1245 1245 .stat-change {
1246 - font-size: 0.85rem;
1246 + font-size: var(--text-note);
1247 1247 opacity: 0.6;
1248 1248 }
1249 1249
@@ -1268,14 +1268,14 @@
1268 1268 }
1269 1269
1270 1270 .filter-bar > .label {
1271 - font-size: 0.85rem;
1271 + font-size: var(--text-note);
1272 1272 opacity: 0.7;
1273 1273 margin-right: var(--gap-peer);
1274 1274 }
1275 1275
1276 1276 .filter-bar button {
1277 1277 padding: var(--gap-bound) var(--gap-section);
1278 - font-size: 0.85rem;
1278 + font-size: var(--text-note);
1279 1279 }
1280 1280
1281 1281 /* ===========================================
@@ -1296,20 +1296,20 @@
1296 1296
1297 1297 .discussion-section h3 {
1298 1298 font-family: var(--font-heading);
1299 - font-size: 1.25rem;
1299 + font-size: var(--text-subhead);
1300 1300 margin: 0 0 var(--gap-peer);
1301 1301 }
1302 1302
1303 1303 .discussion-section p {
1304 1304 margin: 0 0 var(--gap-section);
1305 1305 color: var(--content-muted);
1306 - font-size: 0.875rem;
1306 + font-size: var(--text-note);
1307 1307 }
1308 1308
1309 1309 .discussion-section a {
1310 1310 color: var(--action);
1311 1311 text-decoration: none;
1312 - font-size: 0.875rem;
1312 + font-size: var(--text-note);
1313 1313 }
1314 1314
1315 1315 /* ===========================================
@@ -1335,12 +1335,12 @@
1335 1335 background: var(--surface-sunken);
1336 1336 padding: var(--gap-section);
1337 1337 margin-bottom: var(--gap-section);
1338 - font-size: 0.9rem;
1338 + font-size: var(--text-note);
1339 1339 font-family: var(--font-body);
1340 1340 }
1341 1341
1342 1342 .info-box h3 {
1343 - font-size: 1rem;
1343 + font-size: var(--text-body);
1344 1344 font-weight: normal;
1345 1345 margin-bottom: var(--gap-peer);
1346 1346 }
@@ -1364,7 +1364,7 @@
1364 1364 color: var(--primary-light);
1365 1365 padding: var(--gap-section);
1366 1366 margin-bottom: var(--gap-section);
1367 - font-size: 0.9rem;
1367 + font-size: var(--text-note);
1368 1368 font-family: var(--font-body);
1369 1369 }
1370 1370
@@ -1376,7 +1376,7 @@
1376 1376 border: 1px solid var(--danger);
1377 1377 border-radius: 2px;
1378 1378 text-align: center;
1379 - font-size: 14px;
1379 + font-size: var(--text-note);
1380 1380 display: none;
1381 1381 }
1382 1382
@@ -1398,7 +1398,7 @@
1398 1398 }
1399 1399
1400 1400 .error-status {
1401 - font-size: 0.85rem;
1401 + font-size: var(--text-note);
1402 1402 font-weight: 600;
1403 1403 letter-spacing: 0.08em;
1404 1404 text-transform: uppercase;
@@ -1407,7 +1407,7 @@
1407 1407 }
1408 1408
1409 1409 .error-page-message {
1410 - font-size: 1.5rem;
1410 + font-size: var(--text-head);
1411 1411 line-height: 1.4;
1412 1412 color: var(--content);
1413 1413 margin-bottom: var(--gap-page);
@@ -1463,19 +1463,19 @@
1463 1463 display: flex;
1464 1464 align-items: center;
1465 1465 justify-content: center;
1466 - font-size: 3rem;
1466 + font-size: var(--text-hero);
1467 1467 opacity: 0.2;
1468 1468 }
1469 1469
1470 1470 .buy-page h1 {
1471 1471 text-align: left;
1472 - font-size: 1.4rem;
1472 + font-size: var(--text-head);
1473 1473 margin-bottom: var(--gap-bound);
1474 1474 }
1475 1475
1476 1476 .buy-page .creator {
1477 1477 font-family: var(--font-mono);
1478 - font-size: 0.85rem;
1478 + font-size: var(--text-note);
1479 1479 opacity: 0.6;
1480 1480 margin-bottom: var(--gap-pane);
1481 1481 }
@@ -1486,12 +1486,12 @@
1486 1486
1487 1487 .buy-page .price {
1488 1488 font-family: var(--font-mono);
1489 - font-size: 1.3rem;
1489 + font-size: var(--text-subhead);
1490 1490 margin-bottom: var(--gap-pane);
1491 1491 }
1492 1492
1493 1493 .buy-page .description {
1494 - font-size: 0.9rem;
1494 + font-size: var(--text-note);
1495 1495 line-height: 1.5;
1496 1496 opacity: 0.8;
1497 1497 margin-bottom: var(--gap-pane);
@@ -1507,7 +1507,7 @@
1507 1507 color: var(--primary-light);
1508 1508 border: none;
1509 1509 border-radius: 6px;
1510 - font-size: 1rem;
1510 + font-size: var(--text-body);
1511 1511 font-weight: 600;
1512 1512 cursor: pointer;
1513 1513 text-align: center;
@@ -1536,11 +1536,11 @@
1536 1536 padding: 8px;
1537 1537 border: 1px solid var(--border);
1538 1538 border-radius: var(--radius-sm);
1539 - font-size: 1rem;
1539 + font-size: var(--text-body);
1540 1540 }
1541 1541
1542 1542 .buy-page .note {
1543 - font-size: 0.8rem;
1543 + font-size: var(--text-fine);
1544 1544 opacity: 0.5;
1545 1545 text-align: center;
1546 1546 margin-top: var(--gap-section);
@@ -1555,7 +1555,7 @@
1555 1555 margin-top: var(--gap-pane);
1556 1556 padding-top: var(--gap-section);
1557 1557 border-top: 1px solid var(--border);
1558 - font-size: 0.8rem;
1558 + font-size: var(--text-fine);
1559 1559 opacity: 0.5;
1560 1560 }
1561 1561
@@ -1578,7 +1578,7 @@
1578 1578 border: none;
1579 1579 padding: var(--gap-group) var(--gap-section);
1580 1580 cursor: pointer;
1581 - font-size: 0.95rem;
1581 + font-size: var(--text-body);
1582 1582 opacity: 0.6;
1583 1583 border-bottom: 2px solid transparent;
1584 1584 font-family: var(--font-body);
@@ -1615,7 +1615,7 @@
1615 1615 overflow-x: auto;
1616 1616 margin-bottom: var(--gap-section);
1617 1617 }
1618 - .section-panel code { font-size: 0.9rem; }
1618 + .section-panel code { font-size: var(--text-note); }
1619 1619
1620 1620 /* Item detail page (templates/pages/item.html). Scoped under .item-page
1621 1621 body class so the .item-title / .item-meta / .item-price / .item-footer
@@ -1630,12 +1630,12 @@
1630 1630 .item-page .item-layout.no-media { grid-template-columns: 1fr; }
1631 1631
1632 1632 .item-page .item-title {
1633 - font-size: 2rem;
1633 + font-size: var(--text-title);
1634 1634 margin-bottom: var(--gap-peer);
1635 1635 }
1636 1636
1637 1637 .item-page .item-creator {
1638 - font-size: 1rem;
1638 + font-size: var(--text-body);
1639 1639 opacity: 0.7;
1640 1640 margin-bottom: var(--gap-pane);
1641 1641 }
@@ -1643,7 +1643,7 @@
1643 1643 .item-page .item-creator a { color: var(--content); }
1644 1644
1645 1645 .item-page .item-price {
1646 - font-size: 2.5rem;
1646 + font-size: var(--text-display);
1647 1647 margin-bottom: var(--gap-pane);
1648 1648 }
1649 1649
@@ -1656,7 +1656,7 @@
1656 1656 border-bottom: 1px solid var(--border);
Lines truncated