max / makenotwork
- Co-Authored-By
- Claude Opus 5 (1M context) <noreply@anthropic.com>
1 file changed,
+66 insertions,
-66 deletions
| @@ -261,7 +261,7 @@ | |||
| 261 | 261 | ||
| 262 | 262 | /* Padded page layout for most content pages */ | |
| 263 | 263 | .padded-page { | |
| 264 | - | padding: 1.5rem; | |
| 264 | + | padding: var(--gap-pane); | |
| 265 | 265 | } | |
| 266 | 266 | ||
| 267 | 267 | /* Centered page layout for landing, login, signup */ | |
| @@ -271,7 +271,7 @@ | |||
| 271 | 271 | justify-content: center; | |
| 272 | 272 | align-items: center; | |
| 273 | 273 | min-height: 100vh; | |
| 274 | - | gap: 2rem; | |
| 274 | + | gap: var(--gap-page); | |
| 275 | 275 | } | |
| 276 | 276 | ||
| 277 | 277 | .centered-page h1 { | |
| @@ -360,7 +360,7 @@ | |||
| 360 | 360 | .container { | |
| 361 | 361 | max-width: 1200px; | |
| 362 | 362 | margin: 0 auto; | |
| 363 | - | padding: 2rem; | |
| 363 | + | padding: var(--gap-page); | |
| 364 | 364 | } | |
| 365 | 365 | .container--narrow { max-width: 600px; } | |
| 366 | 366 | .container--medium { max-width: 800px; } | |
| @@ -407,7 +407,7 @@ | |||
| 407 | 407 | background: var(--primary-dark); | |
| 408 | 408 | color: var(--primary-light); | |
| 409 | 409 | border: none; | |
| 410 | - | padding: 0.75rem 1.5rem; | |
| 410 | + | padding: var(--gap-section) var(--gap-pane); | |
| 411 | 411 | font-family: inherit; | |
| 412 | 412 | font-size: 1rem; | |
| 413 | 413 | cursor: pointer; | |
| @@ -434,7 +434,7 @@ | |||
| 434 | 434 | background: var(--surface-sunken); | |
| 435 | 435 | color: var(--content); | |
| 436 | 436 | border: none; | |
| 437 | - | padding: 0.75rem 1.5rem; | |
| 437 | + | padding: var(--gap-section) var(--gap-pane); | |
| 438 | 438 | font-family: var(--font-mono); | |
| 439 | 439 | font-size: 1rem; | |
| 440 | 440 | cursor: pointer; | |
| @@ -457,7 +457,7 @@ | |||
| 457 | 457 | background: var(--danger); | |
| 458 | 458 | color: var(--primary-light); | |
| 459 | 459 | border: none; | |
| 460 | - | padding: 0.75rem 1.5rem; | |
| 460 | + | padding: var(--gap-section) var(--gap-pane); | |
| 461 | 461 | font-family: var(--font-mono); | |
| 462 | 462 | font-size: 1rem; | |
| 463 | 463 | cursor: pointer; | |
| @@ -510,12 +510,12 @@ | |||
| 510 | 510 | uses currentColor to inherit toast tone. | |
| 511 | 511 | These are documented variants, not deprecation targets. */ | |
| 512 | 512 | .btn--large { | |
| 513 | - | padding: 1rem 2.25rem; | |
| 513 | + | padding: var(--gap-section) var(--gap-page); | |
| 514 | 514 | font-size: 1.125rem; | |
| 515 | 515 | } | |
| 516 | 516 | ||
| 517 | 517 | .btn--icon { | |
| 518 | - | padding: var(--space-1) var(--space-2); | |
| 518 | + | padding: var(--gap-bound) var(--gap-peer); | |
| 519 | 519 | font-size: 0.85rem; | |
| 520 | 520 | line-height: 1; | |
| 521 | 521 | min-width: 1.75rem; | |
| @@ -579,14 +579,14 @@ | |||
| 579 | 579 | form { | |
| 580 | 580 | display: flex; | |
| 581 | 581 | flex-direction: column; | |
| 582 | - | gap: 1rem; | |
| 582 | + | gap: var(--gap-section); | |
| 583 | 583 | width: 100%; | |
| 584 | 584 | } | |
| 585 | 585 | ||
| 586 | 586 | .form-container { | |
| 587 | 587 | max-width: 400px; | |
| 588 | 588 | background: var(--surface-overlay); | |
| 589 | - | padding: 2rem; | |
| 589 | + | padding: var(--gap-page); | |
| 590 | 590 | } | |
| 591 | 591 | ||
| 592 | 592 | label { | |
| @@ -605,7 +605,7 @@ | |||
| 605 | 605 | width: 100%; | |
| 606 | 606 | background: var(--surface-sunken); | |
| 607 | 607 | border: 1px solid var(--border); | |
| 608 | - | padding: 0.75rem; | |
| 608 | + | padding: var(--gap-section); | |
| 609 | 609 | font-family: var(--font-mono); | |
| 610 | 610 | font-size: 0.9rem; | |
| 611 | 611 | color: var(--content); | |
| @@ -660,12 +660,12 @@ | |||
| 660 | 660 | } | |
| 661 | 661 | ||
| 662 | 662 | .form-group { | |
| 663 | - | margin-bottom: 1.5rem; | |
| 663 | + | margin-bottom: var(--gap-pane); | |
| 664 | 664 | } | |
| 665 | 665 | ||
| 666 | 666 | .form-group label { | |
| 667 | 667 | display: block; | |
| 668 | - | margin-bottom: 0.5rem; | |
| 668 | + | margin-bottom: var(--gap-peer); | |
| 669 | 669 | font-size: 0.9rem; | |
| 670 | 670 | } | |
| 671 | 671 | ||
| @@ -678,13 +678,13 @@ | |||
| 678 | 678 | .form-row { | |
| 679 | 679 | display: grid; | |
| 680 | 680 | grid-template-columns: 1fr 1fr; | |
| 681 | - | gap: 1rem; | |
| 681 | + | gap: var(--gap-section); | |
| 682 | 682 | } | |
| 683 | 683 | ||
| 684 | 684 | .hint { | |
| 685 | 685 | font-size: 0.85rem; | |
| 686 | 686 | opacity: 0.6; | |
| 687 | - | margin-top: 0.5rem; | |
| 687 | + | margin-top: var(--gap-peer); | |
| 688 | 688 | } | |
| 689 | 689 | ||
| 690 | 690 | /* Field-level validation error, paired with .form-group--error. | |
| @@ -702,7 +702,7 @@ | |||
| 702 | 702 | .field-error { | |
| 703 | 703 | font-size: 0.85rem; | |
| 704 | 704 | color: var(--danger); | |
| 705 | - | margin-top: var(--space-2); | |
| 705 | + | margin-top: var(--gap-peer); | |
| 706 | 706 | } | |
| 707 | 707 | ||
| 708 | 708 | /* Loading skeleton placeholder. | |
| @@ -715,16 +715,16 @@ | |||
| 715 | 715 | ||
| 716 | 716 | .loading-skeleton--row { | |
| 717 | 717 | height: 1.25rem; | |
| 718 | - | margin: var(--space-2) 0; | |
| 718 | + | margin: var(--gap-peer) 0; | |
| 719 | 719 | } | |
| 720 | 720 | ||
| 721 | 721 | .loading-skeleton--card { | |
| 722 | 722 | height: 8rem; | |
| 723 | - | margin: var(--space-3) 0; | |
| 723 | + | margin: var(--gap-section) 0; | |
| 724 | 724 | } | |
| 725 | 725 | ||
| 726 | 726 | .loading-skeleton--list .loading-skeleton--row + .loading-skeleton--row { | |
| 727 | - | margin-top: var(--space-2); | |
| 727 | + | margin-top: var(--gap-peer); | |
| 728 | 728 | } | |
| 729 | 729 | ||
| 730 | 730 | @keyframes skeleton-pulse { | |
| @@ -736,24 +736,24 @@ | |||
| 736 | 736 | .checkbox-group { | |
| 737 | 737 | display: flex; | |
| 738 | 738 | align-items: start; | |
| 739 | - | gap: 0.75rem; | |
| 739 | + | gap: var(--gap-section); | |
| 740 | 740 | cursor: pointer; | |
| 741 | 741 | transition: background 0.2s ease; | |
| 742 | - | margin-bottom: 0.5rem; | |
| 742 | + | margin-bottom: var(--gap-peer); | |
| 743 | 743 | } | |
| 744 | 744 | ||
| 745 | 745 | .checkbox-group input[type="checkbox"] { | |
| 746 | 746 | width: auto; | |
| 747 | - | margin-top: 0.25rem; | |
| 748 | - | margin-bottom: 0.25rem; | |
| 747 | + | margin-top: var(--gap-bound); | |
| 748 | + | margin-bottom: var(--gap-bound); | |
| 749 | 749 | cursor: pointer; | |
| 750 | 750 | } | |
| 751 | 751 | /* Radio group */ | |
| 752 | 752 | .radio-group { | |
| 753 | 753 | display: flex; | |
| 754 | 754 | flex-direction: column; | |
| 755 | - | gap: 0.75rem; | |
| 756 | - | margin-top: 0.5rem; | |
| 755 | + | gap: var(--gap-section); | |
| 756 | + | margin-top: var(--gap-peer); | |
| 757 | 757 | } | |
| 758 | 758 | /* =========================================== | |
| 759 | 759 | TABS | |
| @@ -770,7 +770,7 @@ | |||
| 770 | 770 | background: var(--surface-sunken); | |
| 771 | 771 | color: var(--content); | |
| 772 | 772 | border: none; | |
| 773 | - | padding: 0.75rem 2rem; | |
| 773 | + | padding: var(--gap-section) var(--gap-page); | |
| 774 | 774 | font-family: var(--font-mono); | |
| 775 | 775 | font-size: 1rem; | |
| 776 | 776 | cursor: pointer; | |
| @@ -814,7 +814,7 @@ | |||
| 814 | 814 | display: block; | |
| 815 | 815 | width: 100%; | |
| 816 | 816 | text-align: left; | |
| 817 | - | padding: 0.6rem 1rem; | |
| 817 | + | padding: var(--gap-group) var(--gap-section); | |
| 818 | 818 | opacity: 0.7; | |
| 819 | 819 | } | |
| 820 | 820 | ||
| @@ -829,7 +829,7 @@ | |||
| 829 | 829 | .tab-content { | |
| 830 | 830 | display: none; | |
| 831 | 831 | background: var(--surface-overlay); | |
| 832 | - | padding: 2rem; | |
| 832 | + | padding: var(--gap-page); | |
| 833 | 833 | } | |
| 834 | 834 | ||
| 835 | 835 | .tab-content.active { | |
| @@ -845,7 +845,7 @@ | |||
| 845 | 845 | border-collapse: collapse; | |
| 846 | 846 | font-size: 0.9rem; | |
| 847 | 847 | font-family: var(--font-body); | |
| 848 | - | margin-bottom: 1rem; | |
| 848 | + | margin-bottom: var(--gap-section); | |
| 849 | 849 | } | |
| 850 | 850 | ||
| 851 | 851 | .data-table thead { | |
| @@ -854,7 +854,7 @@ | |||
| 854 | 854 | ||
| 855 | 855 | .data-table th { | |
| 856 | 856 | text-align: left; | |
| 857 | - | padding: 0.75rem 1rem; | |
| 857 | + | padding: var(--gap-section); | |
| 858 | 858 | font-weight: normal; | |
| 859 | 859 | } | |
| 860 | 860 | ||
| @@ -891,7 +891,7 @@ | |||
| 891 | 891 | } | |
| 892 | 892 | ||
| 893 | 893 | .data-table td { | |
| 894 | - | padding: 0.75rem 1rem; | |
| 894 | + | padding: var(--gap-section); | |
| 895 | 895 | border-top: 1px solid var(--border); | |
| 896 | 896 | } | |
| 897 | 897 | ||
| @@ -910,12 +910,12 @@ | |||
| 910 | 910 | } | |
| 911 | 911 | ||
| 912 | 912 | .compact-table th { | |
| 913 | - | padding: 0.5rem 0.75rem; | |
| 913 | + | padding: var(--gap-peer) var(--gap-section); | |
| 914 | 914 | text-align: left; | |
| 915 | 915 | } | |
| 916 | 916 | ||
| 917 | 917 | .compact-table td { | |
| 918 | - | padding: 0.75rem; | |
| 918 | + | padding: var(--gap-section); | |
| 919 | 919 | } | |
| 920 | 920 | ||
| 921 | 921 | .compact-table tbody tr { | |
| @@ -985,7 +985,7 @@ | |||
| 985 | 985 | .tab-docs { | |
| 986 | 986 | display: flex; | |
| 987 | 987 | justify-content: flex-end; | |
| 988 | - | margin-bottom: 1rem; | |
| 988 | + | margin-bottom: var(--gap-section); | |
| 989 | 989 | } | |
| 990 | 990 | ||
| 991 | 991 | .tab-docs a { | |
| @@ -1005,7 +1005,7 @@ | |||
| 1005 | 1005 | ||
| 1006 | 1006 | .badge { | |
| 1007 | 1007 | display: inline-block; | |
| 1008 | - | padding: 0.2rem 0.5rem; | |
| 1008 | + | padding: var(--gap-bound) var(--gap-peer); | |
| 1009 | 1009 | font-size: 0.75rem; | |
| 1010 | 1010 | font-family: var(--font-mono); | |
| 1011 | 1011 | background: var(--primary-dark); | |
| @@ -1068,12 +1068,12 @@ | |||
| 1068 | 1068 | } | |
| 1069 | 1069 | ||
| 1070 | 1070 | .item-ai-tier { | |
| 1071 | - | margin: 0.25rem 0 0.75rem; | |
| 1071 | + | margin: var(--gap-bound) 0 var(--gap-section); | |
| 1072 | 1072 | } | |
| 1073 | 1073 | ||
| 1074 | 1074 | .ai-disclosure { | |
| 1075 | - | margin: 0.75rem 0; | |
| 1076 | - | padding: 0.75rem 1rem; | |
| 1075 | + | margin: var(--gap-section) 0; | |
| 1076 | + | padding: var(--gap-section); | |
| 1077 | 1077 | background: var(--surface-sunken); | |
| 1078 | 1078 | border-left: 3px solid var(--warning); | |
| 1079 | 1079 | } | |
| @@ -1083,7 +1083,7 @@ | |||
| 1083 | 1083 | text-transform: uppercase; | |
| 1084 | 1084 | letter-spacing: 0.05em; | |
| 1085 | 1085 | color: var(--content-muted); | |
| 1086 | - | margin-bottom: 0.25rem; | |
| 1086 | + | margin-bottom: var(--gap-bound); | |
| 1087 | 1087 | } | |
| 1088 | 1088 | .ai-disclosure-text { | |
| 1089 | 1089 | font-size: 0.9rem; | |
| @@ -1107,26 +1107,26 @@ | |||
| 1107 | 1107 | display: inline-block; | |
| 1108 | 1108 | background: var(--primary-dark); | |
| 1109 | 1109 | color: var(--primary-light); | |
| 1110 | - | padding: 0.2rem 0.4rem; | |
| 1110 | + | padding: var(--gap-bound) var(--gap-peer); | |
| 1111 | 1111 | font-size: 0.75rem; | |
| 1112 | - | margin-right: 0.25rem; | |
| 1112 | + | margin-right: var(--gap-bound); | |
| 1113 | 1113 | } | |
| 1114 | 1114 | ||
| 1115 | 1115 | .tag-input { | |
| 1116 | 1116 | background: var(--surface-sunken); | |
| 1117 | - | padding: 0.5rem; | |
| 1118 | - | margin-bottom: 0.5rem; | |
| 1117 | + | padding: var(--gap-peer); | |
| 1118 | + | margin-bottom: var(--gap-peer); | |
| 1119 | 1119 | display: flex; | |
| 1120 | 1120 | flex-wrap: wrap; | |
| 1121 | - | gap: 0.5rem; | |
| 1121 | + | gap: var(--gap-peer); | |
| 1122 | 1122 | min-height: 40px; | |
| 1123 | 1123 | } | |
| 1124 | 1124 | ||
| 1125 | 1125 | .tag-input .tag { | |
| 1126 | 1126 | display: flex; | |
| 1127 | 1127 | align-items: center; | |
| 1128 | - | gap: 0.5rem; | |
| 1129 | - | padding: 0.25rem 0.5rem; | |
| 1128 | + | gap: var(--gap-peer); | |
| 1129 | + | padding: var(--gap-bound) var(--gap-peer); | |
| 1130 | 1130 | font-size: 0.85rem; | |
| 1131 | 1131 | } | |
| 1132 | 1132 | ||
| @@ -1155,8 +1155,8 @@ | |||
| 1155 | 1155 | their own pace. */ | |
| 1156 | 1156 | .card { | |
| 1157 | 1157 | background: var(--surface-overlay); | |
| 1158 | - | padding: 1.5rem; | |
| 1159 | - | margin-bottom: 1rem; | |
| 1158 | + | padding: var(--gap-pane); | |
| 1159 | + | margin-bottom: var(--gap-section); | |
| 1160 | 1160 | text-decoration: none; | |
| 1161 | 1161 | color: var(--content); | |
| 1162 | 1162 | display: block; | |
| @@ -1172,7 +1172,7 @@ | |||
| 1172 | 1172 | /* Muted card primitive. */ | |
| 1173 | 1173 | .card-muted { | |
| 1174 | 1174 | background: var(--surface-sunken); | |
| 1175 | - | padding: 1.5rem; | |
| 1175 | + | padding: var(--gap-pane); | |
| 1176 | 1176 | } | |
| 1177 | 1177 | /* Bordered card (.card--bordered alias for .feature-card, .tier-card, .use-case-card, .fork-card). */ | |
| 1178 | 1178 | .card--bordered, | |
| @@ -1181,7 +1181,7 @@ | |||
| 1181 | 1181 | .use-case-card, | |
| 1182 | 1182 | .fork-card { | |
| 1183 | 1183 | background: transparent; | |
| 1184 | - | padding: 1rem; | |
| 1184 | + | padding: var(--gap-section); | |
| 1185 | 1185 | border: 1px solid var(--border); | |
| 1186 | 1186 | margin-bottom: 0; | |
| 1187 | 1187 | } | |
| @@ -1190,14 +1190,14 @@ | |||
| 1190 | 1190 | ||
| 1191 | 1191 | .card-title { | |
| 1192 | 1192 | font-size: 1.2rem; | |
| 1193 | - | margin-bottom: 0.5rem; | |
| 1193 | + | margin-bottom: var(--gap-peer); | |
| 1194 | 1194 | font-family: var(--font-heading); | |
| 1195 | 1195 | } | |
| 1196 | 1196 | ||
| 1197 | 1197 | .card-meta { | |
| 1198 | 1198 | font-size: 0.85rem; | |
| 1199 | 1199 | color: var(--content-muted); | |
| 1200 | - | margin-bottom: 0.5rem; | |
| 1200 | + | margin-bottom: var(--gap-peer); | |
| 1201 | 1201 | font-family: var(--font-mono); | |
| 1202 | 1202 | } | |
| 1203 | 1203 | ||
| @@ -1214,19 +1214,19 @@ | |||
| 1214 | 1214 | .stats-grid { | |
| 1215 | 1215 | display: grid; | |
| 1216 | 1216 | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| 1217 | - | gap: 1rem; | |
| 1218 | - | margin-bottom: 1.5rem; | |
| 1217 | + | gap: var(--gap-section); | |
| 1218 | + | margin-bottom: var(--gap-pane); | |
| 1219 | 1219 | } | |
| 1220 | 1220 | ||
| 1221 | 1221 | .stats-row { | |
| 1222 | 1222 | display: flex; | |
| 1223 | - | gap: 1.5rem; | |
| 1224 | - | margin: 1.5rem 0; | |
| 1223 | + | gap: var(--gap-pane); | |
| 1224 | + | margin: var(--gap-pane) 0; | |
| 1225 | 1225 | } | |
| 1226 | 1226 | ||
| 1227 | 1227 | .stat-box { | |
| 1228 | 1228 | background: var(--surface-overlay); | |
| 1229 | - | padding: 1rem 1.5rem; | |
| 1229 | + | padding: var(--gap-section) var(--gap-pane); | |
| 1230 | 1230 | flex: 1; | |
| 1231 | 1231 | text-align: center; | |
| 1232 | 1232 | } | |
| @@ -1247,7 +1247,7 @@ | |||
| 1247 | 1247 | .stat-label { | |
| 1248 | 1248 | font-size: 0.85rem; | |
| 1249 | 1249 | opacity: 0.7; | |
| 1250 | - | margin-bottom: 0.25rem; | |
| 1250 | + | margin-bottom: var(--gap-bound); | |
| 1251 | 1251 | } | |
| 1252 | 1252 | ||
| 1253 | 1253 | .stat-value { | |
| @@ -1273,8 +1273,8 @@ | |||
| 1273 | 1273 | ||
| 1274 | 1274 | .filter-bar { | |
| 1275 | 1275 | display: flex; | |
| 1276 | - | gap: 0.5rem; | |
| 1277 | - | margin: 1.5rem 0; | |
| 1276 | + | gap: var(--gap-peer); | |
| 1277 | + | margin: var(--gap-pane) 0; | |
| 1278 | 1278 | flex-wrap: wrap; | |
| 1279 | 1279 | align-items: center; | |
| 1280 | 1280 | } | |
| @@ -1282,11 +1282,11 @@ | |||
| 1282 | 1282 | .filter-bar > .label { | |
| 1283 | 1283 | font-size: 0.85rem; | |
| 1284 | 1284 | opacity: 0.7; | |
| 1285 | - | margin-right: 0.5rem; | |
| 1285 | + | margin-right: var(--gap-peer); | |
| 1286 | 1286 | } | |
| 1287 | 1287 | ||
| 1288 | 1288 | .filter-bar button { | |
| 1289 | - | padding: 0.3rem 0.8rem; | |
| 1289 | + | padding: var(--gap-bound) var(--gap-section); | |
| 1290 | 1290 | font-size: 0.85rem; | |
| 1291 | 1291 | } | |
| 1292 | 1292 | ||
| @@ -1300,8 +1300,8 @@ | |||
| 1300 | 1300 | parent dictate width, article-page already constrains via | |
| 1301 | 1301 | .article-container; player pages have their own narrow layout. */ | |
| 1302 | 1302 | .discussion-section { | |
| 1303 | - | margin: 2rem 0; | |
| 1304 | - | padding: 1.5rem; | |
| 1303 | + | margin: var(--gap-page) 0; | |
| 1304 | + | padding: var(--gap-pane); | |
| 1305 | 1305 | border: 1px solid var(--border); | |
| 1306 | 1306 | font-family: var(--font-mono); | |
| 1307 | 1307 | } | |
| @@ -1309,11 +1309,11 @@ | |||
| 1309 | 1309 | .discussion-section h3 { | |
| 1310 | 1310 | font-family: var(--font-heading); | |
| 1311 | 1311 | font-size: 1.25rem; | |
| 1312 | - | margin: 0 0 0.5rem; | |
| 1312 | + | margin: 0 0 var(--gap-peer); | |
| 1313 | 1313 | } | |
| 1314 | 1314 | ||
| 1315 | 1315 | .discussion-section p { | |
| 1316 | - | margin: 0 0 0.75rem; | |
| 1316 | + | margin: 0 0 var(--gap-section); | |
| 1317 | 1317 | color: var(--content-muted); | |
| 1318 | 1318 | font-size: 0.875rem; | |
| 1319 | 1319 | } |