@zeropress/build-pages 0.6.1 → 0.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +146 -26
- package/action.yml +3 -0
- package/dist/action.js +465 -132
- package/dist/prebuild.js +110 -5
- package/package.json +2 -2
- package/schemas/zeropress-build-pages.config.v0.1.schema.json +50 -3
- package/src/action.js +1 -0
- package/src/index.js +154 -3
- package/src/prebuild.js +134 -5
- package/themes/docs/404.html +13 -2
- package/themes/docs/assets/style.css +975 -154
- package/themes/docs/assets/theme.js +333 -0
- package/themes/docs/layout.html +73 -14
- package/themes/docs/page.html +9 -14
- package/themes/docs/partials/theme-bootstrap.html +10 -0
- package/themes/docs/partials/theme-scripts.html +1 -0
- package/themes/docs/post.html +5 -2
- package/themes/docs/theme.json +10 -7
|
@@ -1,64 +1,163 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
color-scheme: light dark;
|
|
3
|
-
|
|
3
|
+
|
|
4
|
+
/* Light tokens */
|
|
5
|
+
--bg: #fbfbfd;
|
|
6
|
+
--bg-elev: #ffffff;
|
|
4
7
|
--surface: #ffffff;
|
|
5
|
-
--
|
|
6
|
-
--
|
|
7
|
-
--
|
|
8
|
-
--
|
|
9
|
-
--
|
|
10
|
-
--
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
--
|
|
14
|
-
--
|
|
15
|
-
--
|
|
16
|
-
--
|
|
8
|
+
--surface-2: #f4f5f8;
|
|
9
|
+
--ink: #0b0d12;
|
|
10
|
+
--ink-soft: #1f2430;
|
|
11
|
+
--muted: #5b6472;
|
|
12
|
+
--muted-2: #828b99;
|
|
13
|
+
--line: #e5e7eb;
|
|
14
|
+
--line-strong: #d3d7de;
|
|
15
|
+
--accent: #4f46e5;
|
|
16
|
+
--accent-2: #7c3aed;
|
|
17
|
+
--accent-ink: #ffffff;
|
|
18
|
+
--accent-soft: rgba(79, 70, 229, 0.08);
|
|
19
|
+
--accent-ring: rgba(79, 70, 229, 0.22);
|
|
20
|
+
--code-bg: #f3f4f6;
|
|
21
|
+
--header-bg: rgba(251, 251, 253, 0.78);
|
|
22
|
+
--prose-ink: #2b313c;
|
|
23
|
+
--pre-bg: #0f1218;
|
|
24
|
+
--pre-ink: #e6e9f0;
|
|
25
|
+
--syntax-comment: #8b94a3;
|
|
26
|
+
--syntax-keyword: #f472b6;
|
|
27
|
+
--syntax-title: #93c5fd;
|
|
28
|
+
--syntax-string: #86efac;
|
|
29
|
+
--syntax-number: #fbbf24;
|
|
30
|
+
--syntax-attr: #67e8f9;
|
|
31
|
+
--syntax-built-in: #c4b5fd;
|
|
32
|
+
--syntax-deletion: #fca5a5;
|
|
33
|
+
--syntax-addition: #bbf7d0;
|
|
34
|
+
--alert-note: #4f46e5;
|
|
17
35
|
--alert-tip: #059669;
|
|
18
36
|
--alert-important: #7c3aed;
|
|
19
37
|
--alert-warning: #d97706;
|
|
20
38
|
--alert-caution: #dc2626;
|
|
21
|
-
|
|
22
|
-
|
|
39
|
+
|
|
40
|
+
--shadow-sm: 0 1px 2px rgb(15 23 42 / 6%);
|
|
41
|
+
--shadow-md: 0 4px 14px -4px rgb(15 23 42 / 10%);
|
|
42
|
+
--shadow-lg: 0 24px 48px -16px rgb(15 23 42 / 18%);
|
|
43
|
+
|
|
44
|
+
--radius-sm: 8px;
|
|
45
|
+
--radius: 12px;
|
|
46
|
+
--radius-lg: 16px;
|
|
47
|
+
|
|
48
|
+
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
49
|
+
|
|
50
|
+
font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
51
|
+
font-feature-settings: "cv11", "ss01", "ss03";
|
|
23
52
|
}
|
|
24
53
|
|
|
25
54
|
@media (prefers-color-scheme: dark) {
|
|
26
|
-
:root {
|
|
55
|
+
:root:not([data-theme="light"]) {
|
|
27
56
|
color-scheme: dark;
|
|
28
|
-
--bg: #
|
|
29
|
-
--
|
|
30
|
-
--
|
|
31
|
-
--
|
|
32
|
-
--
|
|
33
|
-
--
|
|
34
|
-
--
|
|
35
|
-
--
|
|
36
|
-
--
|
|
37
|
-
--
|
|
38
|
-
--
|
|
39
|
-
--
|
|
40
|
-
--
|
|
41
|
-
--
|
|
57
|
+
--bg: #0b0d12;
|
|
58
|
+
--bg-elev: #11141b;
|
|
59
|
+
--surface: #11141b;
|
|
60
|
+
--surface-2: #161a23;
|
|
61
|
+
--ink: #f3f5f8;
|
|
62
|
+
--ink-soft: #d9dee6;
|
|
63
|
+
--muted: #a4adbc;
|
|
64
|
+
--muted-2: #7d8696;
|
|
65
|
+
--line: #232834;
|
|
66
|
+
--line-strong: #2e3442;
|
|
67
|
+
--accent: #818cf8;
|
|
68
|
+
--accent-2: #c4b5fd;
|
|
69
|
+
--accent-ink: #0b0d12;
|
|
70
|
+
--accent-soft: rgba(129, 140, 248, 0.14);
|
|
71
|
+
--accent-ring: rgba(129, 140, 248, 0.32);
|
|
72
|
+
--code-bg: #1b202b;
|
|
73
|
+
--header-bg: rgba(11, 13, 18, 0.72);
|
|
74
|
+
--prose-ink: #d3d8e2;
|
|
75
|
+
--pre-bg: #06080c;
|
|
76
|
+
--pre-ink: #eef1f6;
|
|
77
|
+
--alert-note: #818cf8;
|
|
42
78
|
--alert-tip: #34d399;
|
|
43
|
-
--alert-important: #
|
|
79
|
+
--alert-important: #c4b5fd;
|
|
44
80
|
--alert-warning: #fbbf24;
|
|
45
81
|
--alert-caution: #f87171;
|
|
82
|
+
|
|
83
|
+
--shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
|
|
84
|
+
--shadow-md: 0 6px 18px -8px rgb(0 0 0 / 50%);
|
|
85
|
+
--shadow-lg: 0 30px 60px -20px rgb(0 0 0 / 60%);
|
|
46
86
|
}
|
|
47
87
|
}
|
|
48
88
|
|
|
89
|
+
:root[data-theme="dark"] {
|
|
90
|
+
color-scheme: dark;
|
|
91
|
+
--bg: #0b0d12;
|
|
92
|
+
--bg-elev: #11141b;
|
|
93
|
+
--surface: #11141b;
|
|
94
|
+
--surface-2: #161a23;
|
|
95
|
+
--ink: #f3f5f8;
|
|
96
|
+
--ink-soft: #d9dee6;
|
|
97
|
+
--muted: #a4adbc;
|
|
98
|
+
--muted-2: #7d8696;
|
|
99
|
+
--line: #232834;
|
|
100
|
+
--line-strong: #2e3442;
|
|
101
|
+
--accent: #818cf8;
|
|
102
|
+
--accent-2: #c4b5fd;
|
|
103
|
+
--accent-ink: #0b0d12;
|
|
104
|
+
--accent-soft: rgba(129, 140, 248, 0.14);
|
|
105
|
+
--accent-ring: rgba(129, 140, 248, 0.32);
|
|
106
|
+
--code-bg: #1b202b;
|
|
107
|
+
--header-bg: rgba(11, 13, 18, 0.72);
|
|
108
|
+
--prose-ink: #d3d8e2;
|
|
109
|
+
--pre-bg: #06080c;
|
|
110
|
+
--pre-ink: #eef1f6;
|
|
111
|
+
--alert-note: #818cf8;
|
|
112
|
+
--alert-tip: #34d399;
|
|
113
|
+
--alert-important: #c4b5fd;
|
|
114
|
+
--alert-warning: #fbbf24;
|
|
115
|
+
--alert-caution: #f87171;
|
|
116
|
+
|
|
117
|
+
--shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
|
|
118
|
+
--shadow-md: 0 6px 18px -8px rgb(0 0 0 / 50%);
|
|
119
|
+
--shadow-lg: 0 30px 60px -20px rgb(0 0 0 / 60%);
|
|
120
|
+
}
|
|
121
|
+
|
|
49
122
|
* {
|
|
50
123
|
box-sizing: border-box;
|
|
51
124
|
}
|
|
52
125
|
|
|
126
|
+
html {
|
|
127
|
+
-webkit-text-size-adjust: 100%;
|
|
128
|
+
-webkit-font-smoothing: antialiased;
|
|
129
|
+
-moz-osx-font-smoothing: grayscale;
|
|
130
|
+
}
|
|
131
|
+
|
|
53
132
|
body {
|
|
54
133
|
margin: 0;
|
|
55
134
|
background: var(--bg);
|
|
56
135
|
color: var(--ink);
|
|
57
|
-
line-height: 1.
|
|
136
|
+
line-height: 1.65;
|
|
137
|
+
letter-spacing: -0.005em;
|
|
138
|
+
min-height: 100vh;
|
|
139
|
+
display: flex;
|
|
140
|
+
flex-direction: column;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
main {
|
|
144
|
+
flex: 1 0 auto;
|
|
58
145
|
}
|
|
59
146
|
|
|
60
147
|
a {
|
|
61
148
|
color: var(--accent);
|
|
149
|
+
text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
|
|
150
|
+
text-underline-offset: 3px;
|
|
151
|
+
transition: color 120ms var(--ease);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
a:hover {
|
|
155
|
+
text-decoration-color: var(--accent);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
::selection {
|
|
159
|
+
background: var(--accent-soft);
|
|
160
|
+
color: var(--ink);
|
|
62
161
|
}
|
|
63
162
|
|
|
64
163
|
.skip-link {
|
|
@@ -68,9 +167,10 @@ a {
|
|
|
68
167
|
transform: translateY(-200%);
|
|
69
168
|
background: var(--ink);
|
|
70
169
|
color: var(--bg);
|
|
71
|
-
padding: 0.5rem 0.
|
|
72
|
-
border-radius:
|
|
73
|
-
z-index:
|
|
170
|
+
padding: 0.5rem 0.85rem;
|
|
171
|
+
border-radius: var(--radius-sm);
|
|
172
|
+
z-index: 50;
|
|
173
|
+
font-weight: 600;
|
|
74
174
|
}
|
|
75
175
|
|
|
76
176
|
.skip-link:focus {
|
|
@@ -78,17 +178,36 @@ a {
|
|
|
78
178
|
}
|
|
79
179
|
|
|
80
180
|
.shell {
|
|
81
|
-
width: min(
|
|
181
|
+
width: min(1180px, calc(100% - 2.5rem));
|
|
82
182
|
margin: 0 auto;
|
|
83
183
|
}
|
|
84
184
|
|
|
185
|
+
.visually-hidden {
|
|
186
|
+
position: absolute;
|
|
187
|
+
width: 1px;
|
|
188
|
+
height: 1px;
|
|
189
|
+
padding: 0;
|
|
190
|
+
overflow: hidden;
|
|
191
|
+
clip: rect(0, 0, 0, 0);
|
|
192
|
+
white-space: nowrap;
|
|
193
|
+
border: 0;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
/* ---------- Header ---------- */
|
|
197
|
+
|
|
85
198
|
.site-header {
|
|
86
|
-
background: var(--header-bg);
|
|
87
|
-
border-bottom: 1px solid var(--line);
|
|
88
199
|
position: sticky;
|
|
89
200
|
top: 0;
|
|
90
|
-
z-index:
|
|
91
|
-
|
|
201
|
+
z-index: 20;
|
|
202
|
+
background: var(--header-bg);
|
|
203
|
+
border-bottom: 1px solid transparent;
|
|
204
|
+
backdrop-filter: saturate(140%) blur(14px);
|
|
205
|
+
-webkit-backdrop-filter: saturate(140%) blur(14px);
|
|
206
|
+
transition: border-color 200ms var(--ease), background 200ms var(--ease);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.site-header.is-scrolled {
|
|
210
|
+
border-bottom-color: var(--line);
|
|
92
211
|
}
|
|
93
212
|
|
|
94
213
|
.site-header__inner {
|
|
@@ -96,118 +215,507 @@ a {
|
|
|
96
215
|
display: flex;
|
|
97
216
|
align-items: center;
|
|
98
217
|
justify-content: space-between;
|
|
99
|
-
gap: 1.
|
|
218
|
+
gap: 1.25rem;
|
|
100
219
|
}
|
|
101
220
|
|
|
102
221
|
.brand {
|
|
222
|
+
display: inline-flex;
|
|
223
|
+
align-items: center;
|
|
224
|
+
gap: 0.55rem;
|
|
225
|
+
flex: 0 0 auto;
|
|
103
226
|
color: var(--ink);
|
|
104
|
-
font-weight:
|
|
227
|
+
font-weight: 700;
|
|
228
|
+
font-size: 0.98rem;
|
|
229
|
+
letter-spacing: -0.015em;
|
|
105
230
|
text-decoration: none;
|
|
231
|
+
white-space: nowrap;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.brand__mark {
|
|
235
|
+
width: 30px;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.site-header__actions {
|
|
239
|
+
flex: 1 1 auto;
|
|
240
|
+
display: flex;
|
|
241
|
+
align-items: center;
|
|
242
|
+
justify-content: flex-end;
|
|
243
|
+
gap: 0.85rem;
|
|
244
|
+
min-width: 0;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.nav-toggle {
|
|
248
|
+
display: none;
|
|
249
|
+
align-items: center;
|
|
250
|
+
justify-content: center;
|
|
251
|
+
width: 36px;
|
|
252
|
+
height: 36px;
|
|
253
|
+
border: 1px solid var(--line);
|
|
254
|
+
border-radius: 8px;
|
|
255
|
+
background: var(--surface);
|
|
256
|
+
color: var(--ink);
|
|
257
|
+
cursor: pointer;
|
|
258
|
+
transition: border-color 120ms var(--ease), background 120ms var(--ease);
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.nav-toggle:hover {
|
|
262
|
+
border-color: var(--line-strong);
|
|
106
263
|
}
|
|
107
264
|
|
|
108
265
|
.site-nav ul {
|
|
109
266
|
list-style: none;
|
|
110
267
|
margin: 0;
|
|
111
268
|
padding: 0;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.site-nav ul {
|
|
115
269
|
display: flex;
|
|
116
|
-
flex-wrap:
|
|
117
|
-
gap: 0.
|
|
270
|
+
flex-wrap: nowrap;
|
|
271
|
+
gap: 0.1rem;
|
|
118
272
|
justify-content: flex-end;
|
|
119
273
|
}
|
|
120
274
|
|
|
121
275
|
.site-nav a {
|
|
276
|
+
display: inline-flex;
|
|
277
|
+
align-items: center;
|
|
278
|
+
padding: 0.45rem 0.7rem;
|
|
279
|
+
border-radius: 7px;
|
|
122
280
|
color: var(--muted);
|
|
123
281
|
text-decoration: none;
|
|
124
|
-
font-size: 0.
|
|
125
|
-
font-weight:
|
|
282
|
+
font-size: 0.9rem;
|
|
283
|
+
font-weight: 500;
|
|
284
|
+
white-space: nowrap;
|
|
285
|
+
transition: color 120ms var(--ease), background 120ms var(--ease);
|
|
126
286
|
}
|
|
127
287
|
|
|
128
288
|
.site-nav a:hover {
|
|
289
|
+
color: var(--ink);
|
|
290
|
+
background: var(--surface-2);
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.site-nav a[aria-current="page"] {
|
|
294
|
+
color: var(--ink);
|
|
295
|
+
background: var(--accent-soft);
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
/* Search */
|
|
299
|
+
|
|
300
|
+
.site-search {
|
|
301
|
+
position: relative;
|
|
302
|
+
flex: 0 0 16rem;
|
|
303
|
+
width: 16rem;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.site-search__form {
|
|
307
|
+
position: relative;
|
|
308
|
+
display: flex;
|
|
309
|
+
align-items: center;
|
|
310
|
+
margin: 0;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.site-search__icon {
|
|
314
|
+
position: absolute;
|
|
315
|
+
left: 0.7rem;
|
|
316
|
+
display: inline-flex;
|
|
317
|
+
color: var(--muted-2);
|
|
318
|
+
pointer-events: none;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.site-search__input {
|
|
322
|
+
width: 100%;
|
|
323
|
+
height: 2.4rem;
|
|
324
|
+
padding: 0 2.4rem 0 2.1rem;
|
|
325
|
+
border: 1px solid var(--line);
|
|
326
|
+
border-radius: 9px;
|
|
327
|
+
background: var(--surface);
|
|
328
|
+
color: var(--ink);
|
|
329
|
+
font: inherit;
|
|
330
|
+
font-size: 0.9rem;
|
|
331
|
+
transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease), background 120ms var(--ease);
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
.site-search__input::placeholder {
|
|
335
|
+
color: var(--muted-2);
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
.site-search__input:focus {
|
|
339
|
+
outline: 0;
|
|
340
|
+
border-color: var(--accent);
|
|
341
|
+
box-shadow: 0 0 0 3px var(--accent-ring);
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
.site-search__input:disabled {
|
|
345
|
+
cursor: not-allowed;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.site-search__kbd {
|
|
349
|
+
position: absolute;
|
|
350
|
+
right: 0.55rem;
|
|
351
|
+
display: inline-flex;
|
|
352
|
+
align-items: center;
|
|
353
|
+
justify-content: center;
|
|
354
|
+
min-width: 1.4rem;
|
|
355
|
+
height: 1.4rem;
|
|
356
|
+
padding: 0 0.35rem;
|
|
357
|
+
border: 1px solid var(--line);
|
|
358
|
+
border-radius: 5px;
|
|
359
|
+
background: var(--surface-2);
|
|
360
|
+
color: var(--muted);
|
|
361
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
362
|
+
font-size: 0.72rem;
|
|
363
|
+
font-weight: 600;
|
|
364
|
+
pointer-events: none;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
.site-search__panel {
|
|
368
|
+
position: absolute;
|
|
369
|
+
top: calc(100% + 0.5rem);
|
|
370
|
+
right: 0;
|
|
371
|
+
width: min(34rem, calc(100vw - 2rem));
|
|
372
|
+
max-height: min(31rem, calc(100vh - 6rem));
|
|
373
|
+
overflow: auto;
|
|
374
|
+
padding: 0.85rem;
|
|
375
|
+
border: 1px solid var(--line);
|
|
376
|
+
border-radius: var(--radius);
|
|
377
|
+
background: var(--surface);
|
|
378
|
+
box-shadow: var(--shadow-lg);
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
.site-search__status {
|
|
382
|
+
margin: 0 0 0.6rem;
|
|
383
|
+
color: var(--muted);
|
|
384
|
+
font-size: 0.84rem;
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
.site-search__results {
|
|
388
|
+
list-style: none;
|
|
389
|
+
margin: 0;
|
|
390
|
+
padding: 0;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
.site-search__results li {
|
|
394
|
+
padding: 0.65rem 0.55rem;
|
|
395
|
+
border-radius: 8px;
|
|
396
|
+
transition: background 120ms var(--ease);
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
.site-search__results li:hover {
|
|
400
|
+
background: var(--surface-2);
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
.site-search__results li + li {
|
|
404
|
+
margin-top: 0.2rem;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
.site-search__results a {
|
|
408
|
+
display: inline-block;
|
|
409
|
+
color: var(--ink);
|
|
410
|
+
font-weight: 600;
|
|
411
|
+
text-decoration: none;
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
.site-search__results a:hover {
|
|
129
415
|
color: var(--accent);
|
|
130
416
|
}
|
|
131
417
|
|
|
132
|
-
.
|
|
418
|
+
.site-search__results span {
|
|
419
|
+
display: inline-block;
|
|
420
|
+
margin-top: 0.15rem;
|
|
421
|
+
padding: 0.1rem 0.45rem;
|
|
422
|
+
border-radius: 4px;
|
|
423
|
+
background: var(--accent-soft);
|
|
424
|
+
color: var(--accent);
|
|
425
|
+
font-size: 0.7rem;
|
|
426
|
+
font-weight: 600;
|
|
427
|
+
text-transform: uppercase;
|
|
428
|
+
letter-spacing: 0.04em;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
.site-search__results p {
|
|
432
|
+
margin: 0.3rem 0 0;
|
|
433
|
+
color: var(--muted);
|
|
434
|
+
font-size: 0.86rem;
|
|
435
|
+
line-height: 1.5;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
/* Theme toggle */
|
|
439
|
+
|
|
440
|
+
.theme-toggle {
|
|
441
|
+
display: inline-flex;
|
|
442
|
+
align-items: center;
|
|
443
|
+
justify-content: center;
|
|
444
|
+
width: 36px;
|
|
445
|
+
height: 36px;
|
|
446
|
+
border: 1px solid var(--line);
|
|
447
|
+
border-radius: 9px;
|
|
133
448
|
background: var(--surface);
|
|
449
|
+
color: var(--ink);
|
|
450
|
+
cursor: pointer;
|
|
451
|
+
transition: border-color 120ms var(--ease), background 120ms var(--ease), color 120ms var(--ease);
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
.theme-toggle:hover {
|
|
455
|
+
border-color: var(--line-strong);
|
|
456
|
+
color: var(--accent);
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
.theme-toggle__icon {
|
|
460
|
+
position: absolute;
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
.theme-toggle__icon--sun {
|
|
464
|
+
display: none;
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
.theme-toggle__icon--moon {
|
|
468
|
+
display: inline-block;
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
:root[data-theme="dark"] .theme-toggle__icon--sun,
|
|
472
|
+
:root:not([data-theme="light"]) .theme-toggle__icon--sun {
|
|
473
|
+
/* default depends on resolved theme */
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
@media (prefers-color-scheme: dark) {
|
|
477
|
+
:root:not([data-theme="light"]) .theme-toggle__icon--sun {
|
|
478
|
+
display: inline-block;
|
|
479
|
+
}
|
|
480
|
+
:root:not([data-theme="light"]) .theme-toggle__icon--moon {
|
|
481
|
+
display: none;
|
|
482
|
+
}
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
:root[data-theme="dark"] .theme-toggle__icon--sun {
|
|
486
|
+
display: inline-block;
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
:root[data-theme="dark"] .theme-toggle__icon--moon {
|
|
490
|
+
display: none;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
:root[data-theme="light"] .theme-toggle__icon--sun {
|
|
494
|
+
display: none;
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
:root[data-theme="light"] .theme-toggle__icon--moon {
|
|
498
|
+
display: inline-block;
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
/* ---------- Hero ---------- */
|
|
502
|
+
|
|
503
|
+
.hero {
|
|
504
|
+
position: relative;
|
|
505
|
+
overflow: hidden;
|
|
506
|
+
background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg) 100%);
|
|
134
507
|
border-bottom: 1px solid var(--line);
|
|
135
508
|
}
|
|
136
509
|
|
|
510
|
+
.hero__bg {
|
|
511
|
+
position: absolute;
|
|
512
|
+
inset: 0;
|
|
513
|
+
pointer-events: none;
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
.hero__grid {
|
|
517
|
+
position: absolute;
|
|
518
|
+
inset: 0;
|
|
519
|
+
background-image:
|
|
520
|
+
linear-gradient(to right, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
|
|
521
|
+
linear-gradient(to bottom, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px);
|
|
522
|
+
background-size: 56px 56px;
|
|
523
|
+
mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 30%, transparent 75%);
|
|
524
|
+
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 30%, transparent 75%);
|
|
525
|
+
opacity: 0.7;
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
.hero__glow {
|
|
529
|
+
position: absolute;
|
|
530
|
+
top: -180px;
|
|
531
|
+
left: 50%;
|
|
532
|
+
transform: translateX(-50%);
|
|
533
|
+
width: 720px;
|
|
534
|
+
height: 540px;
|
|
535
|
+
background: radial-gradient(ellipse at center, var(--accent-soft) 0%, transparent 60%);
|
|
536
|
+
filter: blur(40px);
|
|
537
|
+
}
|
|
538
|
+
|
|
137
539
|
.hero__inner {
|
|
138
|
-
|
|
540
|
+
position: relative;
|
|
541
|
+
padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem);
|
|
542
|
+
}
|
|
543
|
+
|
|
544
|
+
.hero__title {
|
|
545
|
+
margin: 0.4rem 0 1rem;
|
|
546
|
+
font-size: clamp(2.2rem, 4.4vw, 3.4rem);
|
|
547
|
+
font-weight: 800;
|
|
548
|
+
line-height: 1.08;
|
|
549
|
+
letter-spacing: -0.03em;
|
|
550
|
+
background: linear-gradient(180deg, var(--ink) 30%, color-mix(in srgb, var(--ink) 70%, var(--accent)) 100%);
|
|
551
|
+
-webkit-background-clip: text;
|
|
552
|
+
background-clip: text;
|
|
553
|
+
color: transparent;
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
.hero__actions {
|
|
557
|
+
display: flex;
|
|
558
|
+
flex-wrap: wrap;
|
|
559
|
+
gap: 0.65rem;
|
|
560
|
+
margin-top: 1.6rem;
|
|
139
561
|
}
|
|
140
562
|
|
|
141
563
|
.eyebrow {
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
564
|
+
display: inline-flex;
|
|
565
|
+
align-items: center;
|
|
566
|
+
gap: 0.5rem;
|
|
567
|
+
margin: 0 0 0.5rem;
|
|
568
|
+
padding: 0.3rem 0.65rem;
|
|
569
|
+
border: 1px solid var(--line);
|
|
570
|
+
border-radius: 999px;
|
|
571
|
+
background: var(--surface);
|
|
572
|
+
color: var(--muted);
|
|
573
|
+
font-size: 0.74rem;
|
|
574
|
+
font-weight: 600;
|
|
575
|
+
letter-spacing: 0.04em;
|
|
147
576
|
text-transform: uppercase;
|
|
148
577
|
}
|
|
149
578
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
579
|
+
.eyebrow__dot {
|
|
580
|
+
width: 6px;
|
|
581
|
+
height: 6px;
|
|
582
|
+
border-radius: 50%;
|
|
583
|
+
background: var(--accent);
|
|
584
|
+
box-shadow: 0 0 0 3px var(--accent-soft);
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
.eyebrow__version {
|
|
588
|
+
padding: 0.05rem 0.4rem;
|
|
589
|
+
border-radius: 999px;
|
|
590
|
+
background: var(--accent-soft);
|
|
591
|
+
color: var(--accent);
|
|
592
|
+
font-size: 0.68rem;
|
|
593
|
+
letter-spacing: 0.02em;
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
.eyebrow--error .eyebrow__dot {
|
|
597
|
+
background: var(--alert-caution);
|
|
598
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--alert-caution) 14%, transparent);
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
h1, h2, h3, h4, h5, h6 {
|
|
602
|
+
letter-spacing: -0.02em;
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
h1, h2, h3 {
|
|
153
606
|
line-height: 1.2;
|
|
154
607
|
}
|
|
155
608
|
|
|
156
609
|
h1 {
|
|
157
610
|
margin: 0;
|
|
158
|
-
font-size: clamp(2.25rem, 6vw, 3.5rem);
|
|
159
|
-
max-width: 12ch;
|
|
160
611
|
}
|
|
161
612
|
|
|
162
613
|
.lede {
|
|
614
|
+
max-width: 64ch;
|
|
615
|
+
margin: 0;
|
|
163
616
|
color: var(--muted);
|
|
164
|
-
font-size: 1.
|
|
165
|
-
|
|
617
|
+
font-size: clamp(1rem, 1.4vw, 1.15rem);
|
|
618
|
+
line-height: 1.65;
|
|
166
619
|
}
|
|
167
620
|
|
|
621
|
+
/* ---------- Cards ---------- */
|
|
622
|
+
|
|
168
623
|
.docs-grid {
|
|
169
624
|
display: grid;
|
|
170
625
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
171
626
|
gap: 1rem;
|
|
172
|
-
padding: 2rem 0
|
|
627
|
+
padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 5rem);
|
|
173
628
|
}
|
|
174
629
|
|
|
175
630
|
.docs-card {
|
|
176
|
-
|
|
631
|
+
position: relative;
|
|
177
632
|
display: flex;
|
|
178
633
|
flex-direction: column;
|
|
179
|
-
gap: 0.
|
|
180
|
-
padding: 1.25rem;
|
|
634
|
+
gap: 0.55rem;
|
|
635
|
+
padding: 1.25rem 1.25rem 1.4rem;
|
|
181
636
|
background: var(--surface);
|
|
182
637
|
border: 1px solid var(--line);
|
|
183
638
|
border-radius: var(--radius);
|
|
184
639
|
color: var(--ink);
|
|
185
640
|
text-decoration: none;
|
|
641
|
+
overflow: hidden;
|
|
642
|
+
isolation: isolate;
|
|
643
|
+
transition: border-color 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease);
|
|
644
|
+
}
|
|
645
|
+
|
|
646
|
+
.docs-card::before {
|
|
647
|
+
content: "";
|
|
648
|
+
position: absolute;
|
|
649
|
+
inset: 0;
|
|
650
|
+
background: linear-gradient(135deg, var(--accent-soft), transparent 60%);
|
|
651
|
+
opacity: 0;
|
|
652
|
+
transition: opacity 180ms var(--ease);
|
|
653
|
+
z-index: -1;
|
|
186
654
|
}
|
|
187
655
|
|
|
188
656
|
.docs-card:hover {
|
|
189
|
-
border-color: var(--accent);
|
|
657
|
+
border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
|
|
658
|
+
transform: translateY(-2px);
|
|
659
|
+
box-shadow: var(--shadow-md);
|
|
660
|
+
}
|
|
661
|
+
|
|
662
|
+
.docs-card:hover::before {
|
|
663
|
+
opacity: 1;
|
|
190
664
|
}
|
|
191
665
|
|
|
192
666
|
.docs-card__kicker {
|
|
667
|
+
display: inline-block;
|
|
668
|
+
align-self: flex-start;
|
|
669
|
+
padding: 0.2rem 0.55rem;
|
|
670
|
+
border-radius: 999px;
|
|
671
|
+
background: var(--accent-soft);
|
|
193
672
|
color: var(--accent);
|
|
194
|
-
font-size: 0.
|
|
195
|
-
font-weight:
|
|
673
|
+
font-size: 0.7rem;
|
|
674
|
+
font-weight: 600;
|
|
675
|
+
letter-spacing: 0.04em;
|
|
676
|
+
text-transform: uppercase;
|
|
196
677
|
}
|
|
197
678
|
|
|
198
679
|
.docs-card strong {
|
|
199
|
-
font-size: 1.
|
|
680
|
+
font-size: 1.1rem;
|
|
681
|
+
font-weight: 700;
|
|
682
|
+
letter-spacing: -0.015em;
|
|
200
683
|
}
|
|
201
684
|
|
|
202
|
-
.docs-
|
|
685
|
+
.docs-card__desc {
|
|
203
686
|
color: var(--muted);
|
|
687
|
+
font-size: 0.92rem;
|
|
688
|
+
line-height: 1.55;
|
|
204
689
|
}
|
|
205
690
|
|
|
691
|
+
.docs-card__arrow {
|
|
692
|
+
position: absolute;
|
|
693
|
+
right: 1rem;
|
|
694
|
+
bottom: 1rem;
|
|
695
|
+
display: inline-flex;
|
|
696
|
+
align-items: center;
|
|
697
|
+
justify-content: center;
|
|
698
|
+
width: 28px;
|
|
699
|
+
height: 28px;
|
|
700
|
+
border-radius: 50%;
|
|
701
|
+
color: var(--muted);
|
|
702
|
+
background: transparent;
|
|
703
|
+
transition: color 180ms var(--ease), background 180ms var(--ease), transform 180ms var(--ease);
|
|
704
|
+
}
|
|
705
|
+
|
|
706
|
+
.docs-card:hover .docs-card__arrow {
|
|
707
|
+
color: var(--accent);
|
|
708
|
+
background: var(--accent-soft);
|
|
709
|
+
transform: translateX(2px);
|
|
710
|
+
}
|
|
711
|
+
|
|
712
|
+
/* ---------- Doc layout ---------- */
|
|
713
|
+
|
|
206
714
|
.doc-layout {
|
|
207
715
|
display: grid;
|
|
208
716
|
grid-template-columns: minmax(0, 1fr);
|
|
209
|
-
gap:
|
|
210
|
-
padding:
|
|
717
|
+
gap: 3rem;
|
|
718
|
+
padding: clamp(2.25rem, 4vw, 3.25rem) 0 clamp(3rem, 5vw, 4.5rem);
|
|
211
719
|
}
|
|
212
720
|
|
|
213
721
|
.doc-layout--with-toc {
|
|
@@ -219,16 +727,18 @@ h1 {
|
|
|
219
727
|
}
|
|
220
728
|
|
|
221
729
|
.doc-header {
|
|
222
|
-
padding-bottom: 1.5rem;
|
|
223
|
-
border-bottom: 1px solid var(--line);
|
|
224
730
|
margin-bottom: 2rem;
|
|
225
731
|
}
|
|
226
732
|
|
|
227
733
|
.doc-header h1 {
|
|
228
|
-
|
|
229
|
-
font-size: clamp(2rem,
|
|
734
|
+
margin: 0.5rem 0 0;
|
|
735
|
+
font-size: clamp(2rem, 3.5vw, 2.6rem);
|
|
736
|
+
font-weight: 800;
|
|
737
|
+
letter-spacing: -0.025em;
|
|
230
738
|
}
|
|
231
739
|
|
|
740
|
+
/* npm link cards (used in some docs) */
|
|
741
|
+
|
|
232
742
|
.npm-links {
|
|
233
743
|
display: grid;
|
|
234
744
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
@@ -247,44 +757,52 @@ h1 {
|
|
|
247
757
|
background: var(--surface);
|
|
248
758
|
color: var(--ink);
|
|
249
759
|
text-decoration: none;
|
|
760
|
+
transition: border-color 150ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease);
|
|
250
761
|
}
|
|
251
762
|
|
|
252
763
|
.npm-link-card:hover {
|
|
253
|
-
border-color: var(--accent);
|
|
764
|
+
border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
|
|
765
|
+
transform: translateY(-2px);
|
|
766
|
+
box-shadow: var(--shadow-sm);
|
|
254
767
|
}
|
|
255
768
|
|
|
256
769
|
.npm-link-card span {
|
|
257
770
|
color: var(--accent);
|
|
258
|
-
font-size: 0.
|
|
259
|
-
font-weight:
|
|
771
|
+
font-size: 0.74rem;
|
|
772
|
+
font-weight: 700;
|
|
773
|
+
letter-spacing: 0.04em;
|
|
260
774
|
text-transform: uppercase;
|
|
261
775
|
}
|
|
262
776
|
|
|
263
777
|
.npm-link-card strong {
|
|
264
|
-
font-size: 1.
|
|
778
|
+
font-size: 1.02rem;
|
|
265
779
|
}
|
|
266
780
|
|
|
267
781
|
.npm-link-card small {
|
|
268
782
|
color: var(--muted);
|
|
269
783
|
font-size: 0.9rem;
|
|
270
|
-
line-height: 1.
|
|
784
|
+
line-height: 1.5;
|
|
271
785
|
}
|
|
272
786
|
|
|
787
|
+
/* ---------- TOC ---------- */
|
|
788
|
+
|
|
273
789
|
.doc-toc {
|
|
274
790
|
position: sticky;
|
|
275
791
|
top: 5.5rem;
|
|
276
792
|
align-self: start;
|
|
277
793
|
max-height: calc(100vh - 7rem);
|
|
278
794
|
overflow: auto;
|
|
279
|
-
padding-left: 1rem;
|
|
795
|
+
padding-left: 1.1rem;
|
|
280
796
|
border-left: 1px solid var(--line);
|
|
281
797
|
}
|
|
282
798
|
|
|
283
799
|
.doc-toc__title {
|
|
284
|
-
margin: 0 0 0.
|
|
285
|
-
color: var(--
|
|
286
|
-
font-size: 0.
|
|
287
|
-
font-weight:
|
|
800
|
+
margin: 0 0 0.85rem;
|
|
801
|
+
color: var(--muted-2);
|
|
802
|
+
font-size: 0.74rem;
|
|
803
|
+
font-weight: 700;
|
|
804
|
+
letter-spacing: 0.06em;
|
|
805
|
+
text-transform: uppercase;
|
|
288
806
|
}
|
|
289
807
|
|
|
290
808
|
.doc-toc ol {
|
|
@@ -294,7 +812,7 @@ h1 {
|
|
|
294
812
|
}
|
|
295
813
|
|
|
296
814
|
.doc-toc__item + .doc-toc__item {
|
|
297
|
-
margin-top: 0.
|
|
815
|
+
margin-top: 0.15rem;
|
|
298
816
|
}
|
|
299
817
|
|
|
300
818
|
.doc-toc__item--level-3 {
|
|
@@ -306,101 +824,247 @@ h1 {
|
|
|
306
824
|
}
|
|
307
825
|
|
|
308
826
|
.doc-toc a {
|
|
827
|
+
display: block;
|
|
828
|
+
position: relative;
|
|
829
|
+
padding: 0.3rem 0.5rem 0.3rem 0.65rem;
|
|
830
|
+
border-radius: 6px;
|
|
309
831
|
color: var(--muted);
|
|
310
832
|
text-decoration: none;
|
|
311
|
-
font-size: 0.
|
|
312
|
-
line-height: 1.
|
|
833
|
+
font-size: 0.86rem;
|
|
834
|
+
line-height: 1.4;
|
|
835
|
+
transition: color 120ms var(--ease), background 120ms var(--ease);
|
|
836
|
+
}
|
|
837
|
+
|
|
838
|
+
.doc-toc a::before {
|
|
839
|
+
content: "";
|
|
840
|
+
position: absolute;
|
|
841
|
+
left: -1.1rem;
|
|
842
|
+
top: 50%;
|
|
843
|
+
transform: translateY(-50%) scaleY(0);
|
|
844
|
+
width: 2px;
|
|
845
|
+
height: 1.05rem;
|
|
846
|
+
border-radius: 2px;
|
|
847
|
+
background: var(--accent);
|
|
848
|
+
transition: transform 160ms var(--ease);
|
|
313
849
|
}
|
|
314
850
|
|
|
315
851
|
.doc-toc a:hover {
|
|
852
|
+
color: var(--ink);
|
|
853
|
+
background: var(--surface-2);
|
|
854
|
+
}
|
|
855
|
+
|
|
856
|
+
.doc-toc a.is-active,
|
|
857
|
+
.doc-toc a[aria-current="true"] {
|
|
316
858
|
color: var(--accent);
|
|
859
|
+
font-weight: 600;
|
|
317
860
|
}
|
|
318
861
|
|
|
862
|
+
.doc-toc a.is-active::before,
|
|
863
|
+
.doc-toc a[aria-current="true"]::before {
|
|
864
|
+
transform: translateY(-50%) scaleY(1);
|
|
865
|
+
}
|
|
866
|
+
|
|
867
|
+
/* ---------- Prose ---------- */
|
|
868
|
+
|
|
319
869
|
.prose {
|
|
320
870
|
max-width: 78ch;
|
|
321
871
|
color: var(--prose-ink);
|
|
872
|
+
font-size: 1rem;
|
|
873
|
+
}
|
|
874
|
+
|
|
875
|
+
.prose > :first-child {
|
|
876
|
+
margin-top: 0;
|
|
322
877
|
}
|
|
323
878
|
|
|
324
879
|
.prose h1 {
|
|
325
|
-
|
|
880
|
+
margin: 0 0 1rem;
|
|
881
|
+
color: var(--ink);
|
|
882
|
+
font-size: clamp(2rem, 3.6vw, 2.55rem);
|
|
883
|
+
font-weight: 800;
|
|
884
|
+
letter-spacing: -0.025em;
|
|
326
885
|
}
|
|
327
886
|
|
|
328
887
|
.prose h2 {
|
|
329
|
-
margin-top: 2.
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
padding-bottom: 0.5rem;
|
|
888
|
+
margin-top: 2.5rem;
|
|
889
|
+
margin-bottom: 0.85rem;
|
|
890
|
+
padding-bottom: 0.55rem;
|
|
333
891
|
border-bottom: 1px solid var(--line);
|
|
892
|
+
color: var(--ink);
|
|
893
|
+
font-size: 1.5rem;
|
|
894
|
+
font-weight: 700;
|
|
334
895
|
}
|
|
335
896
|
|
|
336
897
|
.prose h3 {
|
|
337
|
-
margin-top:
|
|
898
|
+
margin-top: 2rem;
|
|
899
|
+
margin-bottom: 0.6rem;
|
|
338
900
|
color: var(--ink);
|
|
901
|
+
font-size: 1.18rem;
|
|
902
|
+
font-weight: 700;
|
|
339
903
|
}
|
|
340
904
|
|
|
341
|
-
.prose
|
|
342
|
-
.
|
|
905
|
+
.prose h4 {
|
|
906
|
+
margin-top: 1.5rem;
|
|
907
|
+
margin-bottom: 0.45rem;
|
|
908
|
+
color: var(--ink);
|
|
343
909
|
font-size: 1rem;
|
|
910
|
+
font-weight: 700;
|
|
911
|
+
}
|
|
912
|
+
|
|
913
|
+
.prose p {
|
|
914
|
+
margin: 0 0 1rem;
|
|
344
915
|
}
|
|
345
916
|
|
|
346
917
|
.prose ul,
|
|
347
918
|
.prose ol {
|
|
348
|
-
padding-left: 1.
|
|
919
|
+
padding-left: 1.4rem;
|
|
920
|
+
margin: 0 0 1rem;
|
|
349
921
|
}
|
|
350
922
|
|
|
351
923
|
.prose li + li {
|
|
352
|
-
margin-top: 0.
|
|
924
|
+
margin-top: 0.3rem;
|
|
925
|
+
}
|
|
926
|
+
|
|
927
|
+
.prose a {
|
|
928
|
+
color: var(--accent);
|
|
929
|
+
text-decoration: underline;
|
|
930
|
+
text-decoration-color: color-mix(in srgb, var(--accent) 30%, transparent);
|
|
931
|
+
text-underline-offset: 3px;
|
|
932
|
+
}
|
|
933
|
+
|
|
934
|
+
.prose a:hover {
|
|
935
|
+
text-decoration-color: var(--accent);
|
|
936
|
+
}
|
|
937
|
+
|
|
938
|
+
.prose strong {
|
|
939
|
+
color: var(--ink);
|
|
940
|
+
font-weight: 700;
|
|
353
941
|
}
|
|
354
942
|
|
|
355
943
|
.prose code {
|
|
356
944
|
background: var(--code-bg);
|
|
357
|
-
border
|
|
358
|
-
|
|
359
|
-
|
|
945
|
+
border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
|
|
946
|
+
border-radius: 5px;
|
|
947
|
+
padding: 0.08rem 0.34rem;
|
|
948
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
949
|
+
font-size: 0.88em;
|
|
950
|
+
color: var(--ink-soft);
|
|
360
951
|
}
|
|
361
952
|
|
|
362
953
|
.prose pre {
|
|
954
|
+
position: relative;
|
|
363
955
|
overflow: auto;
|
|
364
|
-
|
|
956
|
+
margin: 1.4rem 0;
|
|
957
|
+
padding: 1.1rem 1.2rem;
|
|
365
958
|
background: var(--pre-bg);
|
|
366
959
|
color: var(--pre-ink);
|
|
960
|
+
border: 1px solid color-mix(in srgb, var(--pre-bg) 60%, var(--line));
|
|
367
961
|
border-radius: var(--radius);
|
|
962
|
+
box-shadow: var(--shadow-sm);
|
|
963
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
964
|
+
font-size: 0.86rem;
|
|
965
|
+
line-height: 1.6;
|
|
368
966
|
}
|
|
369
967
|
|
|
370
968
|
.prose pre code {
|
|
371
969
|
background: transparent;
|
|
970
|
+
border: 0;
|
|
372
971
|
padding: 0;
|
|
972
|
+
color: inherit;
|
|
973
|
+
font-size: inherit;
|
|
974
|
+
}
|
|
975
|
+
|
|
976
|
+
.prose pre code.hljs {
|
|
977
|
+
color: var(--pre-ink);
|
|
373
978
|
}
|
|
374
979
|
|
|
980
|
+
.prose .hljs-comment,
|
|
981
|
+
.prose .hljs-quote { color: var(--syntax-comment); font-style: italic; }
|
|
982
|
+
.prose .hljs-keyword,
|
|
983
|
+
.prose .hljs-selector-tag,
|
|
984
|
+
.prose .hljs-subst { color: var(--syntax-keyword); }
|
|
985
|
+
.prose .hljs-title,
|
|
986
|
+
.prose .hljs-section,
|
|
987
|
+
.prose .hljs-name,
|
|
988
|
+
.prose .hljs-selector-id,
|
|
989
|
+
.prose .hljs-selector-class { color: var(--syntax-title); }
|
|
990
|
+
.prose .hljs-string,
|
|
991
|
+
.prose .hljs-regexp,
|
|
992
|
+
.prose .hljs-symbol,
|
|
993
|
+
.prose .hljs-bullet { color: var(--syntax-string); }
|
|
994
|
+
.prose .hljs-number,
|
|
995
|
+
.prose .hljs-literal { color: var(--syntax-number); }
|
|
996
|
+
.prose .hljs-attr,
|
|
997
|
+
.prose .hljs-attribute,
|
|
998
|
+
.prose .hljs-variable,
|
|
999
|
+
.prose .hljs-template-variable { color: var(--syntax-attr); }
|
|
1000
|
+
.prose .hljs-built_in,
|
|
1001
|
+
.prose .hljs-type,
|
|
1002
|
+
.prose .hljs-class .hljs-title { color: var(--syntax-built-in); }
|
|
1003
|
+
.prose .hljs-deletion { color: var(--syntax-deletion); }
|
|
1004
|
+
.prose .hljs-addition { color: var(--syntax-addition); }
|
|
1005
|
+
.prose .hljs-emphasis { font-style: italic; }
|
|
1006
|
+
.prose .hljs-strong { font-weight: 700; }
|
|
1007
|
+
|
|
375
1008
|
.prose table {
|
|
376
1009
|
display: block;
|
|
377
1010
|
width: 100%;
|
|
378
1011
|
overflow-x: auto;
|
|
379
1012
|
margin: 1.5rem 0;
|
|
380
|
-
border-collapse:
|
|
1013
|
+
border-collapse: separate;
|
|
1014
|
+
border-spacing: 0;
|
|
381
1015
|
font-size: 0.94rem;
|
|
1016
|
+
border: 1px solid var(--line);
|
|
1017
|
+
border-radius: var(--radius);
|
|
382
1018
|
}
|
|
383
1019
|
|
|
384
1020
|
.prose th,
|
|
385
1021
|
.prose td {
|
|
386
|
-
padding: 0.
|
|
387
|
-
border: 1px solid var(--line);
|
|
1022
|
+
padding: 0.7rem 0.85rem;
|
|
1023
|
+
border-bottom: 1px solid var(--line);
|
|
388
1024
|
text-align: left;
|
|
389
1025
|
vertical-align: top;
|
|
390
1026
|
}
|
|
391
1027
|
|
|
1028
|
+
.prose th + th,
|
|
1029
|
+
.prose td + td {
|
|
1030
|
+
border-left: 1px solid var(--line);
|
|
1031
|
+
}
|
|
1032
|
+
|
|
1033
|
+
.prose tr:last-child td {
|
|
1034
|
+
border-bottom: 0;
|
|
1035
|
+
}
|
|
1036
|
+
|
|
392
1037
|
.prose th {
|
|
393
|
-
background: var(--
|
|
1038
|
+
background: var(--surface-2);
|
|
394
1039
|
color: var(--ink);
|
|
395
|
-
font-weight:
|
|
1040
|
+
font-weight: 700;
|
|
1041
|
+
font-size: 0.84rem;
|
|
1042
|
+
letter-spacing: 0.02em;
|
|
1043
|
+
text-transform: uppercase;
|
|
396
1044
|
}
|
|
397
1045
|
|
|
398
1046
|
.prose blockquote {
|
|
399
1047
|
margin: 1.5rem 0;
|
|
400
|
-
padding: 0.
|
|
401
|
-
border-left:
|
|
1048
|
+
padding: 0.85rem 1.1rem;
|
|
1049
|
+
border-left: 3px solid var(--accent);
|
|
1050
|
+
border-radius: 0 var(--radius) var(--radius) 0;
|
|
402
1051
|
background: var(--accent-soft);
|
|
403
|
-
color: var(--ink);
|
|
1052
|
+
color: var(--ink-soft);
|
|
1053
|
+
}
|
|
1054
|
+
|
|
1055
|
+
.prose blockquote p:last-child {
|
|
1056
|
+
margin-bottom: 0;
|
|
1057
|
+
}
|
|
1058
|
+
|
|
1059
|
+
.prose hr {
|
|
1060
|
+
margin: 2.5rem 0;
|
|
1061
|
+
border: 0;
|
|
1062
|
+
border-top: 1px solid var(--line);
|
|
1063
|
+
}
|
|
1064
|
+
|
|
1065
|
+
.prose img {
|
|
1066
|
+
max-width: 100%;
|
|
1067
|
+
border-radius: var(--radius);
|
|
404
1068
|
}
|
|
405
1069
|
|
|
406
1070
|
.prose .contains-task-list {
|
|
@@ -421,41 +1085,57 @@ h1 {
|
|
|
421
1085
|
accent-color: var(--accent);
|
|
422
1086
|
}
|
|
423
1087
|
|
|
1088
|
+
/* GitHub-style alerts */
|
|
1089
|
+
|
|
424
1090
|
.prose .zp-alert {
|
|
1091
|
+
position: relative;
|
|
425
1092
|
margin: 1.5rem 0;
|
|
426
|
-
padding: 0.
|
|
427
|
-
border
|
|
428
|
-
border-
|
|
429
|
-
|
|
430
|
-
|
|
1093
|
+
padding: 0.95rem 1.1rem 0.95rem 1.1rem;
|
|
1094
|
+
border: 1px solid color-mix(in srgb, var(--alert-note) 30%, var(--line));
|
|
1095
|
+
border-left: 3px solid var(--alert-note);
|
|
1096
|
+
border-radius: var(--radius);
|
|
1097
|
+
background: color-mix(in srgb, var(--alert-note) 7%, var(--surface));
|
|
1098
|
+
color: var(--ink-soft);
|
|
431
1099
|
}
|
|
432
1100
|
|
|
433
1101
|
.prose .zp-alert--tip {
|
|
1102
|
+
border-color: color-mix(in srgb, var(--alert-tip) 30%, var(--line));
|
|
434
1103
|
border-left-color: var(--alert-tip);
|
|
435
|
-
background: color-mix(in srgb, var(--alert-tip)
|
|
1104
|
+
background: color-mix(in srgb, var(--alert-tip) 7%, var(--surface));
|
|
436
1105
|
}
|
|
437
1106
|
|
|
438
1107
|
.prose .zp-alert--important {
|
|
1108
|
+
border-color: color-mix(in srgb, var(--alert-important) 30%, var(--line));
|
|
439
1109
|
border-left-color: var(--alert-important);
|
|
440
|
-
background: color-mix(in srgb, var(--alert-important)
|
|
1110
|
+
background: color-mix(in srgb, var(--alert-important) 7%, var(--surface));
|
|
441
1111
|
}
|
|
442
1112
|
|
|
443
1113
|
.prose .zp-alert--warning {
|
|
1114
|
+
border-color: color-mix(in srgb, var(--alert-warning) 30%, var(--line));
|
|
444
1115
|
border-left-color: var(--alert-warning);
|
|
445
|
-
background: color-mix(in srgb, var(--alert-warning)
|
|
1116
|
+
background: color-mix(in srgb, var(--alert-warning) 8%, var(--surface));
|
|
446
1117
|
}
|
|
447
1118
|
|
|
448
1119
|
.prose .zp-alert--caution {
|
|
1120
|
+
border-color: color-mix(in srgb, var(--alert-caution) 30%, var(--line));
|
|
449
1121
|
border-left-color: var(--alert-caution);
|
|
450
|
-
background: color-mix(in srgb, var(--alert-caution)
|
|
1122
|
+
background: color-mix(in srgb, var(--alert-caution) 7%, var(--surface));
|
|
451
1123
|
}
|
|
452
1124
|
|
|
453
1125
|
.prose .zp-alert__title {
|
|
454
1126
|
margin: 0 0 0.45rem;
|
|
455
|
-
color: var(--
|
|
456
|
-
font-weight:
|
|
1127
|
+
color: var(--alert-note);
|
|
1128
|
+
font-weight: 700;
|
|
1129
|
+
font-size: 0.9rem;
|
|
1130
|
+
letter-spacing: 0.01em;
|
|
1131
|
+
text-transform: uppercase;
|
|
457
1132
|
}
|
|
458
1133
|
|
|
1134
|
+
.prose .zp-alert--tip .zp-alert__title { color: var(--alert-tip); }
|
|
1135
|
+
.prose .zp-alert--important .zp-alert__title { color: var(--alert-important); }
|
|
1136
|
+
.prose .zp-alert--warning .zp-alert__title { color: var(--alert-warning); }
|
|
1137
|
+
.prose .zp-alert--caution .zp-alert__title { color: var(--alert-caution); }
|
|
1138
|
+
|
|
459
1139
|
.prose .zp-alert > :last-child {
|
|
460
1140
|
margin-bottom: 0;
|
|
461
1141
|
}
|
|
@@ -466,6 +1146,8 @@ h1 {
|
|
|
466
1146
|
margin-top: 1rem;
|
|
467
1147
|
}
|
|
468
1148
|
|
|
1149
|
+
/* ---------- Doc footer / source link ---------- */
|
|
1150
|
+
|
|
469
1151
|
.doc-source {
|
|
470
1152
|
max-width: 78ch;
|
|
471
1153
|
margin-top: 3rem;
|
|
@@ -474,33 +1156,77 @@ h1 {
|
|
|
474
1156
|
}
|
|
475
1157
|
|
|
476
1158
|
.doc-source a {
|
|
1159
|
+
display: inline-flex;
|
|
1160
|
+
align-items: center;
|
|
1161
|
+
gap: 0.4rem;
|
|
477
1162
|
color: var(--muted);
|
|
478
|
-
font-size: 0.
|
|
479
|
-
font-weight:
|
|
1163
|
+
font-size: 0.9rem;
|
|
1164
|
+
font-weight: 600;
|
|
480
1165
|
text-decoration: none;
|
|
1166
|
+
transition: color 120ms var(--ease);
|
|
481
1167
|
}
|
|
482
1168
|
|
|
483
1169
|
.doc-source a:hover {
|
|
484
1170
|
color: var(--accent);
|
|
485
|
-
text-decoration: underline;
|
|
486
1171
|
}
|
|
487
1172
|
|
|
1173
|
+
/* ---------- Buttons ---------- */
|
|
1174
|
+
|
|
488
1175
|
.button-link {
|
|
489
|
-
display: inline-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
1176
|
+
display: inline-flex;
|
|
1177
|
+
align-items: center;
|
|
1178
|
+
gap: 0.45rem;
|
|
1179
|
+
padding: 0.65rem 1rem;
|
|
1180
|
+
border: 1px solid transparent;
|
|
1181
|
+
border-radius: 9px;
|
|
1182
|
+
background: var(--ink);
|
|
1183
|
+
color: var(--bg);
|
|
495
1184
|
text-decoration: none;
|
|
496
|
-
font-weight:
|
|
1185
|
+
font-weight: 600;
|
|
1186
|
+
font-size: 0.92rem;
|
|
1187
|
+
letter-spacing: -0.005em;
|
|
1188
|
+
box-shadow: var(--shadow-sm);
|
|
1189
|
+
transition: transform 150ms var(--ease), box-shadow 150ms var(--ease), background 150ms var(--ease), color 150ms var(--ease);
|
|
1190
|
+
}
|
|
1191
|
+
|
|
1192
|
+
.button-link:hover {
|
|
1193
|
+
transform: translateY(-1px);
|
|
1194
|
+
box-shadow: var(--shadow-md);
|
|
1195
|
+
background: var(--accent);
|
|
1196
|
+
color: var(--accent-ink);
|
|
1197
|
+
}
|
|
1198
|
+
|
|
1199
|
+
.button-link--ghost {
|
|
1200
|
+
background: transparent;
|
|
1201
|
+
color: var(--ink);
|
|
1202
|
+
border-color: var(--line);
|
|
1203
|
+
box-shadow: none;
|
|
1204
|
+
}
|
|
1205
|
+
|
|
1206
|
+
.button-link--ghost:hover {
|
|
1207
|
+
background: var(--surface-2);
|
|
1208
|
+
color: var(--ink);
|
|
1209
|
+
border-color: var(--line-strong);
|
|
497
1210
|
}
|
|
498
1211
|
|
|
1212
|
+
/* ---------- 404 ---------- */
|
|
1213
|
+
|
|
499
1214
|
.not-found {
|
|
500
|
-
padding:
|
|
1215
|
+
padding: clamp(4rem, 8vw, 6rem) 0;
|
|
1216
|
+
text-align: left;
|
|
501
1217
|
}
|
|
502
1218
|
|
|
1219
|
+
.not-found h1 {
|
|
1220
|
+
margin: 0.5rem 0 1rem;
|
|
1221
|
+
font-size: clamp(2.2rem, 4vw, 3rem);
|
|
1222
|
+
font-weight: 800;
|
|
1223
|
+
letter-spacing: -0.025em;
|
|
1224
|
+
}
|
|
1225
|
+
|
|
1226
|
+
/* ---------- Footer ---------- */
|
|
1227
|
+
|
|
503
1228
|
.site-footer {
|
|
1229
|
+
margin-top: auto;
|
|
504
1230
|
border-top: 1px solid var(--line);
|
|
505
1231
|
background: var(--surface);
|
|
506
1232
|
}
|
|
@@ -511,59 +1237,154 @@ h1 {
|
|
|
511
1237
|
align-items: center;
|
|
512
1238
|
justify-content: space-between;
|
|
513
1239
|
flex-wrap: wrap;
|
|
514
|
-
gap: 0.
|
|
1240
|
+
gap: 0.75rem 1.5rem;
|
|
1241
|
+
padding: 1.4rem 0;
|
|
1242
|
+
}
|
|
1243
|
+
|
|
1244
|
+
.site-footer__meta {
|
|
1245
|
+
display: flex;
|
|
1246
|
+
flex-wrap: wrap;
|
|
1247
|
+
gap: 0.35rem 1rem;
|
|
515
1248
|
}
|
|
516
1249
|
|
|
517
1250
|
.site-footer p {
|
|
518
1251
|
margin: 0;
|
|
519
1252
|
color: var(--muted);
|
|
520
|
-
font-size: 0.
|
|
1253
|
+
font-size: 0.9rem;
|
|
1254
|
+
}
|
|
1255
|
+
|
|
1256
|
+
.site-footer__nav ul {
|
|
1257
|
+
display: flex;
|
|
1258
|
+
flex-wrap: wrap;
|
|
1259
|
+
gap: 0.35rem 1.1rem;
|
|
1260
|
+
justify-content: flex-end;
|
|
1261
|
+
margin: 0;
|
|
1262
|
+
padding: 0;
|
|
1263
|
+
list-style: none;
|
|
521
1264
|
}
|
|
522
1265
|
|
|
523
1266
|
.site-footer a {
|
|
524
|
-
|
|
1267
|
+
color: var(--muted);
|
|
1268
|
+
font-weight: 500;
|
|
525
1269
|
text-decoration: none;
|
|
1270
|
+
font-size: 0.9rem;
|
|
1271
|
+
transition: color 120ms var(--ease);
|
|
526
1272
|
}
|
|
527
1273
|
|
|
528
1274
|
.site-footer a:hover {
|
|
1275
|
+
color: var(--ink);
|
|
529
1276
|
text-decoration: underline;
|
|
1277
|
+
text-underline-offset: 3px;
|
|
530
1278
|
}
|
|
531
1279
|
|
|
532
1280
|
[id] {
|
|
533
1281
|
scroll-margin-top: 100px;
|
|
534
1282
|
}
|
|
535
1283
|
|
|
536
|
-
|
|
537
|
-
-webkit-font-smoothing: antialiased;
|
|
538
|
-
}
|
|
1284
|
+
/* ---------- Responsive ---------- */
|
|
539
1285
|
|
|
540
|
-
@media (max-width:
|
|
541
|
-
.site-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
padding: 1rem 0;
|
|
1286
|
+
@media (max-width: 1120px) {
|
|
1287
|
+
.site-search {
|
|
1288
|
+
flex: 0 0 13rem;
|
|
1289
|
+
width: 13rem;
|
|
545
1290
|
}
|
|
1291
|
+
}
|
|
546
1292
|
|
|
547
|
-
|
|
548
|
-
|
|
1293
|
+
@media (max-width: 980px) {
|
|
1294
|
+
.docs-grid {
|
|
1295
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
549
1296
|
}
|
|
550
1297
|
|
|
551
|
-
.docs-grid,
|
|
552
|
-
.npm-links,
|
|
553
|
-
.doc-layout,
|
|
554
1298
|
.doc-layout--with-toc {
|
|
555
|
-
grid-template-columns: 1fr;
|
|
1299
|
+
grid-template-columns: minmax(0, 1fr);
|
|
556
1300
|
}
|
|
557
1301
|
|
|
558
1302
|
.doc-toc {
|
|
559
1303
|
position: static;
|
|
560
1304
|
max-height: none;
|
|
561
|
-
padding:
|
|
1305
|
+
padding: 1.25rem 0 0;
|
|
562
1306
|
border-left: 0;
|
|
563
1307
|
border-top: 1px solid var(--line);
|
|
564
1308
|
}
|
|
1309
|
+
}
|
|
1310
|
+
|
|
1311
|
+
@media (max-width: 820px) {
|
|
1312
|
+
.nav-toggle {
|
|
1313
|
+
display: inline-flex;
|
|
1314
|
+
}
|
|
1315
|
+
|
|
1316
|
+
.site-header__inner {
|
|
1317
|
+
gap: 0.75rem;
|
|
1318
|
+
}
|
|
1319
|
+
|
|
1320
|
+
.site-header__actions {
|
|
1321
|
+
position: absolute;
|
|
1322
|
+
top: 100%;
|
|
1323
|
+
left: 0;
|
|
1324
|
+
right: 0;
|
|
1325
|
+
flex-direction: column;
|
|
1326
|
+
align-items: stretch;
|
|
1327
|
+
gap: 0.75rem;
|
|
1328
|
+
padding: 1rem 1.25rem 1.25rem;
|
|
1329
|
+
background: var(--surface);
|
|
1330
|
+
border-bottom: 1px solid var(--line);
|
|
1331
|
+
box-shadow: var(--shadow-md);
|
|
1332
|
+
transform: translateY(-8px);
|
|
1333
|
+
opacity: 0;
|
|
1334
|
+
pointer-events: none;
|
|
1335
|
+
transition: opacity 160ms var(--ease), transform 160ms var(--ease);
|
|
1336
|
+
}
|
|
1337
|
+
|
|
1338
|
+
.site-header__actions.is-open {
|
|
1339
|
+
opacity: 1;
|
|
1340
|
+
transform: translateY(0);
|
|
1341
|
+
pointer-events: auto;
|
|
1342
|
+
}
|
|
1343
|
+
|
|
1344
|
+
.site-nav ul {
|
|
1345
|
+
flex-direction: column;
|
|
1346
|
+
gap: 0.1rem;
|
|
1347
|
+
}
|
|
1348
|
+
|
|
1349
|
+
.site-nav a {
|
|
1350
|
+
padding: 0.6rem 0.75rem;
|
|
1351
|
+
}
|
|
1352
|
+
|
|
1353
|
+
.site-search {
|
|
1354
|
+
flex: 0 0 auto;
|
|
1355
|
+
width: 100%;
|
|
1356
|
+
}
|
|
1357
|
+
|
|
1358
|
+
.site-search__panel {
|
|
1359
|
+
left: 0;
|
|
1360
|
+
right: auto;
|
|
1361
|
+
width: 100%;
|
|
1362
|
+
}
|
|
1363
|
+
|
|
1364
|
+
.theme-toggle {
|
|
1365
|
+
align-self: flex-start;
|
|
1366
|
+
}
|
|
1367
|
+
}
|
|
1368
|
+
|
|
1369
|
+
@media (max-width: 600px) {
|
|
1370
|
+
.docs-grid {
|
|
1371
|
+
grid-template-columns: 1fr;
|
|
1372
|
+
}
|
|
1373
|
+
|
|
1374
|
+
.npm-links {
|
|
1375
|
+
grid-template-columns: 1fr;
|
|
1376
|
+
}
|
|
565
1377
|
|
|
566
1378
|
[id] {
|
|
567
|
-
scroll-margin-top:
|
|
1379
|
+
scroll-margin-top: 80px;
|
|
1380
|
+
}
|
|
1381
|
+
}
|
|
1382
|
+
|
|
1383
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1384
|
+
*,
|
|
1385
|
+
*::before,
|
|
1386
|
+
*::after {
|
|
1387
|
+
transition: none !important;
|
|
1388
|
+
animation: none !important;
|
|
568
1389
|
}
|
|
569
1390
|
}
|