feat(design): add tokens and typography foundation (#181)
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Juan Manuel Servera committed
May 25, 2026 at 21:10 UTC
8c0a2bc9b66be31f70789995750be44400b29a82
19 files changed
+1372
-98
.squad/agents/amy/history.md
+3
@@ -9,3 +9,6 @@
9
- Weekly publication flows from analyzed markdown in `data/analyzed/` into archetype-compatible Hugo pages in `content/weekly/`, then into the Pages build artifact.
10
- `scripts/generate_content.py` should preserve the analysis body while dropping analyzer-only frontmatter fields that do not belong in published content.
11
- Frontend changes should assume the weekly brief is an editorial article first and a repo reference list second.
12
+- 2026-05-25 Phase 1 redesign foundation: tokens live in `assets/css/tokens.css`, and Hugo loads them before PaperMod-compatible CSS from `layouts/partials/head.html`.
13
+- 2026-05-25 Project-level `assets/css/core/` and `assets/css/common/` files override PaperMod submodule styles; keep the submodule clean and put SquadScope presentation changes in root assets.
14
+- 2026-05-25 Inter and JetBrains Mono are loaded with preload + stylesheet links; existing PaperMod variables are mapped to new `--color-*`, `--text-*`, and `--space-*` tokens for compatibility.
.squad/decisions/inbox/amy-phase1-implementation.md
new
+25
@@ -0,0 +1,25 @@
1
+# Amy Phase 1 Design Foundation Implementation
2
+
3
+**Date:** 2026-05-25
4
+**Author:** Amy (Frontend Developer)
5
+**Status:** Implemented
6
+
7
+## Decision
8
+
9
+Phase 1 tokens and typography are implemented as a Hugo asset-pipeline foundation without changing page layouts.
10
+
11
+## File locations
12
+
13
+- `assets/css/tokens.css` is the design-system entry point for color, type, spacing, radius, shadow, and line-height tokens.
14
+- `layouts/partials/head.html` loads Inter and JetBrains Mono from Google Fonts using preload + stylesheet links, then includes `tokens.css` before the PaperMod-compatible CSS bundle.
15
+- `assets/css/core/theme-vars.css` maps PaperMod legacy variables to SquadScope tokens so existing templates continue to render.
16
+- `assets/css/core/reset.css` applies the base reset, body typography, heading scale, and monospace stack.
17
+- `assets/css/common/*.css`, `assets/css/extended/squadscope.css`, and `assets/css/badges.css` consume the token aliases while preserving existing layouts.
18
+
19
+## How to extend
20
+
21
+Future phases should add new tokens to `assets/css/tokens.css` first, then consume them through component or layout CSS. Keep semantic tokens stable (`--color-*`, `--text-*`, `--space-*`) and add component-specific variables only when a pattern repeats across multiple publishing surfaces.
22
+
23
+## Gotchas
24
+
25
+PaperMod lives as a submodule, so theme CSS changes should be copied into root-level `assets/css/` overrides rather than editing `themes/PaperMod` directly. Hugo resolves these project assets through the existing asset pipeline while leaving the third-party theme clean.
assets/css/badges.css
+13
-13
@@ -1,24 +1,24 @@
1
.badge {
2
display: inline-block;
3
- padding: 2px 8px;
4
- border-radius: 12px;
5
- font-size: 0.75rem;
3
+ padding: 2px var(--space-2);
4
+ border-radius: var(--radius-full);
5
+ font-size: var(--text-xs);
6
font-weight: 500;
7
- margin-left: 8px;
7
+ margin-left: var(--space-2);
8
vertical-align: middle;
9
}
10
.badge-press {
11
- background-color: #e3f2fd;
12
- color: #1565c0;
13
- border: 1px solid #90caf9;
11
+ background-color: var(--color-accent-muted);
12
+ color: var(--color-accent);
13
+ border: 1px solid color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
14
}
15
.badge-organic {
16
- background-color: #e8f5e9;
17
- color: #2e7d32;
18
- border: 1px solid #a5d6a7;
16
+ background-color: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
17
+ color: var(--color-success);
18
+ border: 1px solid color-mix(in srgb, var(--color-success) 35%, var(--color-border));
19
}
20
.badge-hype {
21
- background-color: #fff3e0;
22
- color: #e65100;
23
- border: 1px solid #ffcc80;
21
+ background-color: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
22
+ color: var(--color-danger);
23
+ border: 1px solid color-mix(in srgb, var(--color-danger) 35%, var(--color-border));
24
}
assets/css/common/archive.css
new
+44
@@ -0,0 +1,44 @@
1
+.archive-posts {
2
+ width: 100%;
3
+ font-size: var(--text-base);
4
+}
5
+
6
+.archive-year {
7
+ margin-top: 40px;
8
+}
9
+
10
+.archive-year:not(:last-of-type) {
11
+ border-bottom: 2px solid var(--border);
12
+}
13
+
14
+.archive-month {
15
+ display: flex;
16
+ align-items: flex-start;
17
+ padding: 10px 0;
18
+}
19
+
20
+.archive-month-header {
21
+ margin: 25px 0;
22
+ width: 200px;
23
+}
24
+
25
+.archive-month:not(:last-of-type) {
26
+ border-bottom: 1px solid var(--border);
27
+}
28
+
29
+.archive-entry {
30
+ position: relative;
31
+ padding: 5px;
32
+ margin: 10px 0;
33
+}
34
+
35
+.archive-entry-title {
36
+ margin: 5px 0;
37
+ font-weight: 400;
38
+}
39
+
40
+.archive-count,
41
+.archive-meta {
42
+ color: var(--color-text-muted);
43
+ font-size: var(--text-sm);
44
+}
assets/css/common/footer.css
new
+56
@@ -0,0 +1,56 @@
1
+.footer,
2
+.top-link {
3
+ font-size: var(--text-xs);
4
+ color: var(--color-text-muted);
5
+}
6
+
7
+.footer {
8
+ max-width: calc(var(--main-width) + var(--gap) * 2);
9
+ margin: auto;
10
+ padding: calc((var(--footer-height) - var(--gap)) / 2) var(--gap);
11
+ text-align: center;
12
+ line-height: 24px;
13
+}
14
+
15
+.footer span {
16
+ margin-inline-start: 1px;
17
+ margin-inline-end: 1px;
18
+}
19
+
20
+.footer span:last-child {
21
+ white-space: nowrap;
22
+}
23
+
24
+.footer a {
25
+ color: inherit;
26
+ text-underline-offset: 0.25rem;
27
+ text-decoration: underline;
28
+}
29
+
30
+.top-link {
31
+ position: fixed;
32
+ bottom: 4rem;
33
+ right: 2rem;
34
+ z-index: 99;
35
+ background: var(--tertiary);
36
+ width: 2.5rem;
37
+ height: 2.5rem;
38
+ padding: 10px;
39
+ border-radius: 64px;
40
+ transition: visibility .3s, opacity .3s cubic-bezier(0.4, 0, 1, 1);
41
+}
42
+
43
+.hidden {
44
+ visibility: hidden;
45
+ opacity: 0;
46
+}
47
+
48
+.top-link,
49
+.top-link svg {
50
+ filter: drop-shadow(0px 0px 0px var(--theme));
51
+}
52
+
53
+.footer a:hover,
54
+.top-link:hover {
55
+ color: var(--primary);
56
+}
assets/css/common/header.css
new
+101
@@ -0,0 +1,101 @@
1
+.header-nav {
2
+ display: flex;
3
+ flex-wrap: wrap;
4
+ justify-content: space-between;
5
+ max-width: calc(var(--nav-width) + var(--gap) * 2);
6
+ margin: auto;
7
+ line-height: var(--header-height);
8
+ padding: 0 var(--gap);
9
+ column-gap: var(--gap);
10
+}
11
+
12
+.header-nav a {
13
+ display: block;
14
+}
15
+
16
+.logo,
17
+.menu {
18
+ display: flex;
19
+}
20
+
21
+.logo {
22
+ align-items: center;
23
+ column-gap: 0.55rem;
24
+ flex-wrap: wrap;
25
+}
26
+
27
+.logo a {
28
+ font-size: var(--text-xl);
29
+ font-weight: 700;
30
+ display: flex;
31
+ align-items: center;
32
+ column-gap: 0.55rem;
33
+}
34
+
35
+.logo a img,
36
+.logo a svg {
37
+ pointer-events: none;
38
+ border-radius: 6px;
39
+}
40
+
41
+.theme-toggle {
42
+ padding: 0 0.4rem;
43
+}
44
+
45
+[data-theme="dark"] .moon {
46
+ display: none;
47
+}
48
+
49
+[data-theme="light"] .sun {
50
+ display: none;
51
+}
52
+
53
+.logo-switches {
54
+ display: inline-flex;
55
+ gap: 0.4rem;
56
+ align-items: inherit;
57
+ min-height: stretch;
58
+ flex-wrap: inherit;
59
+}
60
+
61
+.logo-switches>* {
62
+ min-height: inherit;
63
+ align-items: center;
64
+ display: inline-flex;
65
+}
66
+
67
+.nav-sep {
68
+ color: var(--secondary);
69
+}
70
+
71
+.lang-menu * {
72
+ display: inherit;
73
+ min-height: inherit;
74
+ align-items: inherit;
75
+}
76
+
77
+.lang-menu a {
78
+ font-size: var(--text-base);
79
+ font-weight: 500;
80
+ padding: 0 0.4rem;
81
+ display: inline-flex
82
+}
83
+
84
+.menu {
85
+ list-style: none;
86
+ word-break: keep-all;
87
+ overflow-x: auto;
88
+ white-space: nowrap;
89
+ column-gap: var(--gap);
90
+}
91
+
92
+.menu a {
93
+ font-size: var(--text-base);
94
+}
95
+
96
+.menu .active {
97
+ font-weight: 500;
98
+ text-decoration: underline;
99
+ text-underline-offset: 0.3rem;
100
+ text-decoration-thickness: 2px;
101
+}
assets/css/common/main.css
new
+67
@@ -0,0 +1,67 @@
1
+.main {
2
+ position: relative;
3
+ min-height: calc(100vh - var(--header-height) - var(--footer-height));
4
+ max-width: calc(var(--main-width) + var(--gap) * 2);
5
+ margin: auto;
6
+ padding: var(--gap);
7
+}
8
+
9
+.page-header h1 {
10
+ font-size: var(--text-3xl);
11
+ line-height: var(--leading-tight);
12
+}
13
+
14
+.pagination {
15
+ display: flex;
16
+}
17
+
18
+.pagination a {
19
+ color: var(--color-bg);
20
+ font-size: var(--text-xs);
21
+ line-height: 36px;
22
+ background: var(--color-text);
23
+ border-radius: var(--radius-full);
24
+ padding: 0 var(--space-3);
25
+}
26
+
27
+.pagination .next {
28
+ margin-inline-start: auto;
29
+}
30
+
31
+
32
+.social-icons a {
33
+ display: inline-flex;
34
+ padding: 10px;
35
+}
36
+
37
+.social-icons a svg {
38
+ height: 26px;
39
+ width: 26px;
40
+}
41
+
42
+code {
43
+ direction: ltr;
44
+}
45
+
46
+div.highlight,
47
+pre {
48
+ position: relative;
49
+}
50
+
51
+.copy-code {
52
+ display: none;
53
+ position: absolute;
54
+ top: var(--space-1);
55
+ right: var(--space-1);
56
+ color: var(--color-copy-text);
57
+ background: var(--color-copy-bg);
58
+ border-radius: var(--radius-sm);
59
+ padding: 0 var(--space-2);
60
+ font-size: var(--text-sm);
61
+ user-select: none;
62
+}
63
+
64
+div.highlight:hover .copy-code,
65
+pre:hover .copy-code {
66
+ display: block;
67
+}
assets/css/common/md-content.css
new
+265
@@ -0,0 +1,265 @@
1
+.md-content h3,
2
+.md-content h4,
3
+.md-content h5,
4
+.md-content h6 {
5
+ margin: 24px 0 16px;
6
+}
7
+
8
+.md-content h1 {
9
+ margin: var(--space-6) auto var(--space-5);
10
+ font-size: var(--text-3xl);
11
+ line-height: var(--leading-tight);
12
+ font-weight: 700;
13
+}
14
+
15
+.md-content h2 {
16
+ margin: var(--space-5) auto var(--space-4);
17
+ font-size: var(--text-2xl);
18
+ line-height: 1.25;
19
+ font-weight: 600;
20
+}
21
+
22
+.md-content h3 {
23
+ font-size: var(--text-xl);
24
+ line-height: 1.3;
25
+ font-weight: 600;
26
+}
27
+
28
+.md-content h4 {
29
+ font-size: var(--text-lg);
30
+ line-height: 1.35;
31
+ font-weight: 600;
32
+}
33
+
34
+.md-content h5 {
35
+ font-size: var(--text-sm);
36
+ line-height: var(--leading-normal);
37
+ font-weight: 600;
38
+}
39
+
40
+.md-content h6 {
41
+ font-size: var(--text-xs);
42
+ line-height: 1.4;
43
+ font-weight: 500;
44
+}
45
+
46
+.md-content a:not(.anchor) {
47
+ text-underline-offset: 0.3rem;
48
+ text-decoration: underline;
49
+}
50
+
51
+.md-content del {
52
+ text-decoration: line-through;
53
+}
54
+
55
+.md-content dl:not(:last-child),
56
+.md-content ol:not(:last-child),
57
+.md-content p:not(:last-child),
58
+.md-content figure:not(:last-child),
59
+.md-content ul:not(:last-child) {
60
+ margin-bottom: var(--content-gap);
61
+}
62
+
63
+.md-content ol,
64
+.md-content ul {
65
+ padding-inline-start: 1.25rem;
66
+}
67
+
68
+.md-content li {
69
+ margin-top: 0.3rem;
70
+}
71
+
72
+.md-content li p {
73
+ margin-bottom: 0;
74
+}
75
+
76
+.md-content dl {
77
+ display: flex;
78
+ flex-wrap: wrap;
79
+ margin: 0;
80
+}
81
+
82
+.md-content dt {
83
+ width: 25%;
84
+ font-weight: 700;
85
+}
86
+
87
+.md-content dd {
88
+ width: 75%;
89
+ margin-inline-start: 0;
90
+ padding-inline-start: 10px;
91
+}
92
+
93
+.md-content dd~dd,
94
+.md-content dt~dt {
95
+ margin-top: 10px;
96
+}
97
+
98
+.md-content table {
99
+ margin-bottom: var(--content-gap);
100
+}
101
+
102
+.md-content table th,
103
+.md-content table:not(.highlighttable, .highlight table, .gist .highlight) td {
104
+ min-width: 80px;
105
+ padding: 6px 13px;
106
+ line-height: 1.5;
107
+ border: 1px solid var(--border);
108
+}
109
+
110
+.md-content table th {
111
+ text-align: start;
112
+}
113
+
114
+.md-content table:not(.highlighttable) td code:only-child {
115
+ margin: auto 0;
116
+}
117
+
118
+.md-content .highlight table {
119
+ border-radius: var(--radius);
120
+}
121
+
122
+.md-content .highlight:not(table) {
123
+ margin-bottom: var(--content-gap);
124
+ background: var(--code-block-bg) !important;
125
+ border-radius: var(--radius);
126
+ direction: ltr;
127
+}
128
+
129
+.md-content li>.highlight {
130
+ margin-inline-end: 0;
131
+}
132
+
133
+.md-content ul pre {
134
+ margin-inline-start: calc(var(--gap) * -2);
135
+}
136
+
137
+.md-content .highlight pre {
138
+ margin: 0;
139
+}
140
+
141
+.md-content .highlighttable {
142
+ table-layout: fixed;
143
+}
144
+
145
+.md-content .highlighttable td:first-child {
146
+ width: 40px;
147
+}
148
+
149
+.md-content .highlighttable td .linenodiv {
150
+ padding-inline-end: 0 !important;
151
+}
152
+
153
+.md-content .highlighttable td .highlight,
154
+.md-content .highlighttable td .linenodiv pre {
155
+ margin-bottom: 0;
156
+}
157
+
158
+.post-content code {
159
+ padding: 0.2rem 0.3rem;
160
+ font-size: 0.78em;
161
+ line-height: 1.5;
162
+ background: var(--code-bg);
163
+ border-radius: 0.2rem;
164
+}
165
+
166
+.md-content pre code {
167
+ display: grid;
168
+ margin: auto 0;
169
+ padding: var(--space-3);
170
+ color: var(--color-code-text);
171
+ background: var(--color-code-block-bg) !important;
172
+ border-radius: var(--radius-md);
173
+ overflow-x: auto;
174
+ word-break: break-all;
175
+}
176
+
177
+.md-content blockquote {
178
+ margin: var(--space-3) 0;
179
+ padding-inline-start: var(--space-3);
180
+ border-inline-start: 0.3rem solid var(--color-text);
181
+}
182
+
183
+.md-content hr {
184
+ margin: 30px 0;
185
+ height: 2px;
186
+ background: var(--tertiary);
187
+ border: 0;
188
+}
189
+
190
+.md-content iframe {
191
+ max-width: 100%;
192
+}
193
+
194
+.md-content img {
195
+ border-radius: var(--radius);
196
+ margin: 1rem 0;
197
+}
198
+
199
+.md-content img[src*="#center"] {
200
+ margin: 1rem auto;
201
+}
202
+
203
+.md-content figure.align-center {
204
+ text-align: center;
205
+}
206
+
207
+.md-content figure>figcaption {
208
+ color: var(--color-text);
209
+ font-size: var(--text-base);
210
+ font-weight: 600;
211
+ margin: var(--space-2) 0 var(--space-3);
212
+}
213
+
214
+.md-content figure>figcaption>p {
215
+ color: var(--color-text-muted);
216
+ font-size: var(--text-sm);
217
+ font-weight: 400;
218
+}
219
+
220
+.md-content h1:hover .anchor,
221
+.md-content h2:hover .anchor,
222
+.md-content h3:hover .anchor,
223
+.md-content h4:hover .anchor,
224
+.md-content h5:hover .anchor,
225
+.md-content h6:hover .anchor {
226
+ display: inline-flex;
227
+ color: var(--secondary);
228
+ margin-inline-start: 0.5em;
229
+ font-weight: 500;
230
+ user-select: none;
231
+}
232
+
233
+.anchor:hover {
234
+ color: var(--content) !important;
235
+}
236
+
237
+.md-content img.in-text {
238
+ display: inline;
239
+ margin: auto;
240
+}
241
+
242
+mark {
243
+ border-radius: 2px;
244
+ padding: 0 2px;
245
+}
246
+
247
+audio {
248
+ display: block;
249
+ width: 100%;
250
+ border: 1px solid var(--border);
251
+ border-radius: var(--radius);
252
+ overflow: hidden;
253
+ height: 2.5rem;
254
+ margin-bottom: var(--content-gap);
255
+}
256
+
257
+audio::-webkit-media-controls-enclosure {
258
+ border-radius: 0;
259
+}
260
+
261
+video {
262
+ border: 1px solid var(--code-bg);
263
+ border-radius: var(--radius);
264
+ max-width: 100%;
265
+}
assets/css/common/post-entry.css
new
+129
@@ -0,0 +1,129 @@
1
+.first-entry {
2
+ position: relative;
3
+ display: flex;
4
+ flex-direction: column;
5
+ justify-content: center;
6
+ min-height: 320px;
7
+ margin: var(--gap) 0 calc(var(--gap) * 2) 0;
8
+}
9
+
10
+.first-entry .entry-header {
11
+ overflow: hidden;
12
+ display: -webkit-box;
13
+ -webkit-box-orient: vertical;
14
+ -webkit-line-clamp: 3;
15
+}
16
+
17
+.first-entry .entry-header h1 {
18
+ font-size: var(--text-3xl);
19
+ line-height: var(--leading-tight);
20
+}
21
+
22
+.first-entry .entry-header h2 {
23
+ font-size: var(--text-3xl);
24
+}
25
+
26
+.first-entry .entry-content {
27
+ margin: var(--space-3) 0;
28
+ font-size: var(--text-base);
29
+ -webkit-line-clamp: 3;
30
+}
31
+
32
+.first-entry .entry-footer {
33
+ font-size: var(--text-sm);
34
+}
35
+
36
+.home-info .entry-content {
37
+ --content-gap: 0.5rem;
38
+ -webkit-line-clamp: unset;
39
+ margin: 0;
40
+}
41
+
42
+.home-info .social-icons a:first-of-type {
43
+ padding-inline-start: 0;
44
+}
45
+
46
+
47
+.post-entry {
48
+ position: relative;
49
+ margin-bottom: var(--gap);
50
+ padding: var(--gap);
51
+ background: var(--entry);
52
+ border-radius: var(--radius);
53
+ transition: transform 0.25s ease;
54
+ border: 1px solid var(--border);
55
+}
56
+
57
+.post-entry:hover,
58
+.post-entry:focus-within {
59
+ transform: translateY(-2px);
60
+ border-color: var(--tertiary);
61
+}
62
+
63
+.tag-entry .entry-cover {
64
+ display: none;
65
+}
66
+
67
+.entry-header h2 {
68
+ font-size: var(--text-xl);
69
+ line-height: 1.3;
70
+}
71
+
72
+.entry-content {
73
+ margin: var(--space-2) 0;
74
+ color: var(--color-text-muted);
75
+ font-size: var(--text-sm);
76
+ line-height: var(--leading-relaxed);
77
+ overflow: hidden;
78
+ display: -webkit-box;
79
+ -webkit-box-orient: vertical;
80
+ -webkit-line-clamp: 2;
81
+}
82
+
83
+.home-info .entry-content p {
84
+ margin-block-start: 1em;
85
+ margin-block-end: 1em;
86
+}
87
+
88
+.entry-footer {
89
+ color: var(--color-text-muted);
90
+ font-size: var(--text-xs);
91
+}
92
+
93
+.entry-link {
94
+ position: absolute;
95
+ left: 0;
96
+ right: 0;
97
+ top: 0;
98
+ bottom: 0;
99
+ border-radius: var(--radius);
100
+}
101
+
102
+.entry-hint {
103
+ color: var(--color-text-muted);
104
+}
105
+
106
+.entry-hint-parent {
107
+ display: flex;
108
+ justify-content: space-between;
109
+}
110
+
111
+.entry-cover {
112
+ font-size: var(--text-sm);
113
+ margin-bottom: var(--gap);
114
+ text-align: center;
115
+ display: flex;
116
+ flex-direction: column;
117
+ gap: var(--space-2);
118
+}
119
+
120
+.entry-cover img {
121
+ border-radius: var(--radius-md);
122
+ width: 100%;
123
+ height: auto;
124
+}
125
+
126
+.entry-cover a {
127
+ text-underline-offset: 0.3rem;
128
+ text-decoration: underline;
129
+}
assets/css/common/post-single.css
new
+217
@@ -0,0 +1,217 @@
1
+.page-header,
2
+.post-header {
3
+ margin: 24px auto var(--content-gap) auto;
4
+}
5
+
6
+.post-title {
7
+ font-size: var(--text-3xl);
8
+ line-height: var(--leading-tight);
9
+}
10
+
11
+.post-description {
12
+ margin-top: 10px;
13
+}
14
+
15
+.post-meta {
16
+ margin-top: 5px;
17
+}
18
+
19
+.post-meta,
20
+.breadcrumbs {
21
+ color: var(--color-text-muted);
22
+ font-size: var(--text-sm);
23
+ line-height: var(--leading-normal);
24
+}
25
+
26
+.breadcrumbs {
27
+ display: flex;
28
+ flex-wrap: wrap;
29
+ align-items: center;
30
+ gap: 0.2rem;
31
+}
32
+
33
+.breadcrumbs a {
34
+ font-size: var(--text-base);
35
+}
36
+
37
+.breadcrumbs svg {
38
+ height: 1em;
39
+}
40
+
41
+.i18n_list {
42
+ display: inline-flex;
43
+}
44
+
45
+.post-meta .i18n_list li {
46
+ list-style: none;
47
+ margin: auto 3px;
48
+}
49
+
50
+.post-meta a,
51
+.toc a:hover {
52
+ text-underline-offset: 0.3rem;
53
+ text-decoration: underline;
54
+}
55
+
56
+.post-meta a {
57
+ color: var(--secondary);
58
+ text-decoration-style: dotted;
59
+}
60
+
61
+details.toc {
62
+ margin-bottom: var(--content-gap);
63
+ background: var(--code-bg);
64
+ border-radius: var(--radius);
65
+ border: 1px solid var(--border);
66
+}
67
+
68
+[data-theme="dark"] details.toc {
69
+ background: var(--entry);
70
+}
71
+
72
+details.toc summary {
73
+ padding: 0.3rem 1.2rem;
74
+ border-radius: var(--radius);
75
+}
76
+
77
+details summary {
78
+ cursor: pointer;
79
+ display: list-item;
80
+ width: 100%;
81
+ margin-inline-start: 0;
82
+ user-select: none;
83
+}
84
+
85
+details .title {
86
+ display: inline;
87
+ font-weight: 500;
88
+ margin-inline-start: 0.2rem;
89
+}
90
+
91
+details {
92
+ interpolate-size: allow-keywords;
93
+}
94
+
95
+details::details-content {
96
+ height: 0;
97
+ opacity: 0;
98
+ overflow: clip;
99
+ transition: height 150ms ease,
100
+ opacity 150ms ease,
101
+ content-visibility 150ms allow-discrete;
102
+}
103
+
104
+details[open]::details-content {
105
+ height: auto;
106
+ opacity: 1;
107
+}
108
+
109
+details .inner {
110
+ margin: 0 2.4rem;
111
+ padding-bottom: 0.6rem;
112
+}
113
+
114
+details li ul {
115
+ margin-inline-start: var(--gap);
116
+}
117
+
118
+.post-content {
119
+ color: var(--color-text);
120
+ margin: var(--space-5) 0;
121
+}
122
+
123
+.post-footer {
124
+ margin-top: var(--content-gap);
125
+}
126
+
127
+.post-footer>* {
128
+ margin-bottom: 10px;
129
+}
130
+
131
+.post-tags {
132
+ display: flex;
133
+ flex-wrap: wrap;
134
+ gap: 10px;
135
+}
136
+
137
+.post-tags li {
138
+ display: inline-block;
139
+}
140
+
141
+.post-tags a,
142
+.share-buttons,
143
+.paginav {
144
+ border-radius: var(--radius);
145
+ background: var(--code-bg);
146
+ border: 1px solid var(--border);
147
+}
148
+
149
+.post-tags a {
150
+ display: block;
151
+ padding: 0 var(--space-3);
152
+ color: var(--color-text-muted);
153
+ font-size: var(--text-sm);
154
+ line-height: 34px;
155
+ background: var(--color-code-bg);
156
+}
157
+
158
+.post-tags a:hover,
159
+.paginav a:hover {
160
+ background: var(--border);
161
+}
162
+
163
+.share-buttons {
164
+ padding: 10px;
165
+ display: flex;
166
+ justify-content: center;
167
+ overflow-x: auto;
168
+ gap: 10px;
169
+}
170
+
171
+.share-buttons li,
172
+.share-buttons a {
173
+ display: inline-flex;
174
+}
175
+
176
+.share-buttons a:not(:last-of-type) {
177
+ margin-inline-end: 12px;
178
+}
179
+
180
+.paginav {
181
+ display: flex;
182
+ line-height: 1.2;
183
+}
184
+
185
+.paginav .title {
186
+ letter-spacing: 1px;
187
+ text-transform: uppercase;
188
+ font-size: var(--text-xs);
189
+ color: var(--secondary);
190
+}
191
+
192
+.paginav a {
193
+ width: 50%;
194
+ display: flex;
195
+ flex-direction: column;
196
+ gap: 0.5rem;
197
+ padding: 0.8rem;
198
+ border-radius: var(--radius);
199
+}
200
+
201
+.paginav span:hover:not(.title) {
202
+ text-underline-offset: 0.2rem;
203
+ text-decoration: underline;
204
+}
205
+
206
+.paginav .next {
207
+ margin-inline-start: auto;
208
+ text-align: right;
209
+}
210
+
211
+[dir="rtl"] .paginav .next {
212
+ text-align: left;
213
+}
214
+
215
+h1>a>svg {
216
+ display: inline;
217
+}
assets/css/common/search.css
new
+41
@@ -0,0 +1,41 @@
1
+.searchbox input {
2
+ padding: var(--space-1) var(--space-3);
3
+ width: 100%;
4
+ color: var(--color-text);
5
+ font-weight: 700;
6
+ border: 2px solid var(--color-accent-muted);
7
+ border-radius: var(--radius-md);
8
+}
9
+
10
+.searchResults li {
11
+ list-style: none;
12
+ border-radius: var(--radius);
13
+ padding: 10px 15px;
14
+ position: relative;
15
+ font-weight: 500;
16
+ display: flex;
17
+ align-items: center;
18
+ justify-content: space-between;
19
+ background: var(--entry);
20
+ transition: transform .25s ease;
21
+ border: 1px solid var(--border);
22
+}
23
+
24
+.searchResults {
25
+ margin: var(--content-gap) 0;
26
+ width: 100%;
27
+ display: flex;
28
+ flex-direction: column;
29
+ gap: 10px;
30
+}
31
+
32
+.searchResults li:hover,
33
+.searchResults li:focus-within {
34
+ transform: translateY(-2px);
35
+ border-color: var(--tertiary);
36
+}
37
+
38
+.searchResults li .entry-link:focus {
39
+ outline: 2px solid var(--secondary);
40
+ outline-offset: -2px;
41
+}
assets/css/core/reset.css
new
+160
@@ -0,0 +1,160 @@
1
+*,
2
+::after,
3
+::before {
4
+ box-sizing: border-box;
5
+}
6
+
7
+html {
8
+ -webkit-tap-highlight-color: transparent;
9
+ overflow-y: scroll;
10
+ -webkit-text-size-adjust: 100%;
11
+ text-size-adjust: 100%;
12
+}
13
+
14
+a,
15
+button,
16
+body,
17
+h1,
18
+h2,
19
+h3,
20
+h4,
21
+h5,
22
+h6 {
23
+ color: var(--primary);
24
+}
25
+
26
+body {
27
+ font-family: var(--font-body);
28
+ font-size: var(--text-base);
29
+ line-height: var(--leading-relaxed);
30
+ word-break: break-word;
31
+ background: var(--color-bg);
32
+}
33
+
34
+article,
35
+aside,
36
+figcaption,
37
+figure,
38
+footer,
39
+header,
40
+hgroup,
41
+main,
42
+nav,
43
+section,
44
+table {
45
+ display: block;
46
+}
47
+
48
+h1,
49
+h2,
50
+h3,
51
+h4,
52
+h5,
53
+h6 {
54
+ font-family: var(--font-display);
55
+ line-height: var(--leading-tight);
56
+}
57
+
58
+h1 {
59
+ font-size: var(--text-3xl);
60
+ font-weight: 700;
61
+}
62
+
63
+h2 {
64
+ font-size: var(--text-2xl);
65
+ font-weight: 600;
66
+}
67
+
68
+h3 {
69
+ font-size: var(--text-xl);
70
+ line-height: 1.3;
71
+ font-weight: 600;
72
+}
73
+
74
+h4 {
75
+ font-size: var(--text-lg);
76
+ line-height: 1.35;
77
+ font-weight: 600;
78
+}
79
+
80
+h5,
81
+h6 {
82
+ font-size: var(--text-sm);
83
+ line-height: var(--leading-normal);
84
+ font-weight: 600;
85
+}
86
+
87
+small {
88
+ font-size: var(--text-sm);
89
+ line-height: var(--leading-normal);
90
+}
91
+
92
+h1,
93
+h2,
94
+h3,
95
+h4,
96
+h5,
97
+h6,
98
+p {
99
+ margin-top: 0;
100
+ margin-bottom: 0;
101
+}
102
+
103
+ul {
104
+ padding: 0;
105
+}
106
+
107
+a {
108
+ text-decoration: none;
109
+}
110
+
111
+body,
112
+figure,
113
+ul {
114
+ margin: 0;
115
+}
116
+
117
+table {
118
+ width: 100%;
119
+ border-collapse: collapse;
120
+ border-spacing: 0;
121
+ overflow-x: auto;
122
+ word-break: keep-all;
123
+}
124
+
125
+button,
126
+input,
127
+textarea {
128
+ padding: 0;
129
+ font: inherit;
130
+ background: 0 0;
131
+ border: 0;
132
+}
133
+
134
+code,
135
+kbd,
136
+pre,
137
+samp {
138
+ font-family: var(--font-mono);
139
+}
140
+
141
+input,
142
+textarea {
143
+ outline: 0;
144
+}
145
+
146
+button,
147
+input[type=button],
148
+input[type=submit] {
149
+ cursor: pointer;
150
+}
151
+
152
+input:-webkit-autofill,
153
+textarea:-webkit-autofill {
154
+ box-shadow: 0 0 0 50px var(--theme) inset;
155
+}
156
+
157
+img {
158
+ display: block;
159
+ max-width: 100%;
160
+}
assets/css/core/theme-vars.css
new
+31
@@ -0,0 +1,31 @@
1
+:root {
2
+ --gap: var(--space-4);
3
+ --content-gap: var(--space-4);
4
+ --nav-width: 1024px;
5
+ --main-width: 720px;
6
+ --header-height: 60px;
7
+ --footer-height: 60px;
8
+ --radius: var(--radius-md);
9
+ --theme: var(--color-bg);
10
+ --entry: var(--color-surface);
11
+ --primary: var(--color-text);
12
+ --secondary: var(--color-text-muted);
13
+ --tertiary: var(--color-accent-muted);
14
+ --content: var(--color-text);
15
+ --code-block-bg: var(--color-code-block-bg);
16
+ --code-bg: var(--color-code-bg);
17
+ --border: var(--color-border);
18
+ color-scheme: light dark;
19
+}
20
+
21
+:root[data-theme="dark"] {
22
+ color-scheme: dark;
23
+}
24
+
25
+.list {
26
+ background: var(--code-bg);
27
+}
28
+
29
+[data-theme="dark"] .list {
30
+ background: var(--theme);
31
+}
assets/css/extended/squadscope.css
+75
-75
@@ -1,6 +1,6 @@
1
.home-shell {
2
display: grid;
3
- gap: 2rem;
3
+ gap: var(--space-5);
4
}
5
6
.home-hero,
@@ -10,37 +10,37 @@
10
.home-nav-card,
11
.metric-card,
12
.report-shortcuts {
13
- border: 1px solid var(--border);
14
- border-radius: var(--radius);
15
- background: var(--entry);
13
+ border: 1px solid var(--color-border);
14
+ border-radius: var(--radius-md);
15
+ background: var(--color-surface);
16
}
17
18
.home-hero,
19
.home-latest,
20
.home-empty-state {
21
- padding: 1.5rem;
21
+ padding: var(--space-4);
22
}
23
24
.home-eyebrow,
25
.section-topline,
26
.metric-label {
27
display: block;
28
- color: var(--secondary);
29
- font-size: 0.85rem;
28
+ color: var(--color-text-muted);
29
+ font-size: var(--text-sm);
30
letter-spacing: 0.04em;
31
text-transform: uppercase;
32
}
33
34
.home-description {
35
- font-size: 1.05rem;
36
- margin: 0.5rem 0 1rem;
35
+ font-size: var(--text-lg);
36
+ margin: var(--space-2) 0 var(--space-3);
37
}
38
39
.home-nav-grid,
40
.report-metrics,
41
.home-report-list {
42
display: grid;
43
- gap: 1rem;
43
+ gap: var(--space-3);
44
}
45
46
.home-nav-grid {
@@ -49,28 +49,28 @@
49
50
.home-nav-card {
51
display: grid;
52
- gap: 0.5rem;
53
- padding: 1rem;
52
+ gap: var(--space-2);
53
+ padding: var(--space-3);
54
text-decoration: none;
55
}
56
57
.home-nav-title {
58
- color: var(--primary);
58
+ color: var(--color-text);
59
font-weight: 700;
60
}
61
62
.home-nav-copy {
63
- color: var(--secondary);
64
- font-size: 0.95rem;
63
+ color: var(--color-text-muted);
64
+ font-size: var(--text-sm);
65
}
66
67
.report-metrics {
68
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
69
- margin: 1.25rem 0;
69
+ margin: var(--space-4) 0;
70
}
71
72
.metric-card {
73
- padding: 1rem;
73
+ padding: var(--space-3);
74
}
75
76
.metric-card-wide {
@@ -79,15 +79,15 @@
79
80
.metric-value {
81
display: block;
82
- font-size: 1.05rem;
83
- margin-top: 0.35rem;
82
+ font-size: var(--text-lg);
83
+ margin-top: var(--space-1);
84
}
85
86
.home-actions,
87
.report-shortcuts {
88
display: flex;
89
flex-wrap: wrap;
90
- gap: 0.75rem;
90
+ gap: var(--space-2);
91
align-items: center;
92
}
93
@@ -98,19 +98,19 @@
98
align-items: center;
99
justify-content: center;
100
min-height: 2.5rem;
101
- padding: 0 0.9rem;
102
- border-radius: 999px;
101
+ padding: 0 var(--space-3);
102
+ border-radius: var(--radius-full);
103
text-decoration: none;
104
}
105
106
.home-action-primary {
107
- background: var(--primary);
108
- color: var(--theme);
107
+ background: var(--color-text);
108
+ color: var(--color-bg);
109
}
110
111
.home-action-secondary,
112
.report-shortcuts a {
113
- border: 1px solid var(--border);
113
+ border: 1px solid var(--color-border);
114
}
115
116
.home-report-list {
@@ -119,7 +119,7 @@
119
120
.home-report-card,
121
.squad-archive-entry {
122
- padding: 1rem;
122
+ padding: var(--space-3);
123
}
124
125
.home-report-card h3,
@@ -131,31 +131,31 @@
131
.home-report-meta {
132
display: flex;
133
flex-wrap: wrap;
134
- gap: 0.75rem;
135
- color: var(--secondary);
136
- font-size: 0.9rem;
134
+ gap: var(--space-2);
135
+ color: var(--color-text-muted);
136
+ font-size: var(--text-sm);
137
}
138
139
.squad-report .report-shortcuts {
140
- margin-bottom: 1.5rem;
141
- padding: 0.75rem;
140
+ margin-bottom: var(--space-4);
141
+ padding: var(--space-2);
142
}
143
144
.search-shell,
145
.taxonomy-grid {
146
display: grid;
147
- gap: 1rem;
147
+ gap: var(--space-3);
148
}
149
150
.search-intro-card,
151
.taxonomy-card {
152
- border: 1px solid var(--border);
153
- border-radius: var(--radius);
154
- background: var(--entry);
152
+ border: 1px solid var(--color-border);
153
+ border-radius: var(--radius-md);
154
+ background: var(--color-surface);
155
}
156
157
.search-intro-card {
158
- padding: 1rem 1.25rem;
158
+ padding: var(--space-3) 1.25rem;
159
}
160
161
.taxonomy-grid {
@@ -173,12 +173,12 @@
173
174
:root {
175
--pagefind-ui-scale: 0.95;
176
- --pagefind-ui-primary: var(--primary);
177
- --pagefind-ui-text: var(--content);
178
- --pagefind-ui-background: var(--entry);
179
- --pagefind-ui-border: var(--border);
180
- --pagefind-ui-tag: var(--tertiary);
181
- --pagefind-ui-border-radius: var(--radius);
176
+ --pagefind-ui-primary: var(--color-text);
177
+ --pagefind-ui-text: var(--color-text);
178
+ --pagefind-ui-background: var(--color-surface);
179
+ --pagefind-ui-border: var(--color-border);
180
+ --pagefind-ui-tag: var(--color-accent-muted);
181
+ --pagefind-ui-border-radius: var(--radius-md);
182
--pagefind-ui-font: inherit;
183
}
184
@@ -189,9 +189,9 @@ select:focus-visible,
189
textarea:focus-visible,
190
summary:focus-visible,
191
[tabindex]:focus-visible {
192
- outline: 3px solid var(--primary);
192
+ outline: 3px solid var(--color-accent);
193
outline-offset: 3px;
194
- border-radius: calc(var(--radius) / 2);
194
+ border-radius: var(--radius-sm);
195
}
196
197
.metric-value a,
@@ -209,26 +209,26 @@ summary:focus-visible,
209
.search-shortcuts {
210
display: flex;
211
flex-wrap: wrap;
212
- gap: 0.5rem;
213
- margin-top: 1rem;
214
- color: var(--secondary);
215
- font-size: 0.95rem;
212
+ gap: var(--space-2);
213
+ margin-top: var(--space-3);
214
+ color: var(--color-text-muted);
215
+ font-size: var(--text-sm);
216
}
217
218
.search-shortcuts-title {
219
align-self: center;
220
- color: var(--primary);
220
+ color: var(--color-text);
221
font-weight: 700;
222
}
223
224
.search-shortcut {
225
display: inline-flex;
226
align-items: center;
227
- gap: 0.4rem;
228
- padding: 0.35rem 0.7rem;
229
- border: 1px solid var(--border);
230
- border-radius: 999px;
231
- background: var(--entry);
227
+ gap: var(--space-1);
228
+ padding: var(--space-1) var(--space-2);
229
+ border: 1px solid var(--color-border);
230
+ border-radius: var(--radius-full);
231
+ background: var(--color-surface);
232
}
233
234
.search-shortcut kbd {
@@ -237,22 +237,22 @@ summary:focus-visible,
237
justify-content: center;
238
min-width: 1.8rem;
239
min-height: 1.8rem;
240
- padding: 0 0.35rem;
241
- border: 1px solid var(--border);
242
- border-radius: 0.5rem;
243
- background: var(--theme);
244
- color: var(--primary);
240
+ padding: 0 var(--space-1);
241
+ border: 1px solid var(--color-border);
242
+ border-radius: var(--radius-md);
243
+ background: var(--color-bg);
244
+ color: var(--color-text);
245
font: inherit;
246
font-weight: 700;
247
}
248
249
.search-panel {
250
display: grid;
251
- gap: 1rem;
251
+ gap: var(--space-3);
252
}
253
254
.search-panel .pagefind-ui__search-input {
255
- font-size: 1rem;
255
+ font-size: var(--text-base);
256
}
257
258
.search-panel .pagefind-ui__results,
@@ -262,16 +262,16 @@ summary:focus-visible,
262
}
263
264
.table-scroll {
265
- margin: 1rem 0;
265
+ margin: var(--space-3) 0;
266
overflow-x: auto;
267
- border: 1px solid var(--border);
268
- border-radius: var(--radius);
269
- background: var(--entry);
267
+ border: 1px solid var(--color-border);
268
+ border-radius: var(--radius-md);
269
+ background: var(--color-surface);
270
-webkit-overflow-scrolling: touch;
271
}
272
273
.table-scroll:focus-visible {
274
- outline: 3px solid var(--primary);
274
+ outline: 3px solid var(--color-accent);
275
outline-offset: 2px;
276
}
277
@@ -310,32 +310,32 @@ summary:focus-visible,
310
311
.logo {
312
justify-content: space-between;
313
- gap: 0.75rem;
313
+ gap: var(--space-2);
314
}
315
316
.menu {
317
flex-wrap: wrap;
318
overflow-x: visible;
319
white-space: normal;
320
- gap: 0.5rem;
320
+ gap: var(--space-2);
321
}
322
323
.menu a {
324
- padding: 0.35rem 0.75rem;
325
- border: 1px solid var(--border);
326
- border-radius: 999px;
327
- background: var(--entry);
324
+ padding: var(--space-1) var(--space-2);
325
+ border: 1px solid var(--color-border);
326
+ border-radius: var(--radius-full);
327
+ background: var(--color-surface);
328
line-height: 1.4;
329
}
330
331
.post-title {
332
- font-size: clamp(2rem, 8vw, 2.75rem);
332
+ font-size: clamp(var(--text-2xl), 8vw, var(--text-3xl));
333
}
334
335
.post-meta {
336
display: flex;
337
flex-wrap: wrap;
338
- gap: 0.35rem 0.75rem;
338
+ gap: var(--space-1) var(--space-2);
339
}
340
341
.home-actions,
@@ -355,7 +355,7 @@ summary:focus-visible,
355
}
356
357
.search-panel .pagefind-ui__search-input {
358
- font-size: 16px;
358
+ font-size: var(--text-base);
359
}
360
}
361
assets/css/tokens.css
new
+129
@@ -0,0 +1,129 @@
1
+/* SquadScope design tokens — Editorial Trend Report, 2026-05-25 */
2
+:root {
3
+ color-scheme: light dark;
4
+
5
+ --color-bg: #FAFAFA;
6
+ --color-surface: #FFFFFF;
7
+ --color-text: #1A1A1A;
8
+ --color-text-muted: #5C5C5C;
9
+ --color-accent: #0066CC;
10
+ --color-accent-hover: #004C99;
11
+ --color-accent-muted: #E6F0FA;
12
+ --color-border: #E0E0E0;
13
+ --color-danger: #CC3300;
14
+ --color-success: #1A8754;
15
+ --color-code-bg: #F5F5F5;
16
+ --color-code-block-bg: #1A1D21;
17
+ --color-code-text: #E8E8E8;
18
+ --color-copy-text: #FFFFFFCC;
19
+ --color-copy-bg: #4E4E4ECC;
20
+
21
+ --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
22
+ --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
23
+ --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", "Cascadia Code", monospace;
24
+
25
+ --text-xs: 0.75rem;
26
+ --text-sm: 0.875rem;
27
+ --text-base: 1rem;
28
+ --text-lg: 1.125rem;
29
+ --text-xl: 1.375rem;
30
+ --text-2xl: 1.75rem;
31
+ --text-3xl: 2.25rem;
32
+ --text-4xl: 3rem;
33
+
34
+ --space-1: 0.25rem;
35
+ --space-2: 0.5rem;
36
+ --space-3: 1rem;
37
+ --space-4: 1.5rem;
38
+ --space-5: 2rem;
39
+ --space-6: 3rem;
40
+ --space-7: 4rem;
41
+ --space-8: 5rem;
42
+ --space-9: 6rem;
43
+ --space-10: 7rem;
44
+ --space-11: 8rem;
45
+ --space-12: 9rem;
46
+ --space-13: 10rem;
47
+ --space-14: 11rem;
48
+ --space-15: 12rem;
49
+ --space-16: 13rem;
50
+
51
+ --radius-sm: 4px;
52
+ --radius-md: 8px;
53
+ --radius-lg: 12px;
54
+ --radius-full: 9999px;
55
+
56
+ --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
57
+ --shadow-md: 0 4px 6px rgb(0 0 0 / 0.07);
58
+ --shadow-lg: 0 10px 15px rgb(0 0 0 / 0.1);
59
+
60
+ --leading-tight: 1.2;
61
+ --leading-normal: 1.5;
62
+ --leading-relaxed: 1.65;
63
+
64
+ --prose-measure: 68ch;
65
+}
66
+
67
+@media (prefers-color-scheme: dark) {
68
+ :root:not([data-theme]) {
69
+ --color-bg: #0D0D0D;
70
+ --color-surface: #1A1A1A;
71
+ --color-text: #E8E8E8;
72
+ --color-text-muted: #9C9C9C;
73
+ --color-accent: #4DA3FF;
74
+ --color-accent-hover: #80BFFF;
75
+ --color-accent-muted: #1A2633;
76
+ --color-border: #2E2E2E;
77
+ --color-danger: #FF6B4A;
78
+ --color-success: #4ADE80;
79
+ --color-code-bg: #24262B;
80
+ --color-code-block-bg: #1A1A1A;
81
+ --color-code-text: #E8E8E8;
82
+ --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
83
+ --shadow-md: 0 4px 6px rgb(0 0 0 / 0.3);
84
+ --shadow-lg: 0 10px 15px rgb(0 0 0 / 0.3);
85
+ }
86
+}
87
+
88
+[data-theme="dark"] {
89
+ color-scheme: dark;
90
+
91
+ --color-bg: #0D0D0D;
92
+ --color-surface: #1A1A1A;
93
+ --color-text: #E8E8E8;
94
+ --color-text-muted: #9C9C9C;
95
+ --color-accent: #4DA3FF;
96
+ --color-accent-hover: #80BFFF;
97
+ --color-accent-muted: #1A2633;
98
+ --color-border: #2E2E2E;
99
+ --color-danger: #FF6B4A;
100
+ --color-success: #4ADE80;
101
+ --color-code-bg: #24262B;
102
+ --color-code-block-bg: #1A1A1A;
103
+ --color-code-text: #E8E8E8;
104
+ --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
105
+ --shadow-md: 0 4px 6px rgb(0 0 0 / 0.3);
106
+ --shadow-lg: 0 10px 15px rgb(0 0 0 / 0.3);
107
+}
108
+
109
+[data-theme="light"] {
110
+ color-scheme: light;
111
+}
112
+
113
+html {
114
+ font-size: 16px;
115
+}
116
+
117
+/* Short aliases preserve the proposal vocabulary for future phases. */
118
+:root {
119
+ --bg: var(--color-bg);
120
+ --surface: var(--color-surface);
121
+ --text: var(--color-text);
122
+ --text-muted: var(--color-text-muted);
123
+ --accent: var(--color-accent);
124
+ --accent-hover: var(--color-accent-hover);
125
+ --accent-muted: var(--color-accent-muted);
126
+ --border-token: var(--color-border);
127
+ --danger: var(--color-danger);
128
+ --success: var(--color-success);
129
+}
layouts/partials/head.html
+16
-10
@@ -37,6 +37,11 @@
37
{{- end }}
38
39
{{- /* Styles */}}
40
+{{- $font_href := "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" }}
41
+<link rel="preconnect" href="https://fonts.googleapis.com">
42
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
43
+<link rel="preload" as="style" href="{{ $font_href }}">
44
+<link rel="stylesheet" href="{{ $font_href }}">
45
46
{{- /* includes */}}
47
{{- $includes := slice }}
@@ -44,6 +49,7 @@
49
50
{{- $includes_all := $includes | resources.Concat "assets/css/includes.css" }}
51
52
+{{- $tokens := (resources.Get "css/tokens.css") }}
53
{{- $theme_vars := (resources.Get "css/core/theme-vars.css") }}
54
{{- $reset := (resources.Get "css/core/reset.css") }}
55
{{- $media := (resources.Get "css/core/zmedia.css") }}
@@ -55,7 +61,7 @@
61
{{- $chroma_mod := (resources.Get "css/includes/chroma-mod.css") }}
62
63
{{- /* order is important */}}
58
-{{- $core := (slice $theme_vars $reset $common $chroma_styles $chroma_mod $includes_all $media) | resources.Concat "assets/css/core.css" | resources.Minify }}
64
+{{- $core := (slice $tokens $theme_vars $reset $common $chroma_styles $chroma_mod $includes_all $media) | resources.Concat "assets/css/core.css" | resources.Minify }}
65
{{- $extended := (resources.Match "css/extended/*.css") | resources.Concat "assets/css/extended.css" | resources.Minify }}
66
67
{{- /* bundle all required css */}}
@@ -113,15 +119,15 @@
119
<style>
120
@media (prefers-color-scheme: dark) {
121
:root {
116
- --theme: rgb(29, 30, 32);
117
- --entry: rgb(46, 46, 51);
118
- --primary: rgb(218, 218, 219);
119
- --secondary: rgb(155, 156, 157);
120
- --tertiary: rgb(65, 66, 68);
121
- --content: rgb(196, 196, 197);
122
- --code-block-bg: rgb(46, 46, 51);
123
- --code-bg: rgb(55, 56, 62);
124
- --border: rgb(51, 51, 51);
122
+ --theme: var(--color-bg);
123
+ --entry: var(--color-surface);
124
+ --primary: var(--color-text);
125
+ --secondary: var(--color-text-muted);
126
+ --tertiary: var(--color-accent-muted);
127
+ --content: var(--color-text);
128
+ --code-block-bg: var(--color-code-block-bg);
129
+ --code-bg: var(--color-code-bg);
130
+ --border: var(--color-border);
131
color-scheme: dark;
132
}
133
screenshots/design-verification/2026-05-25/home-desktop-light.png
Binary files /dev/null and b/screenshots/design-verification/2026-05-25/home-desktop-light.png differ
screenshots/design-verification/2026-05-25/weekly-w22-desktop-dark.png
Binary files /dev/null and b/screenshots/design-verification/2026-05-25/weekly-w22-desktop-dark.png differ
screenshots/design-verification/2026-05-25/yearly-2026-mobile-dark.png
Binary files /dev/null and b/screenshots/design-verification/2026-05-25/yearly-2026-mobile-dark.png differ