@geekity/cms 0.11.0 → 0.12.0

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.
Files changed (26) hide show
  1. package/README.md +7 -2
  2. package/dist/web/render.d.ts.map +1 -1
  3. package/dist/web/render.js +27 -12
  4. package/dist/web/render.js.map +1 -1
  5. package/package.json +7 -2
  6. package/themes/default/README.md +201 -110
  7. package/themes/default/layouts/404.njk +2 -0
  8. package/themes/default/layouts/500.njk +2 -0
  9. package/themes/default/layouts/503.njk +2 -0
  10. package/themes/default/layouts/author.njk +3 -1
  11. package/themes/default/layouts/base.njk +1 -1
  12. package/themes/default/layouts/category.njk +4 -2
  13. package/themes/default/layouts/front-page.njk +1 -1
  14. package/themes/default/layouts/page.njk +4 -2
  15. package/themes/default/layouts/post.njk +31 -22
  16. package/themes/default/layouts/search.njk +2 -5
  17. package/themes/default/layouts/tag.njk +7 -1
  18. package/themes/default/partials/comment-form.njk +8 -0
  19. package/themes/default/partials/contact-form.njk +3 -0
  20. package/themes/default/partials/conversation.njk +11 -4
  21. package/themes/default/partials/kicker.njk +34 -0
  22. package/themes/default/partials/post-list.njk +40 -46
  23. package/themes/default/partials/reply-context.njk +12 -5
  24. package/themes/default/src/style.css +1095 -0
  25. package/themes/default/static/style.css +2071 -1160
  26. package/themes/default/theme.json +1 -1
package/themes/default/static/style.css CHANGED
@@ -1,1378 +1,2289 @@
1
- /*
2
- * The default theme's only stylesheet. Plain CSS, no build step, no
3
- * dependencies: a site that wants something else puts its own
4
- * `static/style.css` in the theme it wears and this file is never read again.
5
- *
6
- * The design is the andrewshell.org one (decision-16): a serif body and sans
7
- * headings at an 18px root on a 1.2 minor-third scale, warm paper, near-black
8
- * text, a rust primary and a blue secondary, one column at 42rem, links that
9
- * invert on hover and a rule in the primary colour.
10
- *
11
- * The source is light only. The dark scheme below is the same design on dark
12
- * paper, with the rust and the blue lifted until every text and background pair
13
- * meets WCAG 2.2 AA — 4.5:1 for body text, 3:1 for large text, rules and focus
14
- * outlines — in both schemes. `src/web/theme-colors.test.ts` reads the custom
15
- * properties out of this file and computes the ratios, so a colour changed here
16
- * that breaks one fails the build rather than a reader.
17
- */
18
-
19
- :root {
20
- /* Light and dark are both drawn below, so a browser may paint its own form
21
- controls, scrollbars and spellcheck marks to match. */
22
- color-scheme: light dark;
23
-
24
- --maxWidth-xs: 20rem;
25
- --maxWidth-sm: 24rem;
26
- --maxWidth-md: 28rem;
27
- --maxWidth-lg: 32rem;
28
- --maxWidth-xl: 36rem;
29
- --maxWidth-2xl: 42rem;
30
- --maxWidth-3xl: 48rem;
31
- --maxWidth-4xl: 56rem;
32
- --maxWidth-wrapper: var(--maxWidth-2xl);
33
-
34
- --spacing-0: 0;
35
- --spacing-1: 0.25rem;
36
- --spacing-2: 0.5rem;
37
- --spacing-3: 0.75rem;
38
- --spacing-4: 1rem;
39
- --spacing-5: 1.25rem;
40
- --spacing-6: 1.5rem;
41
- --spacing-8: 2rem;
42
- --spacing-10: 2.5rem;
43
- --spacing-12: 3rem;
44
- --spacing-16: 4rem;
45
- --spacing-20: 5rem;
46
- --spacing-24: 6rem;
47
- --spacing-32: 8rem;
48
-
49
- --fontFamily-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
50
- --fontFamily-serif: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
51
- --fontFamily-mono:
52
- ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
53
- --font-body: var(--fontFamily-serif);
54
- --font-heading: var(--fontFamily-sans);
55
-
56
- --fontWeight-normal: 400;
57
- --fontWeight-medium: 500;
58
- --fontWeight-semibold: 600;
59
- --fontWeight-bold: 700;
60
- --fontWeight-extrabold: 800;
61
- --fontWeight-black: 900;
62
-
63
- --fontSize-root: 18px;
64
- --lineHeight-none: 1;
65
- --lineHeight-tight: 1.1;
66
- --lineHeight-normal: 1.5;
67
- --lineHeight-relaxed: 1.625;
68
-
69
- /* 1.200 minor third type scale */
70
- --fontSize-0: 0.833rem;
71
- --fontSize-1: 1rem;
72
- --fontSize-2: 1.15rem;
73
- --fontSize-3: 1.31rem;
74
- --fontSize-4: 1.5rem;
75
- --fontSize-5: 1.72rem;
76
- --fontSize-6: 1.97rem;
77
- --fontSize-7: 2.25rem;
78
-
79
- --content-letter-spacing: -0.01em;
80
-
81
- /* Colours. `body` is the paper and `text` the ink; `base`, `base-2` and
82
- `base-3` are the surfaces that sit on the paper, warm, cool and raised.
83
- `code-background` and `code-text` are a block of code, named rather than
84
- folded into `base` so a highlighting theme has something to be measured
85
- against (TASK-86). */
86
- --color-body: #fdfcfb;
87
- --color-text: #240b00;
88
- --color-primary: #b33900;
89
- --color-secondary: #007ab3;
90
- --color-base: rgb(245 243 243);
91
- --color-base-2: rgb(247 248 249);
92
- --color-base-3: rgb(255 255 255);
93
- --color-code-background: #f6f3f1;
94
- --color-code-text: #240b00;
95
- --color-error: #b3261e;
96
-
97
- /* Syntax highlighting: the Tomorrow palette, light member (TASK-86). The
98
- names are what each colour marks up, and the base16 slot they come from is
99
- in the comment; the highlighter is highlight.js, whose base16 Tomorrow
100
- theme is the mapping these follow.
101
-
102
- Five of them are not the stock colour. Tomorrow was drawn for an editor,
103
- where a faint comment is a feature; on this paper the stock greys, orange,
104
- yellow, green and teal read at 1.7:1 to 3.5:1, so each was darkened along
105
- its own hue until it made 4.5:1 and no further. `src/web/theme-colors.test.ts`
106
- is what keeps that true. */
107
- --color-code-comment: #6c6d6a; /* base03, stock #8e908c */
108
- --color-code-tag: #6b6d6b; /* base04, stock #969896 */
109
- --color-code-name: #c82829; /* base08 */
110
- --color-code-literal: #a95608; /* base09, stock #f5871f */
111
- --color-code-class: #846700; /* base0A, stock #eab700 */
112
- --color-code-string: #5e7500; /* base0B, stock #718c00 */
113
- --color-code-support: #30767a; /* base0C, stock #3e999f */
114
- --color-code-function: #4271ae; /* base0D */
115
- --color-code-keyword: #8959a8; /* base0E */
116
- --color-code-meta: #945f52; /* base0F, stock #a3685a */
117
- --color-code-added-background: #dff0d8;
118
- --color-code-removed-background: #f8dcdc;
1
+ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
2
+ @layer properties {
3
+ @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
4
+ *, :before, :after, ::backdrop {
5
+ --tw-outline-style: solid;
6
+ --tw-leading: initial;
7
+ --tw-font-weight: initial;
8
+ --tw-tracking: initial;
9
+ --tw-border-style: solid;
10
+ --tw-space-y-reverse: 0;
11
+ --tw-shadow: 0 0 #0000;
12
+ --tw-shadow-color: initial;
13
+ --tw-shadow-alpha: 100%;
14
+ --tw-inset-shadow: 0 0 #0000;
15
+ --tw-inset-shadow-color: initial;
16
+ --tw-inset-shadow-alpha: 100%;
17
+ --tw-ring-color: initial;
18
+ --tw-ring-shadow: 0 0 #0000;
19
+ --tw-inset-ring-color: initial;
20
+ --tw-inset-ring-shadow: 0 0 #0000;
21
+ --tw-ring-inset: initial;
22
+ --tw-ring-offset-width: 0px;
23
+ --tw-ring-offset-color: #fff;
24
+ --tw-ring-offset-shadow: 0 0 #0000;
25
+ --tw-scale-x: 1;
26
+ --tw-scale-y: 1;
27
+ --tw-scale-z: 1;
28
+ }
29
+ }
119
30
  }
120
31
 
121
- @media (prefers-color-scheme: dark) {
122
- :root {
123
- --color-body: #191110;
124
- --color-text: #f4ece7;
125
- --color-primary: #ef7a48;
126
- --color-secondary: #3ea0d8;
127
- --color-base: rgb(38 30 28);
128
- --color-base-2: rgb(34 33 36);
129
- --color-base-3: rgb(45 36 33);
130
- --color-code-background: rgb(30 24 22);
131
- --color-code-text: #f4ece7;
132
- --color-error: #ff8093;
133
-
134
- /* The other member of the family, Tomorrow Night — the palette both source
135
- sites highlighted with, and the one highlight.js ships under that name.
136
- Only base0F needed lifting off this darker paper. */
137
- --color-code-comment: #999999; /* base03 */
138
- --color-code-tag: #b4b7b4; /* base04 */
139
- --color-code-name: #f2777a; /* base08 */
140
- --color-code-literal: #f99157; /* base09 */
141
- --color-code-class: #ffcc66; /* base0A */
142
- --color-code-string: #99cc99; /* base0B */
143
- --color-code-support: #66cccc; /* base0C */
144
- --color-code-function: #6699cc; /* base0D */
145
- --color-code-keyword: #cc99cc; /* base0E */
146
- --color-code-meta: #ae786b; /* base0F, stock #a3685a */
147
- --color-code-added-background: rgb(32 54 34);
148
- --color-code-removed-background: rgb(64 30 30);
32
+ @layer theme {
33
+ :root, :host {
34
+ --spacing: .25rem;
35
+ --container-2xl: 42rem;
36
+ --text-xs: .75rem;
37
+ --text-xs--line-height: calc(1 / .75);
38
+ --text-sm: .875rem;
39
+ --text-sm--line-height: calc(1.25 / .875);
40
+ --text-base: 1rem;
41
+ --text-base--line-height: calc(1.5 / 1);
42
+ --text-lg: 1.125rem;
43
+ --text-lg--line-height: calc(1.75 / 1.125);
44
+ --text-xl: 1.25rem;
45
+ --text-xl--line-height: calc(1.75 / 1.25);
46
+ --text-2xl: 1.5rem;
47
+ --text-2xl--line-height: calc(2 / 1.5);
48
+ --text-3xl: 1.875rem;
49
+ --text-3xl--line-height: calc(2.25 / 1.875);
50
+ --text-4xl: 2.25rem;
51
+ --text-4xl--line-height: calc(2.5 / 2.25);
52
+ --text-5xl: 3rem;
53
+ --text-5xl--line-height: 1;
54
+ --font-weight-normal: 400;
55
+ --font-weight-medium: 500;
56
+ --font-weight-semibold: 600;
57
+ --font-weight-bold: 700;
58
+ --tracking-tight: -.025em;
59
+ --tracking-normal: 0em;
60
+ --leading-tight: 1.25;
61
+ --leading-snug: 1.375;
62
+ --leading-relaxed: 1.625;
63
+ --radius-xs: .125rem;
64
+ --radius-sm: .25rem;
65
+ --radius-md: .375rem;
66
+ --default-transition-duration: .15s;
67
+ --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
68
+ --default-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
69
+ --default-mono-font-family: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
149
70
  }
150
71
  }
151
72
 
152
- /* Reset. The source theme leans on a normalize file; the handful of rules it
153
- actually depends on are folded in here instead, so the theme is one file. */
73
+ @layer base {
74
+ *, :after, :before, ::backdrop {
75
+ box-sizing: border-box;
76
+ border: 0 solid;
77
+ margin: 0;
78
+ padding: 0;
79
+ }
154
80
 
155
- *,
156
- *::before,
157
- *::after {
158
- box-sizing: border-box;
159
- }
81
+ ::file-selector-button {
82
+ box-sizing: border-box;
83
+ border: 0 solid;
84
+ margin: 0;
85
+ padding: 0;
86
+ }
160
87
 
161
- body,
162
- h1,
163
- h2,
164
- h3,
165
- h4,
166
- h5,
167
- h6,
168
- p,
169
- figure,
170
- blockquote,
171
- dl,
172
- dd {
173
- margin: 0;
174
- }
88
+ html, :host {
89
+ -webkit-text-size-adjust: 100%;
90
+ tab-size: 4;
91
+ line-height: 1.5;
92
+ font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
93
+ font-feature-settings: var(--default-font-feature-settings, normal);
94
+ font-variation-settings: var(--default-font-variation-settings, normal);
95
+ -webkit-tap-highlight-color: transparent;
96
+ }
175
97
 
176
- /* HTML elements */
177
-
178
- /* `scrollbar-gutter` keeps the scrollbar's room whether or not the page is
179
- long enough to scroll, so moving from a short page to a long one does not
180
- shift the column sideways. */
181
- html {
182
- scrollbar-gutter: stable;
183
- font-size: var(--fontSize-root);
184
- line-height: var(--lineHeight-relaxed);
185
- -webkit-text-size-adjust: 100%;
186
- -webkit-font-smoothing: antialiased;
187
- -moz-osx-font-smoothing: grayscale;
188
- }
98
+ hr {
99
+ height: 0;
100
+ color: inherit;
101
+ border-top-width: 1px;
102
+ }
189
103
 
190
- body {
191
- background-color: var(--color-body);
192
- color: var(--color-text);
193
- font-family: var(--font-body);
194
- font-size: var(--fontSize-1);
195
- text-rendering: optimizeSpeed;
196
- }
104
+ abbr:where([title]) {
105
+ -webkit-text-decoration: underline dotted;
106
+ text-decoration: underline dotted;
107
+ }
197
108
 
198
- footer {
199
- padding: var(--spacing-6) var(--spacing-0);
200
- font-family: var(--fontFamily-sans);
201
- }
109
+ h1, h2, h3, h4, h5, h6 {
110
+ font-size: inherit;
111
+ font-weight: inherit;
112
+ }
202
113
 
203
- nav,
204
- .bio {
205
- font-family: var(--fontFamily-sans);
206
- }
114
+ a {
115
+ color: inherit;
116
+ -webkit-text-decoration: inherit;
117
+ -webkit-text-decoration: inherit;
118
+ -webkit-text-decoration: inherit;
119
+ text-decoration: inherit;
120
+ }
207
121
 
208
- hr {
209
- height: 1px;
210
- border: 0;
211
- background: var(--color-primary);
212
- }
122
+ b, strong {
123
+ font-weight: bolder;
124
+ }
213
125
 
214
- img {
215
- max-width: 100%;
216
- height: auto;
217
- }
126
+ code, kbd, samp, pre {
127
+ font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
128
+ font-feature-settings: var(--default-mono-font-feature-settings, normal);
129
+ font-variation-settings: var(--default-mono-font-variation-settings, normal);
130
+ font-size: 1em;
131
+ }
218
132
 
219
- figure {
220
- margin: var(--spacing-0) var(--spacing-0) var(--spacing-4) var(--spacing-0);
221
- }
133
+ small {
134
+ font-size: 80%;
135
+ }
222
136
 
223
- figcaption {
224
- font-size: var(--fontSize-0);
225
- text-align: center;
226
- }
137
+ sub, sup {
138
+ vertical-align: baseline;
139
+ font-size: 75%;
140
+ line-height: 0;
141
+ position: relative;
142
+ }
227
143
 
228
- time {
229
- white-space: nowrap;
230
- }
144
+ sub {
145
+ bottom: -.25em;
146
+ }
231
147
 
232
- small,
233
- .small {
234
- font-size: var(--fontSize-0);
235
- }
148
+ sup {
149
+ top: -.5em;
150
+ }
236
151
 
237
- /* Headings */
238
-
239
- h1,
240
- h2,
241
- h3,
242
- h4,
243
- h5,
244
- h6 {
245
- margin-top: var(--spacing-12);
246
- margin-bottom: var(--spacing-6);
247
- color: var(--color-text);
248
- font-family: var(--font-heading);
249
- font-weight: var(--fontWeight-bold);
250
- line-height: var(--lineHeight-tight);
251
- letter-spacing: -0.025em;
252
- text-wrap: balance;
253
- }
152
+ table {
153
+ text-indent: 0;
154
+ border-color: inherit;
155
+ border-collapse: collapse;
156
+ }
254
157
 
255
- h1 {
256
- font-size: var(--fontSize-6);
257
- font-weight: var(--fontWeight-black);
258
- }
158
+ :-moz-focusring:where(:not(iframe)) {
159
+ outline: auto;
160
+ }
259
161
 
260
- h2 {
261
- font-size: var(--fontSize-5);
262
- }
162
+ progress {
163
+ vertical-align: baseline;
164
+ }
263
165
 
264
- h3 {
265
- font-size: var(--fontSize-3);
266
- }
166
+ summary {
167
+ display: list-item;
168
+ }
267
169
 
268
- h4,
269
- h5,
270
- h6 {
271
- font-size: var(--fontSize-1);
272
- }
170
+ ol, ul, menu {
171
+ list-style: none;
172
+ }
273
173
 
274
- h2 > a,
275
- h3 > a,
276
- h4 > a,
277
- h5 > a,
278
- h6 > a {
279
- color: inherit;
280
- text-decoration: none;
281
- }
174
+ img, svg, video, canvas, audio, iframe, embed, object {
175
+ vertical-align: middle;
176
+ display: block;
177
+ }
282
178
 
283
- /* Links. A link inverts on hover: the primary colour behind it and the paper
284
- colour on top, which is the source design's one flourish. `:focus-visible`
285
- draws an outline instead, so a keyboard reader sees where they are without
286
- the colour swapping under them. */
179
+ img, video {
180
+ max-width: 100%;
181
+ height: auto;
182
+ }
287
183
 
288
- a,
289
- a:visited {
290
- color: var(--color-primary);
291
- }
184
+ button, input, select, optgroup, textarea {
185
+ font: inherit;
186
+ font-feature-settings: inherit;
187
+ font-variation-settings: inherit;
188
+ letter-spacing: inherit;
189
+ color: inherit;
190
+ opacity: 1;
191
+ background-color: #0000;
192
+ border-radius: 0;
193
+ }
292
194
 
293
- a:hover,
294
- a:focus {
295
- background-color: var(--color-primary);
296
- color: var(--color-body);
297
- text-decoration: none;
298
- }
195
+ ::file-selector-button {
196
+ font: inherit;
197
+ font-feature-settings: inherit;
198
+ font-variation-settings: inherit;
199
+ letter-spacing: inherit;
200
+ color: inherit;
201
+ opacity: 1;
202
+ background-color: #0000;
203
+ border-radius: 0;
204
+ }
299
205
 
300
- a:focus-visible {
301
- outline: 2px solid var(--color-primary);
302
- outline-offset: 2px;
303
- background-color: transparent;
304
- color: var(--color-primary);
305
- }
206
+ :where(select:is([multiple], [size])) optgroup {
207
+ font-weight: bolder;
208
+ }
306
209
 
307
- /* The two links that are the page saying where it is rather than somewhere to
308
- go: the site title at the root and the small link home everywhere else. Both
309
- read as plain text, in the heading font the rules below give them.
310
-
311
- Named rather than reached for through the element they sit in (TASK-111). A
312
- bare `header a` also caught the site menu, which is navigation somebody is
313
- meant to use, and every link inside a post's own `<header>`. The `:visited`
314
- halves are here because `a:visited` outweighs a bare class, and the hover
315
- and focus halves because `a:focus-visible` outweighs one too: without them
316
- these two would take the outline rather than the flourish. */
317
-
318
- .main-heading a,
319
- .main-heading a:visited,
320
- .header-link-home,
321
- .header-link-home:visited {
322
- color: var(--color-text);
323
- text-decoration: none;
324
- }
210
+ :where(select:is([multiple], [size])) optgroup option {
211
+ padding-inline-start: 20px;
212
+ }
325
213
 
326
- .main-heading a:hover,
327
- .main-heading a:focus,
328
- .header-link-home:hover,
329
- .header-link-home:focus {
330
- background-color: var(--color-primary);
331
- color: var(--color-body);
332
- text-decoration: none;
333
- }
214
+ ::file-selector-button {
215
+ margin-inline-end: 4px;
216
+ }
334
217
 
335
- /* Prose */
218
+ ::placeholder {
219
+ opacity: 1;
220
+ }
336
221
 
337
- /* Prose wraps `pretty`, which keeps a paragraph from ending on one short word;
338
- headings wrap `balance` above. A browser without either wraps as it always
339
- did. */
222
+ @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
223
+ ::placeholder {
224
+ color: currentColor;
225
+ }
340
226
 
341
- p,
342
- li,
343
- dd {
344
- text-wrap: pretty;
345
- }
227
+ @supports (color: color-mix(in lab, red, red)) {
228
+ ::placeholder {
229
+ color: color-mix(in oklab, currentcolor 50%, transparent);
230
+ }
231
+ }
232
+ }
346
233
 
347
- p {
348
- margin: var(--spacing-0) var(--spacing-0) var(--spacing-4) var(--spacing-0);
349
- padding: var(--spacing-0);
350
- line-height: var(--lineHeight-relaxed);
351
- }
234
+ textarea {
235
+ resize: vertical;
236
+ }
352
237
 
353
- ul,
354
- ol {
355
- margin-block: var(--spacing-0) var(--spacing-8);
356
- margin-inline: var(--spacing-4) var(--spacing-0);
357
- padding: var(--spacing-0);
358
- list-style-position: inside;
359
- list-style-image: none;
360
- }
238
+ ::-webkit-search-decoration {
239
+ -webkit-appearance: none;
240
+ }
361
241
 
362
- ul li,
363
- ol li {
364
- margin-bottom: var(--spacing-0);
365
- padding-inline-start: var(--spacing-0);
366
- }
242
+ ::-webkit-date-and-time-value {
243
+ min-height: 1lh;
244
+ text-align: inherit;
245
+ }
367
246
 
368
- li > p {
369
- display: inline;
370
- }
247
+ ::-webkit-datetime-edit {
248
+ display: inline-flex;
249
+ }
371
250
 
372
- li *:last-child {
373
- margin-bottom: var(--spacing-0);
374
- }
251
+ ::-webkit-datetime-edit-fields-wrapper {
252
+ padding: 0;
253
+ }
375
254
 
376
- details {
377
- margin-inline-start: var(--spacing-4);
378
- }
255
+ ::-webkit-datetime-edit {
256
+ padding-block: 0;
257
+ }
379
258
 
380
- details summary {
381
- cursor: pointer;
382
- }
259
+ ::-webkit-datetime-edit-year-field {
260
+ padding-block: 0;
261
+ }
383
262
 
384
- .list-none {
385
- list-style-type: none;
386
- }
263
+ ::-webkit-datetime-edit-month-field {
264
+ padding-block: 0;
265
+ }
387
266
 
388
- .hlist {
389
- display: flex;
390
- flex-wrap: wrap;
391
- margin: 0;
392
- }
267
+ ::-webkit-datetime-edit-day-field {
268
+ padding-block: 0;
269
+ }
393
270
 
394
- .hlist li {
395
- margin: 0;
396
- padding: 0;
397
- padding-inline-end: 0.5em;
398
- list-style-type: none;
399
- }
271
+ ::-webkit-datetime-edit-hour-field {
272
+ padding-block: 0;
273
+ }
400
274
 
401
- blockquote {
402
- margin-block: var(--spacing-8);
403
- margin-inline: var(--spacing-0) var(--spacing-8);
404
- padding: var(--spacing-0);
405
- padding-inline-start: var(--spacing-6);
406
- border-inline-start: var(--spacing-1) solid var(--color-secondary);
407
- color: var(--color-secondary);
408
- font-size: var(--fontSize-2);
409
- font-style: italic;
410
- }
275
+ ::-webkit-datetime-edit-minute-field {
276
+ padding-block: 0;
277
+ }
411
278
 
412
- blockquote > :last-child {
413
- margin-bottom: var(--spacing-0);
414
- }
279
+ ::-webkit-datetime-edit-second-field {
280
+ padding-block: 0;
281
+ }
282
+
283
+ ::-webkit-datetime-edit-millisecond-field {
284
+ padding-block: 0;
285
+ }
286
+
287
+ ::-webkit-datetime-edit-meridiem-field {
288
+ padding-block: 0;
289
+ }
290
+
291
+ ::-webkit-calendar-picker-indicator {
292
+ line-height: 1;
293
+ }
294
+
295
+ :-moz-ui-invalid {
296
+ box-shadow: none;
297
+ }
298
+
299
+ button, input:where([type="button"], [type="reset"], [type="submit"]) {
300
+ appearance: button;
301
+ }
302
+
303
+ ::file-selector-button {
304
+ appearance: button;
305
+ }
306
+
307
+ ::-webkit-inner-spin-button {
308
+ height: auto;
309
+ }
310
+
311
+ ::-webkit-outer-spin-button {
312
+ height: auto;
313
+ }
415
314
 
416
- blockquote > ul,
417
- blockquote > ol {
418
- list-style-position: inside;
315
+ [hidden]:where(:not([hidden="until-found"])) {
316
+ display: none !important;
317
+ }
318
+
319
+ html {
320
+ -webkit-text-size-adjust: 100%;
321
+ -moz-text-size-adjust: 100%;
322
+ text-size-adjust: 100%;
323
+ scrollbar-gutter: stable;
324
+ font-size: 18px;
325
+ }
326
+
327
+ body {
328
+ background-color: var(--color-body);
329
+ --tw-leading: var(--leading-relaxed);
330
+ font-family: Iowan Old Style, Palatino Linotype, Palatino, Book Antiqua, Georgia, serif;
331
+ line-height: var(--leading-relaxed);
332
+ color: var(--color-text);
333
+ -webkit-font-smoothing: antialiased;
334
+ -moz-osx-font-smoothing: grayscale;
335
+ }
336
+
337
+ h1, h2, h3, h4, h5, h6 {
338
+ --tw-font-weight: var(--font-weight-bold);
339
+ font-weight: var(--font-weight-bold);
340
+ --tw-tracking: var(--tracking-tight);
341
+ letter-spacing: var(--tracking-tight);
342
+ text-wrap: balance;
343
+ }
344
+
345
+ p, li, dd, blockquote, figcaption {
346
+ text-wrap: pretty;
347
+ }
348
+
349
+ a {
350
+ color: var(--color-primary);
351
+ text-decoration-line: underline;
352
+ -webkit-text-decoration-color: var(--color-primary);
353
+ -webkit-text-decoration-color: var(--color-primary);
354
+ text-decoration-color: var(--color-primary);
355
+ }
356
+
357
+ @supports (color: color-mix(in lab, red, red)) {
358
+ a {
359
+ -webkit-text-decoration-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
360
+ -webkit-text-decoration-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
361
+ text-decoration-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
362
+ }
363
+ }
364
+
365
+ a {
366
+ text-underline-offset: 3px;
367
+ }
368
+
369
+ @media (prefers-reduced-motion: no-preference) {
370
+ a {
371
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
372
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
373
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
374
+ }
375
+ }
376
+
377
+ a:hover {
378
+ -webkit-text-decoration-color: var(--color-primary);
379
+ -webkit-text-decoration-color: var(--color-primary);
380
+ text-decoration-color: var(--color-primary);
381
+ }
382
+
383
+ :focus-visible {
384
+ border-radius: var(--radius-xs);
385
+ outline-style: var(--tw-outline-style);
386
+ outline-offset: 2px;
387
+ outline-width: 2px;
388
+ outline-color: var(--color-secondary);
389
+ }
390
+
391
+ hr {
392
+ margin-block: calc(var(--spacing) * 10);
393
+ border-style: var(--tw-border-style);
394
+ border-width: 0;
395
+ border-top-style: var(--tw-border-style);
396
+ border-top-width: 1px;
397
+ border-color: var(--color-rule);
398
+ }
399
+
400
+ ::selection {
401
+ background-color: var(--color-primary);
402
+ }
403
+
404
+ @supports (color: color-mix(in lab, red, red)) {
405
+ ::selection {
406
+ background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
407
+ }
408
+ }
409
+
410
+ code, kbd, samp, pre {
411
+ font-family: ui-monospace, SF Mono, Menlo, Consolas, DejaVu Sans Mono, monospace;
412
+ }
413
+
414
+ strong, b {
415
+ --tw-font-weight: var(--font-weight-bold);
416
+ font-weight: var(--font-weight-bold);
417
+ }
419
418
  }
420
419
 
421
- table {
422
- width: 100%;
423
- margin-bottom: var(--spacing-8);
424
- border-collapse: collapse;
425
- border-spacing: 0.25rem;
426
- }
420
+ @layer components {
421
+ .screen-reader-text {
422
+ clip-path: inset(50%);
423
+ white-space: nowrap;
424
+ border: 0;
425
+ width: 1px;
426
+ height: 1px;
427
+ margin: -1px;
428
+ padding: 0;
429
+ position: absolute;
430
+ overflow: hidden;
431
+ }
432
+
433
+ .screen-reader-text:focus {
434
+ z-index: 50;
435
+ background-color: var(--color-base-3);
436
+ width: auto;
437
+ height: auto;
438
+ padding: calc(var(--spacing) * 4);
439
+ --tw-font-weight: var(--font-weight-bold);
440
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
441
+ font-weight: var(--font-weight-bold);
442
+ color: var(--color-text);
443
+ clip-path: none;
444
+ margin: 0;
445
+ text-decoration-line: none;
446
+ display: block;
447
+ inset-block-start: .5rem;
448
+ inset-inline-start: .5rem;
449
+ }
450
+
451
+ .global-wrapper {
452
+ max-width: var(--container-2xl);
453
+ padding-inline: calc(var(--spacing) * 5);
454
+ padding-top: calc(var(--spacing) * 8);
455
+ padding-bottom: calc(var(--spacing) * 16);
456
+ margin-inline: auto;
457
+ }
458
+
459
+ @media (min-width: 40rem) {
460
+ .global-wrapper {
461
+ padding-inline: calc(var(--spacing) * 6);
462
+ }
463
+ }
464
+
465
+ .global-header {
466
+ margin-bottom: calc(var(--spacing) * 12);
467
+ }
468
+
469
+ .global-wrapper:not([data-is-root-path="true"]) .global-header {
470
+ align-items: baseline;
471
+ column-gap: calc(var(--spacing) * 6);
472
+ row-gap: calc(var(--spacing) * 2);
473
+ flex-wrap: wrap;
474
+ display: flex;
475
+ }
476
+
477
+ .global-wrapper[data-is-root-path="true"] .global-header {
478
+ margin-bottom: calc(var(--spacing) * 14);
479
+ }
480
+
481
+ .main-heading {
482
+ font-size: var(--text-4xl);
483
+ line-height: var(--tw-leading, var(--text-4xl--line-height));
484
+ --tw-leading: 1;
485
+ line-height: 1;
486
+ }
487
+
488
+ @media (min-width: 40rem) {
489
+ .main-heading {
490
+ font-size: var(--text-5xl);
491
+ line-height: var(--tw-leading, var(--text-5xl--line-height));
492
+ }
493
+ }
494
+
495
+ .main-heading a, .header-link-home {
496
+ color: var(--color-text);
497
+ text-decoration-line: none;
498
+ }
499
+
500
+ @media (hover: hover) {
501
+ :is(.main-heading a, .header-link-home):hover {
502
+ color: var(--color-primary);
503
+ text-underline-offset: 6px;
504
+ text-decoration-line: underline;
505
+ text-decoration-thickness: 2px;
506
+ }
507
+ }
508
+
509
+ :is(.main-heading a, .header-link-home):focus-visible {
510
+ text-decoration-line: underline;
511
+ text-decoration-thickness: 2px;
512
+ }
513
+
514
+ .header-link-home {
515
+ min-block-size: 24px;
516
+ min-inline-size: 24px;
517
+ font-size: var(--text-lg);
518
+ line-height: var(--tw-leading, var(--text-lg--line-height));
519
+ --tw-font-weight: var(--font-weight-bold);
520
+ font-weight: var(--font-weight-bold);
521
+ align-items: center;
522
+ display: inline-flex;
523
+ }
524
+
525
+ .site-tagline {
526
+ margin-top: calc(var(--spacing) * 3);
527
+ font-size: var(--text-lg);
528
+ line-height: var(--tw-leading, var(--text-lg--line-height));
529
+ color: var(--color-muted);
530
+ font-style: italic;
531
+ }
532
+
533
+ .hlist {
534
+ flex-wrap: wrap;
535
+ padding: 0;
536
+ list-style-type: none;
537
+ display: flex;
538
+ }
539
+
540
+ .site-nav ul {
541
+ column-gap: calc(var(--spacing) * 5);
542
+ row-gap: var(--spacing);
543
+ --tw-tracking: .12em;
544
+ letter-spacing: .12em;
545
+ text-transform: uppercase;
546
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
547
+ font-size: .78rem;
548
+ }
549
+
550
+ .site-nav a {
551
+ align-items: center;
552
+ min-block-size: 24px;
553
+ min-inline-size: 24px;
554
+ text-decoration-line: underline;
555
+ text-decoration-color: currentColor;
556
+ display: inline-flex;
557
+ }
558
+
559
+ @supports (color: color-mix(in lab, red, red)) {
560
+ .site-nav a {
561
+ -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
562
+ -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
563
+ text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
564
+ }
565
+ }
566
+
567
+ .site-nav a {
568
+ text-underline-offset: 4px;
569
+ text-decoration-thickness: 1px;
570
+ }
571
+
572
+ @media (hover: hover) {
573
+ .site-nav a:hover {
574
+ color: var(--color-primary);
575
+ -webkit-text-decoration-color: var(--color-primary);
576
+ -webkit-text-decoration-color: var(--color-primary);
577
+ text-decoration-color: var(--color-primary);
578
+ text-decoration-thickness: 2px;
579
+ }
580
+ }
581
+
582
+ .site-nav a:focus-visible {
583
+ text-decoration-thickness: 2px;
584
+ }
585
+
586
+ .site-nav a {
587
+ color: var(--color-muted);
588
+ }
589
+
590
+ .site-nav a[aria-current="page"] {
591
+ --tw-font-weight: var(--font-weight-semibold);
592
+ font-weight: var(--font-weight-semibold);
593
+ color: var(--color-text);
594
+ }
595
+
596
+ .global-wrapper[data-is-root-path="true"] .global-header .site-nav {
597
+ margin-top: calc(var(--spacing) * 6);
598
+ border-top-style: var(--tw-border-style);
599
+ border-top-width: 1px;
600
+ border-color: var(--color-rule);
601
+ padding-top: calc(var(--spacing) * 4);
602
+ }
603
+
604
+ .global-wrapper > footer {
605
+ margin-top: calc(var(--spacing) * 20);
606
+ justify-content: space-between;
607
+ align-items: center;
608
+ gap: calc(var(--spacing) * 4);
609
+ border-top-style: var(--tw-border-style);
610
+ border-top-width: 1px;
611
+ border-color: var(--color-rule);
612
+ padding-top: calc(var(--spacing) * 6);
613
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
614
+ font-size: var(--text-sm);
615
+ line-height: var(--tw-leading, var(--text-sm--line-height));
616
+ color: var(--color-muted);
617
+ flex-wrap: wrap;
618
+ display: flex;
619
+ }
620
+
621
+ .global-wrapper > footer .site-nav ul {
622
+ column-gap: calc(var(--spacing) * 4);
623
+ font-size: var(--text-sm);
624
+ line-height: var(--tw-leading, var(--text-sm--line-height));
625
+ --tw-tracking: var(--tracking-normal);
626
+ letter-spacing: var(--tracking-normal);
627
+ text-transform: none;
628
+ }
629
+
630
+ .kicker {
631
+ margin-bottom: calc(var(--spacing) * 2);
632
+ align-items: center;
633
+ column-gap: calc(var(--spacing) * 2);
634
+ --tw-tracking: .14em;
635
+ letter-spacing: .14em;
636
+ color: var(--color-muted);
637
+ text-transform: uppercase;
638
+ flex-wrap: wrap;
639
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
640
+ font-size: .72rem;
641
+ display: flex;
642
+ }
643
+
644
+ .kicker a {
645
+ align-items: center;
646
+ min-block-size: 24px;
647
+ min-inline-size: 24px;
648
+ text-decoration-line: underline;
649
+ text-decoration-color: currentColor;
650
+ display: inline-flex;
651
+ }
652
+
653
+ @supports (color: color-mix(in lab, red, red)) {
654
+ .kicker a {
655
+ -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
656
+ -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
657
+ text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
658
+ }
659
+ }
660
+
661
+ .kicker a {
662
+ text-underline-offset: 4px;
663
+ text-decoration-thickness: 1px;
664
+ }
665
+
666
+ @media (hover: hover) {
667
+ .kicker a:hover {
668
+ color: var(--color-primary);
669
+ -webkit-text-decoration-color: var(--color-primary);
670
+ -webkit-text-decoration-color: var(--color-primary);
671
+ text-decoration-color: var(--color-primary);
672
+ text-decoration-thickness: 2px;
673
+ }
674
+ }
675
+
676
+ .kicker a:focus-visible {
677
+ text-decoration-thickness: 2px;
678
+ }
679
+
680
+ .kicker a {
681
+ color: var(--color-muted);
682
+ }
683
+
684
+ .kicker-kind {
685
+ --tw-font-weight: var(--font-weight-semibold);
686
+ font-weight: var(--font-weight-semibold);
687
+ color: var(--color-primary);
688
+ }
689
+
690
+ .page-title {
691
+ margin-top: var(--spacing);
692
+ margin-bottom: calc(var(--spacing) * 8);
693
+ font-size: var(--text-4xl);
694
+ line-height: var(--tw-leading, var(--text-4xl--line-height));
695
+ --tw-leading: 1.08;
696
+ line-height: 1.08;
697
+ }
698
+
699
+ @media (min-width: 40rem) {
700
+ .page-title {
701
+ font-size: 2.75rem;
702
+ }
703
+ }
704
+
705
+ .section-title {
706
+ margin-top: calc(var(--spacing) * 14);
707
+ margin-bottom: calc(var(--spacing) * 6);
708
+ --tw-font-weight: var(--font-weight-semibold);
709
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
710
+ font-size: .72rem;
711
+ font-weight: var(--font-weight-semibold);
712
+ --tw-tracking: .14em;
713
+ letter-spacing: .14em;
714
+ color: var(--color-muted);
715
+ text-transform: uppercase;
716
+ }
717
+
718
+ .empty {
719
+ color: var(--color-muted);
720
+ font-style: italic;
721
+ }
722
+
723
+ .e-content > * + *, .page-body > * + * {
724
+ margin-top: calc(var(--spacing) * 5);
725
+ }
726
+
727
+ :is(.e-content, .page-body) :is(h2, h3, h4, h5, h6) {
728
+ margin-bottom: calc(var(--spacing) * 3);
729
+ }
730
+
731
+ :is(.e-content, .page-body) h2 {
732
+ margin-top: calc(var(--spacing) * 10);
733
+ font-size: var(--text-2xl);
734
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
735
+ }
736
+
737
+ :is(.e-content, .page-body) h3 {
738
+ margin-top: calc(var(--spacing) * 8);
739
+ font-size: var(--text-xl);
740
+ line-height: var(--tw-leading, var(--text-xl--line-height));
741
+ }
742
+
743
+ :is(.e-content, .page-body) :is(h4, h5, h6) {
744
+ margin-top: calc(var(--spacing) * 6);
745
+ font-size: var(--text-lg);
746
+ line-height: var(--tw-leading, var(--text-lg--line-height));
747
+ }
748
+
749
+ :is(.e-content, .page-body) ul {
750
+ padding-inline-start: calc(var(--spacing) * 6);
751
+ list-style-type: disc;
752
+ }
753
+
754
+ :is(.e-content, .page-body) ol {
755
+ padding-inline-start: calc(var(--spacing) * 6);
756
+ list-style-type: decimal;
757
+ }
758
+
759
+ :is(.e-content, .page-body) li + li, :is(.e-content, .page-body) li > :is(ul, ol), :is(.e-content, .page-body) li > p + p {
760
+ margin-top: calc(var(--spacing) * 2);
761
+ }
762
+
763
+ :is(.e-content, .page-body) blockquote {
764
+ margin-block: calc(var(--spacing) * 8);
765
+ border-inline-start-style: var(--tw-border-style);
766
+ border-inline-start-width: 2px;
767
+ border-color: var(--color-primary);
768
+ font-size: var(--text-xl);
769
+ line-height: var(--tw-leading, var(--text-xl--line-height));
770
+ --tw-leading: var(--leading-snug);
771
+ line-height: var(--leading-snug);
772
+ color: var(--color-muted);
773
+ padding-inline-start: calc(var(--spacing) * 5);
774
+ font-style: italic;
775
+ }
776
+
777
+ :is(.e-content, .page-body) blockquote > * + * {
778
+ margin-top: calc(var(--spacing) * 3);
779
+ }
780
+
781
+ :is(.e-content, .page-body) img, :is(.e-content, .page-body) video {
782
+ border-radius: var(--radius-md);
783
+ max-width: 100%;
784
+ height: auto;
785
+ }
786
+
787
+ :is(.e-content, .page-body) figcaption {
788
+ margin-top: calc(var(--spacing) * 2);
789
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
790
+ font-size: var(--text-sm);
791
+ line-height: var(--tw-leading, var(--text-sm--line-height));
792
+ color: var(--color-muted);
793
+ }
794
+
795
+ :is(.e-content, .page-body) hr {
796
+ margin-block: calc(var(--spacing) * 10);
797
+ }
798
+
799
+ :is(.e-content, .page-body) table {
800
+ border-collapse: collapse;
801
+ width: 100%;
802
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
803
+ font-size: var(--text-sm);
804
+ line-height: var(--tw-leading, var(--text-sm--line-height));
805
+ }
806
+
807
+ :is(.e-content, .page-body) :is(th, td) {
808
+ border-bottom-style: var(--tw-border-style);
809
+ border-bottom-width: 1px;
810
+ border-color: var(--color-rule);
811
+ padding-inline: calc(var(--spacing) * 2);
812
+ padding-block: calc(var(--spacing) * 1.5);
813
+ text-align: start;
814
+ vertical-align: top;
815
+ }
816
+
817
+ :is(.e-content, .page-body) th {
818
+ border-color: var(--color-edge);
819
+ --tw-font-weight: var(--font-weight-semibold);
820
+ font-weight: var(--font-weight-semibold);
821
+ }
822
+
823
+ :is(.e-content, .page-body) dt {
824
+ --tw-font-weight: var(--font-weight-bold);
825
+ font-weight: var(--font-weight-bold);
826
+ }
827
+
828
+ :is(.e-content, .page-body) dd {
829
+ padding-inline-start: calc(var(--spacing) * 6);
830
+ }
831
+
832
+ :is(.e-content, .page-body) details summary {
833
+ cursor: pointer;
834
+ }
835
+
836
+ :is(.e-content, .page-body) kbd {
837
+ border-radius: var(--radius-sm);
838
+ border-style: var(--tw-border-style);
839
+ border-width: 1px;
840
+ border-color: var(--color-edge);
841
+ padding-inline: var(--spacing);
842
+ font-size: .85em;
843
+ }
844
+
845
+ code {
846
+ border-radius: var(--radius-sm);
847
+ background-color: var(--color-code-background);
848
+ padding-inline: calc(var(--spacing) * 1.5);
849
+ padding-block: calc(var(--spacing) * .5);
850
+ color: var(--color-code-text);
851
+ overflow-wrap: break-word;
852
+ font-size: .85em;
853
+ }
854
+
855
+ pre {
856
+ border-radius: var(--radius-md);
857
+ border-style: var(--tw-border-style);
858
+ border-width: 1px;
859
+ border-color: var(--color-edge);
860
+ background-color: var(--color-code-background);
861
+ padding: calc(var(--spacing) * 4);
862
+ --tw-leading: var(--leading-relaxed);
863
+ font-size: .85rem;
864
+ line-height: var(--leading-relaxed);
865
+ color: var(--color-code-text);
866
+ overflow-x: auto;
867
+ }
868
+
869
+ pre code {
870
+ font-size: inherit;
871
+ overflow-wrap: normal;
872
+ background-color: #0000;
873
+ border-radius: 0;
874
+ padding: 0;
875
+ }
876
+
877
+ .footnotes {
878
+ margin-top: calc(var(--spacing) * 10);
879
+ border-top-style: var(--tw-border-style);
880
+ border-top-width: 1px;
881
+ border-color: var(--color-rule);
882
+ padding-top: calc(var(--spacing) * 6);
883
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
884
+ font-size: var(--text-sm);
885
+ line-height: var(--tw-leading, var(--text-sm--line-height));
886
+ }
887
+
888
+ .footnotes-sep {
889
+ display: none;
890
+ }
891
+
892
+ .footnote-item > p {
893
+ margin-top: 0;
894
+ }
895
+
896
+ .hljs-comment {
897
+ color: var(--color-code-comment);
898
+ }
899
+
900
+ .hljs-tag {
901
+ color: var(--color-code-tag);
902
+ }
903
+
904
+ .hljs-subst, .hljs-punctuation, .hljs-operator {
905
+ color: var(--color-code-text);
906
+ }
907
+
908
+ .hljs-bullet, .hljs-variable, .hljs-template-variable, .hljs-selector-tag, .hljs-name {
909
+ color: var(--color-code-name);
910
+ }
911
+
912
+ .hljs-symbol, .hljs-number, .hljs-link, .hljs-attr, .hljs-variable.constant_, .hljs-literal {
913
+ color: var(--color-code-literal);
914
+ }
915
+
916
+ .hljs-title, .hljs-class .hljs-title, .hljs-title.class_ {
917
+ color: var(--color-code-class);
918
+ }
919
+
920
+ .hljs-strong {
921
+ color: var(--color-code-class);
922
+ font-weight: 700;
923
+ }
924
+
925
+ .hljs-code, .hljs-string, .hljs-title.class_.inherited__ {
926
+ color: var(--color-code-string);
927
+ }
928
+
929
+ .hljs-built_in, .hljs-doctag, .hljs-quote, .hljs-regexp, .hljs-keyword.hljs-atrule {
930
+ color: var(--color-code-support);
931
+ }
932
+
933
+ .hljs-attribute, .hljs-function .hljs-title, .hljs-section, .hljs-title.function_ {
934
+ color: var(--color-code-function);
935
+ }
936
+
937
+ .hljs-keyword, .hljs-template-tag, .hljs-type {
938
+ color: var(--color-code-keyword);
939
+ }
940
+
941
+ .hljs-emphasis {
942
+ color: var(--color-code-keyword);
943
+ font-style: italic;
944
+ }
945
+
946
+ .hljs-meta, .hljs-meta .hljs-keyword, .hljs-meta .hljs-string {
947
+ color: var(--color-code-meta);
948
+ }
949
+
950
+ .hljs-addition, .hljs-deletion {
951
+ color: var(--color-code-text);
952
+ margin-inline: -1rem;
953
+ padding-inline: 1rem;
954
+ text-decoration: none;
955
+ display: block;
956
+ }
957
+
958
+ .hljs-addition {
959
+ background-color: var(--color-code-added-background);
960
+ }
961
+
962
+ .hljs-deletion {
963
+ background-color: var(--color-code-removed-background);
964
+ }
965
+
966
+ .feed {
967
+ margin-top: calc(var(--spacing) * 2);
968
+ }
969
+
970
+ .feed-separator {
971
+ margin-block: calc(var(--spacing) * 9);
972
+ }
973
+
974
+ .feed-title {
975
+ margin-top: var(--spacing);
976
+ margin-bottom: calc(var(--spacing) * 3);
977
+ font-size: var(--text-3xl);
978
+ line-height: var(--tw-leading, var(--text-3xl--line-height));
979
+ --tw-leading: var(--leading-tight);
980
+ line-height: var(--leading-tight);
981
+ }
982
+
983
+ .feed-title a {
984
+ color: var(--color-text);
985
+ text-decoration-line: none;
986
+ }
987
+
988
+ @media (hover: hover) {
989
+ .feed-title a:hover {
990
+ color: var(--color-primary);
991
+ text-underline-offset: 6px;
992
+ text-decoration-line: underline;
993
+ text-decoration-thickness: 2px;
994
+ }
995
+ }
996
+
997
+ .feed-title a:focus-visible {
998
+ text-decoration-line: underline;
999
+ text-decoration-thickness: 2px;
1000
+ }
1001
+
1002
+ .feed-excerpt.p-summary {
1003
+ font-size: 1.05rem;
1004
+ }
1005
+
1006
+ .feed-item > .e-content {
1007
+ --tw-leading: 1.6;
1008
+ font-size: 1.12rem;
1009
+ line-height: 1.6;
1010
+ }
1011
+
1012
+ .feed-more, .front-links {
1013
+ margin-top: calc(var(--spacing) * 3);
1014
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
1015
+ font-size: var(--text-sm);
1016
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1017
+ }
1018
+
1019
+ .feed-more a, .front-links a {
1020
+ align-items: center;
1021
+ gap: var(--spacing);
1022
+ min-block-size: 24px;
1023
+ min-inline-size: 24px;
1024
+ display: inline-flex;
1025
+ }
1026
+
1027
+ @media (hover: hover) {
1028
+ :is(.feed-more a, .front-links a):hover {
1029
+ text-decoration-thickness: 2px;
1030
+ }
1031
+ }
1032
+
1033
+ .front-links {
1034
+ margin-top: calc(var(--spacing) * 10);
1035
+ column-gap: calc(var(--spacing) * 6);
1036
+ flex-wrap: wrap;
1037
+ display: flex;
1038
+ }
1039
+
1040
+ .cite {
1041
+ margin-block: calc(var(--spacing) * 3);
1042
+ border-inline-start-style: var(--tw-border-style);
1043
+ border-inline-start-width: 2px;
1044
+ border-color: var(--color-primary);
1045
+ padding-inline-start: calc(var(--spacing) * 4);
1046
+ }
1047
+
1048
+ .cite-line {
1049
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
1050
+ font-size: var(--text-sm);
1051
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1052
+ color: var(--color-muted);
1053
+ }
1054
+
1055
+ .cite-line a {
1056
+ --tw-font-weight: var(--font-weight-medium);
1057
+ min-block-size: 24px;
1058
+ min-inline-size: 24px;
1059
+ font-weight: var(--font-weight-medium);
1060
+ align-items: center;
1061
+ text-decoration-line: underline;
1062
+ text-decoration-color: currentColor;
1063
+ display: inline-flex;
1064
+ }
1065
+
1066
+ @supports (color: color-mix(in lab, red, red)) {
1067
+ .cite-line a {
1068
+ -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
1069
+ -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
1070
+ text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
1071
+ }
1072
+ }
1073
+
1074
+ .cite-line a {
1075
+ text-underline-offset: 4px;
1076
+ text-decoration-thickness: 1px;
1077
+ }
1078
+
1079
+ @media (hover: hover) {
1080
+ .cite-line a:hover {
1081
+ color: var(--color-primary);
1082
+ -webkit-text-decoration-color: var(--color-primary);
1083
+ -webkit-text-decoration-color: var(--color-primary);
1084
+ text-decoration-color: var(--color-primary);
1085
+ text-decoration-thickness: 2px;
1086
+ }
1087
+ }
1088
+
1089
+ .cite-line a:focus-visible {
1090
+ text-decoration-thickness: 2px;
1091
+ }
1092
+
1093
+ .cite-line a {
1094
+ color: var(--color-text);
1095
+ }
1096
+
1097
+ .cite-quote {
1098
+ margin-top: var(--spacing);
1099
+ --tw-leading: var(--leading-snug);
1100
+ font-size: .98rem;
1101
+ line-height: var(--leading-snug);
1102
+ color: var(--color-muted);
1103
+ font-style: italic;
1104
+ }
1105
+
1106
+ .post-header {
1107
+ margin-bottom: calc(var(--spacing) * 8);
1108
+ }
1109
+
1110
+ .post-header h1 {
1111
+ margin-top: var(--spacing);
1112
+ font-size: var(--text-4xl);
1113
+ line-height: var(--tw-leading, var(--text-4xl--line-height));
1114
+ --tw-leading: 1.08;
1115
+ line-height: 1.08;
1116
+ }
1117
+
1118
+ @media (min-width: 40rem) {
1119
+ .post-header h1 {
1120
+ font-size: 2.75rem;
1121
+ }
1122
+ }
1123
+
1124
+ .post-deck {
1125
+ margin-top: calc(var(--spacing) * 4);
1126
+ font-size: var(--text-xl);
1127
+ line-height: var(--tw-leading, var(--text-xl--line-height));
1128
+ --tw-leading: var(--leading-snug);
1129
+ line-height: var(--leading-snug);
1130
+ color: var(--color-muted);
1131
+ font-style: italic;
1132
+ }
1133
+
1134
+ .blog-post > .e-content {
1135
+ --tw-leading: 1.65;
1136
+ font-size: 1.08rem;
1137
+ line-height: 1.65;
1138
+ }
1139
+
1140
+ .blog-post > .screen-reader-text ~ .e-content {
1141
+ --tw-leading: 1.55;
1142
+ font-size: 1.3rem;
1143
+ line-height: 1.55;
1144
+ }
1145
+
1146
+ .entry-meta, .page-meta {
1147
+ margin-top: calc(var(--spacing) * 8);
1148
+ align-items: center;
1149
+ column-gap: calc(var(--spacing) * 2);
1150
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
1151
+ font-size: var(--text-sm);
1152
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1153
+ color: var(--color-muted);
1154
+ flex-wrap: wrap;
1155
+ display: flex;
1156
+ }
1157
+
1158
+ .page-meta:empty {
1159
+ display: none;
1160
+ }
1161
+
1162
+ .entry-meta a, .page-meta a {
1163
+ align-items: center;
1164
+ min-block-size: 24px;
1165
+ min-inline-size: 24px;
1166
+ text-decoration-line: underline;
1167
+ text-decoration-color: currentColor;
1168
+ display: inline-flex;
1169
+ }
1170
+
1171
+ @supports (color: color-mix(in lab, red, red)) {
1172
+ .entry-meta a, .page-meta a {
1173
+ -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
1174
+ -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
1175
+ text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
1176
+ }
1177
+ }
1178
+
1179
+ .entry-meta a, .page-meta a {
1180
+ text-underline-offset: 4px;
1181
+ text-decoration-thickness: 1px;
1182
+ }
1183
+
1184
+ @media (hover: hover) {
1185
+ :is(.entry-meta a, .page-meta a):hover {
1186
+ color: var(--color-primary);
1187
+ -webkit-text-decoration-color: var(--color-primary);
1188
+ -webkit-text-decoration-color: var(--color-primary);
1189
+ text-decoration-color: var(--color-primary);
1190
+ text-decoration-thickness: 2px;
1191
+ }
1192
+ }
1193
+
1194
+ :is(.entry-meta a, .page-meta a):focus-visible {
1195
+ text-decoration-thickness: 2px;
1196
+ }
1197
+
1198
+ .entry-meta a, .page-meta a {
1199
+ color: var(--color-muted);
1200
+ }
1201
+
1202
+ .post-categories {
1203
+ margin-top: calc(var(--spacing) * 2);
1204
+ column-gap: calc(var(--spacing) * 3);
1205
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
1206
+ font-size: var(--text-sm);
1207
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1208
+ flex-wrap: wrap;
1209
+ display: flex;
1210
+ }
1211
+
1212
+ .post-categories a {
1213
+ align-items: center;
1214
+ min-block-size: 24px;
1215
+ min-inline-size: 24px;
1216
+ text-decoration-line: underline;
1217
+ text-decoration-color: currentColor;
1218
+ display: inline-flex;
1219
+ }
1220
+
1221
+ @supports (color: color-mix(in lab, red, red)) {
1222
+ .post-categories a {
1223
+ -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
1224
+ -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
1225
+ text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
1226
+ }
1227
+ }
1228
+
1229
+ .post-categories a {
1230
+ text-underline-offset: 4px;
1231
+ text-decoration-thickness: 1px;
1232
+ }
1233
+
1234
+ @media (hover: hover) {
1235
+ .post-categories a:hover {
1236
+ color: var(--color-primary);
1237
+ -webkit-text-decoration-color: var(--color-primary);
1238
+ -webkit-text-decoration-color: var(--color-primary);
1239
+ text-decoration-color: var(--color-primary);
1240
+ text-decoration-thickness: 2px;
1241
+ }
1242
+ }
1243
+
1244
+ .post-categories a:focus-visible {
1245
+ text-decoration-thickness: 2px;
1246
+ }
1247
+
1248
+ .post-categories a {
1249
+ color: var(--color-secondary);
1250
+ }
1251
+
1252
+ .post-categories a[rel="tag"]:before {
1253
+ content: "#";
1254
+ }
1255
+
1256
+ .blog-post > hr {
1257
+ margin-top: calc(var(--spacing) * 10);
1258
+ margin-bottom: calc(var(--spacing) * 8);
1259
+ }
1260
+
1261
+ .blog-post-nav {
1262
+ margin-block: calc(var(--spacing) * 12);
1263
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
1264
+ font-size: var(--text-sm);
1265
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1266
+ }
1267
+
1268
+ .blog-post-nav ul {
1269
+ gap: calc(var(--spacing) * 4);
1270
+ padding: 0;
1271
+ list-style-type: none;
1272
+ display: grid;
1273
+ }
1274
+
1275
+ @media (min-width: 40rem) {
1276
+ .blog-post-nav ul {
1277
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1278
+ }
1279
+
1280
+ .blog-post-nav li:has( > a[rel="next"]) {
1281
+ grid-column-start: 2;
1282
+ }
1283
+ }
1284
+
1285
+ .blog-post-nav a {
1286
+ border-radius: var(--radius-md);
1287
+ border-style: var(--tw-border-style);
1288
+ border-width: 1px;
1289
+ border-color: var(--color-edge);
1290
+ min-block-size: 24px;
1291
+ min-inline-size: 24px;
1292
+ width: 100%;
1293
+ height: 100%;
1294
+ padding: calc(var(--spacing) * 4);
1295
+ color: var(--color-text);
1296
+ flex-direction: column;
1297
+ align-items: flex-start;
1298
+ text-decoration-line: none;
1299
+ display: inline-flex;
1300
+ }
1301
+
1302
+ @media (hover: hover) {
1303
+ .blog-post-nav a:hover {
1304
+ border-style: var(--tw-border-style);
1305
+ border-width: 2px;
1306
+ border-color: var(--color-primary);
1307
+ color: var(--color-primary);
1308
+ padding: calc(1rem - 1px);
1309
+ }
1310
+ }
1311
+
1312
+ @media (min-width: 40rem) {
1313
+ .blog-post-nav a[rel="next"] {
1314
+ text-align: end;
1315
+ align-items: flex-end;
1316
+ }
1317
+ }
1318
+
1319
+ .blog-post-nav-label {
1320
+ margin-bottom: var(--spacing);
1321
+ --tw-tracking: .14em;
1322
+ letter-spacing: .14em;
1323
+ color: var(--color-muted);
1324
+ text-transform: uppercase;
1325
+ font-size: .7rem;
1326
+ display: block;
1327
+ }
1328
+
1329
+ .bio {
1330
+ align-items: flex-start;
1331
+ gap: calc(var(--spacing) * 4);
1332
+ display: flex;
1333
+ }
427
1334
 
428
- table thead tr th {
429
- border-bottom: 1px solid var(--color-primary);
430
- }
1335
+ .bio-avatar {
1336
+ flex-shrink: 0;
1337
+ }
431
1338
 
432
- pre,
433
- code,
434
- kbd,
435
- samp {
436
- font-family: var(--fontFamily-mono);
437
- }
1339
+ .bio-avatar img {
1340
+ width: calc(var(--spacing) * 14);
1341
+ height: calc(var(--spacing) * 14);
1342
+ object-fit: cover;
1343
+ border-radius: 3.40282e38px;
1344
+ }
438
1345
 
439
- code {
440
- padding: 0.1em 0.3em;
441
- border-radius: 4px;
442
- background-color: var(--color-code-background);
443
- color: var(--color-code-text);
444
- font-size: 0.9em;
445
- /* A file path or an identifier is one long word, and a narrow screen would
446
- otherwise carry it off the side of the page. A block of code scrolls
447
- instead — see `pre` below. */
448
- overflow-wrap: break-word;
449
- }
1346
+ .bio .p-name {
1347
+ --tw-font-weight: var(--font-weight-bold);
1348
+ font-weight: var(--font-weight-bold);
1349
+ color: var(--color-text);
1350
+ }
450
1351
 
451
- pre {
452
- overflow-x: auto;
453
- margin-bottom: var(--spacing-8);
454
- padding: var(--spacing-3) var(--spacing-4);
455
- border-radius: 6px;
456
- background-color: var(--color-code-background);
457
- color: var(--color-code-text);
458
- font-size: var(--fontSize-0);
459
- line-height: var(--lineHeight-normal);
460
- }
1352
+ .bio-note {
1353
+ margin-top: var(--spacing);
1354
+ color: var(--color-muted);
1355
+ font-size: .95rem;
1356
+ }
461
1357
 
462
- pre code {
463
- padding: 0;
464
- border-radius: 0;
465
- background: none;
466
- font-size: inherit;
467
- }
1358
+ .bio-links {
1359
+ margin-top: var(--spacing);
1360
+ column-gap: calc(var(--spacing) * 4);
1361
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
1362
+ font-size: var(--text-sm);
1363
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1364
+ }
468
1365
 
469
- /* Syntax highlighting (TASK-86).
470
- *
471
- * The CMS renders a fenced block as `pre > code.language-x` and highlights
472
- * nothing; `static/highlight.js` marks the tokens up on the client, and these
473
- * are its colours. The scopes and the slots they map to are highlight.js's own
474
- * base16 Tomorrow theme, so a token it invents later lands somewhere sensible
475
- * rather than nowhere.
476
- *
477
- * Every colour is a custom property, so a site that wants another palette
478
- * redefines a dozen tokens instead of writing a syntax theme. Delimiters,
479
- * operators and substitutions are deliberately the block's own ink: they are
480
- * most of the characters on screen and a colour there is noise.
481
- */
482
-
483
- .hljs-comment {
484
- color: var(--color-code-comment);
485
- }
1366
+ .bio-links a {
1367
+ align-items: center;
1368
+ min-block-size: 24px;
1369
+ min-inline-size: 24px;
1370
+ display: inline-flex;
1371
+ }
486
1372
 
487
- .hljs-tag {
488
- color: var(--color-code-tag);
489
- }
1373
+ .global-wrapper[data-is-root-path="true"] .bio {
1374
+ margin-top: calc(var(--spacing) * 2);
1375
+ }
490
1376
 
491
- .hljs-subst,
492
- .hljs-punctuation,
493
- .hljs-operator {
494
- color: var(--color-code-text);
495
- }
1377
+ .archive-header .page-title {
1378
+ margin-bottom: calc(var(--spacing) * 4);
1379
+ }
496
1380
 
497
- .hljs-bullet,
498
- .hljs-variable,
499
- .hljs-template-variable,
500
- .hljs-selector-tag,
501
- .hljs-name {
502
- color: var(--color-code-name);
503
- }
1381
+ .archive-header {
1382
+ margin-bottom: calc(var(--spacing) * 10);
1383
+ }
504
1384
 
505
- .hljs-symbol,
506
- .hljs-number,
507
- .hljs-link,
508
- .hljs-attr,
509
- .hljs-variable.constant_,
510
- .hljs-literal {
511
- color: var(--color-code-literal);
512
- }
1385
+ .category-description {
1386
+ font-size: var(--text-lg);
1387
+ line-height: var(--tw-leading, var(--text-lg--line-height));
1388
+ color: var(--color-muted);
1389
+ font-style: italic;
1390
+ }
513
1391
 
514
- .hljs-title,
515
- .hljs-class .hljs-title,
516
- .hljs-title.class_ {
517
- color: var(--color-code-class);
518
- }
1392
+ .author-header + .bio {
1393
+ margin-bottom: calc(var(--spacing) * 12);
1394
+ }
519
1395
 
520
- .hljs-strong {
521
- color: var(--color-code-class);
522
- font-weight: var(--fontWeight-bold);
523
- }
1396
+ .archive h2 {
1397
+ margin-top: calc(var(--spacing) * 10);
1398
+ margin-bottom: calc(var(--spacing) * 3);
1399
+ font-size: var(--text-2xl);
1400
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
1401
+ }
524
1402
 
525
- .hljs-code,
526
- .hljs-string,
527
- .hljs-title.class_.inherited__ {
528
- color: var(--color-code-string);
529
- }
1403
+ .archive ol {
1404
+ list-style-type: none;
1405
+ }
530
1406
 
531
- .hljs-built_in,
532
- .hljs-doctag,
533
- .hljs-quote,
534
- .hljs-regexp,
535
- .hljs-keyword.hljs-atrule {
536
- color: var(--color-code-support);
537
- }
1407
+ :where(.archive ol > :not(:last-child)) {
1408
+ --tw-space-y-reverse: 0;
1409
+ margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
1410
+ margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
1411
+ }
538
1412
 
539
- .hljs-attribute,
540
- .hljs-function .hljs-title,
541
- .hljs-section,
542
- .hljs-title.function_ {
543
- color: var(--color-code-function);
544
- }
1413
+ .archive ol {
1414
+ padding: 0;
1415
+ }
545
1416
 
546
- .hljs-keyword,
547
- .hljs-template-tag,
548
- .hljs-type {
549
- color: var(--color-code-keyword);
550
- }
1417
+ .archive a {
1418
+ align-items: center;
1419
+ min-block-size: 24px;
1420
+ min-inline-size: 24px;
1421
+ display: inline-flex;
1422
+ }
551
1423
 
552
- .hljs-emphasis {
553
- color: var(--color-code-keyword);
554
- font-style: italic;
555
- }
1424
+ .pagination {
1425
+ margin-top: calc(var(--spacing) * 12);
1426
+ gap: calc(var(--spacing) * 4);
1427
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
1428
+ font-size: var(--text-sm);
1429
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1430
+ flex-wrap: wrap;
1431
+ display: flex;
1432
+ }
556
1433
 
557
- .hljs-meta,
558
- .hljs-meta .hljs-keyword,
559
- .hljs-meta .hljs-string {
560
- color: var(--color-code-meta);
561
- }
1434
+ .pagination a {
1435
+ align-items: center;
1436
+ gap: var(--spacing);
1437
+ min-block-size: 24px;
1438
+ min-inline-size: 24px;
1439
+ text-decoration-line: underline;
1440
+ text-decoration-color: currentColor;
1441
+ display: inline-flex;
1442
+ }
562
1443
 
563
- /* A diff reads by the line, not by the token, which is what prism-diff.css did
564
- * on the site this design comes from: the whole line takes a tint out to the
565
- * edges of the block — the negative margin cancels the `pre` padding and the
566
- * padding puts it back — and keeps the block's own ink, which is the pair the
567
- * contrast test checks. The `+` and the `-` stay in the text, so the meaning
568
- * does not rest on the colour alone.
569
- */
570
-
571
- .hljs-addition,
572
- .hljs-deletion {
573
- display: block;
574
- margin-inline: calc(-1 * var(--spacing-4));
575
- padding-inline: var(--spacing-4);
576
- color: var(--color-code-text);
577
- text-decoration: none;
578
- }
1444
+ @supports (color: color-mix(in lab, red, red)) {
1445
+ .pagination a {
1446
+ -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
1447
+ -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
1448
+ text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
1449
+ }
1450
+ }
579
1451
 
580
- .hljs-addition {
581
- background-color: var(--color-code-added-background);
582
- }
1452
+ .pagination a {
1453
+ text-underline-offset: 4px;
1454
+ text-decoration-thickness: 1px;
1455
+ }
583
1456
 
584
- .hljs-deletion {
585
- background-color: var(--color-code-removed-background);
586
- }
1457
+ @media (hover: hover) {
1458
+ .pagination a:hover {
1459
+ color: var(--color-primary);
1460
+ -webkit-text-decoration-color: var(--color-primary);
1461
+ -webkit-text-decoration-color: var(--color-primary);
1462
+ text-decoration-color: var(--color-primary);
1463
+ text-decoration-thickness: 2px;
1464
+ }
1465
+ }
587
1466
 
588
- /* Screen reader text. The skip link is this until it is focused, and then it
589
- is a box at the top left of the page. */
590
-
591
- .screen-reader-text {
592
- position: absolute;
593
- width: 1px;
594
- height: 1px;
595
- margin: -1px;
596
- padding: 0;
597
- overflow: hidden;
598
- border: 0;
599
- clip-path: inset(50%);
600
- word-wrap: normal !important;
601
- }
1467
+ .pagination a:focus-visible {
1468
+ text-decoration-thickness: 2px;
1469
+ }
602
1470
 
603
- .screen-reader-text:focus {
604
- display: block;
605
- width: auto;
606
- height: auto;
607
- inset-block-start: var(--spacing-2);
608
- inset-inline-start: var(--spacing-2);
609
- padding: var(--spacing-4);
610
- clip-path: none;
611
- background-color: var(--color-base-3);
612
- color: var(--color-text);
613
- font-size: var(--fontSize-1);
614
- font-weight: var(--fontWeight-bold);
615
- line-height: normal;
616
- text-decoration: none;
617
- z-index: 100000;
618
- }
1471
+ .pagination-next {
1472
+ margin-inline-start: auto;
1473
+ }
619
1474
 
620
- /* The page shell */
1475
+ .search-form {
1476
+ margin-bottom: calc(var(--spacing) * 8);
1477
+ gap: calc(var(--spacing) * 2);
1478
+ display: flex;
1479
+ }
621
1480
 
622
- .global-wrapper {
623
- max-width: var(--maxWidth-wrapper);
624
- margin: var(--spacing-0) auto;
625
- padding: var(--spacing-10) var(--spacing-5);
626
- }
1481
+ .search-form label {
1482
+ flex: 1;
1483
+ }
627
1484
 
628
- .global-wrapper[data-is-root-path='true'] .bio {
629
- margin-bottom: var(--spacing-20);
630
- }
1485
+ .search-summary {
1486
+ margin-bottom: calc(var(--spacing) * 8);
1487
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
1488
+ font-size: var(--text-sm);
1489
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1490
+ color: var(--color-muted);
1491
+ }
631
1492
 
632
- .global-header {
633
- margin-bottom: var(--spacing-12);
634
- }
1493
+ .search-result + .search-result {
1494
+ margin-top: calc(var(--spacing) * 9);
1495
+ border-top-style: var(--tw-border-style);
1496
+ border-top-width: 1px;
1497
+ border-color: var(--color-rule);
1498
+ padding-top: calc(var(--spacing) * 9);
1499
+ }
635
1500
 
636
- .main-heading {
637
- margin: 0;
638
- font-size: var(--fontSize-7);
639
- }
1501
+ .search-result .feed-title {
1502
+ font-size: var(--text-2xl);
1503
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
1504
+ }
640
1505
 
641
- .header-link-home {
642
- font-family: var(--font-heading);
643
- font-size: var(--fontSize-2);
644
- font-weight: var(--fontWeight-bold);
645
- text-decoration: none;
646
- }
1506
+ .search-snippet mark {
1507
+ border-radius: var(--radius-xs);
1508
+ background-color: var(--color-primary);
1509
+ }
647
1510
 
648
- /* The site menu, which the header carries on every page (TASK-105). At the
649
- root the header is the site title with the tagline under it, and the menu
650
- is a line of its own under that.
1511
+ @supports (color: color-mix(in lab, red, red)) {
1512
+ .search-snippet mark {
1513
+ background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
1514
+ }
1515
+ }
651
1516
 
652
- No size of its own (TASK-111): a menu is navigation somebody is meant to
653
- use rather than a footnote, so it reads at the page's size, like the footer
654
- menu, which never had one. */
655
- .global-header .site-nav {
656
- margin-top: var(--spacing-2);
657
- }
1517
+ .search-snippet mark {
1518
+ padding-inline: calc(var(--spacing) * .5);
1519
+ color: var(--color-text);
1520
+ }
658
1521
 
659
- /* Everywhere else the header is the small link home, and the menu sits beside
660
- it on the same line — the two wrap onto a second line together rather than
661
- the menu dropping under the link on a narrow screen. */
662
- .global-wrapper:not([data-is-root-path='true']) .global-header {
663
- display: flex;
664
- flex-wrap: wrap;
665
- align-items: baseline;
666
- column-gap: var(--spacing-5);
667
- row-gap: var(--spacing-1);
668
- }
1522
+ :is(.not-found, .server-error, .maintenance) > p {
1523
+ font-size: 1.08rem;
1524
+ }
669
1525
 
670
- .global-wrapper:not([data-is-root-path='true']) .global-header .site-nav {
671
- margin-top: var(--spacing-0);
672
- }
1526
+ .reactions-section {
1527
+ margin-top: calc(var(--spacing) * 14);
1528
+ margin-bottom: calc(var(--spacing) * 10);
1529
+ column-gap: calc(var(--spacing) * 10);
1530
+ row-gap: calc(var(--spacing) * 4);
1531
+ flex-wrap: wrap;
1532
+ display: flex;
1533
+ }
673
1534
 
674
- /* An entry: a post or a page (TASK-83). The source design's own rules — the
675
- title tight against the words under it, a subtitle in the heading font —
676
- plus the small line the `e-content` ends on, which carries the permalink,
677
- the published date and, when it is a different day, the updated one. */
1535
+ .reaction-group {
1536
+ min-width: 0;
1537
+ }
678
1538
 
679
- .blog-post header h1 {
680
- margin: var(--spacing-0) var(--spacing-0) var(--spacing-4) var(--spacing-0);
681
- }
1539
+ .reaction-title {
1540
+ margin-bottom: calc(var(--spacing) * 2);
1541
+ --tw-font-weight: var(--font-weight-normal);
1542
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
1543
+ font-size: .72rem;
1544
+ font-weight: var(--font-weight-normal);
1545
+ --tw-tracking: .14em;
1546
+ letter-spacing: .14em;
1547
+ color: var(--color-muted);
1548
+ text-transform: uppercase;
1549
+ }
682
1550
 
683
- .blog-post header p {
684
- font-family: var(--font-heading);
685
- font-size: var(--fontSize-2);
686
- }
1551
+ .reaction-count {
1552
+ --tw-font-weight: var(--font-weight-semibold);
1553
+ font-weight: var(--font-weight-semibold);
1554
+ color: var(--color-text);
1555
+ margin-inline-start: var(--spacing);
1556
+ }
687
1557
 
688
- .entry-meta,
689
- .page-meta {
690
- margin-top: var(--spacing-8);
691
- }
1558
+ .facepile {
1559
+ flex-wrap: wrap;
1560
+ align-items: center;
1561
+ display: flex;
1562
+ }
692
1563
 
693
- /* A page usually carries no date, and then this line has nothing in it. The
694
- layout prints it anyway, so a site has one hook wherever it is; here is
695
- where it disappears. */
696
- .entry-meta:empty,
697
- .page-meta:empty {
698
- display: none;
699
- }
1564
+ .facepile > a, .facepile > span {
1565
+ --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1566
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1567
+ --tw-ring-color: var(--color-body);
1568
+ border-radius: 3.40282e38px;
1569
+ margin-inline-start: calc(var(--spacing) * -2);
1570
+ position: relative;
1571
+ }
700
1572
 
701
- /* The bio, which the entry footer prints and an author archive heads with
702
- (TASK-83). */
1573
+ :is(.facepile > a, .facepile > span):first-child {
1574
+ margin-inline-start: 0;
1575
+ }
703
1576
 
704
- .bio {
705
- display: flex;
706
- align-items: center;
707
- margin-bottom: var(--spacing-16);
708
- }
1577
+ @media (hover: hover) {
1578
+ :is(.facepile > a, .facepile > span):hover {
1579
+ z-index: 10;
1580
+ }
1581
+ }
709
1582
 
710
- .bio p {
711
- margin-bottom: var(--spacing-0);
712
- }
1583
+ @media (prefers-reduced-motion: no-preference) {
1584
+ .facepile > a, .facepile > span {
1585
+ transition-property: transform, translate, scale, rotate;
1586
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1587
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1588
+ }
1589
+
1590
+ @media (hover: hover) {
1591
+ :is(.facepile > a, .facepile > span):hover {
1592
+ --tw-scale-x: 110%;
1593
+ --tw-scale-y: 110%;
1594
+ --tw-scale-z: 110%;
1595
+ scale: var(--tw-scale-x) var(--tw-scale-y);
1596
+ }
1597
+ }
1598
+ }
713
1599
 
714
- /* The name reads as the heading of the card; the source theme printed a
715
- <strong> around it, which is styling in the markup. */
716
- .bio .p-name {
717
- font-weight: var(--fontWeight-bold);
718
- }
1600
+ .facepile img {
1601
+ width: calc(var(--spacing) * 8);
1602
+ height: calc(var(--spacing) * 8);
1603
+ border-radius: 3.40282e38px;
1604
+ }
719
1605
 
720
- .bio-note {
721
- margin-top: var(--spacing-2);
722
- font-style: italic;
723
- }
1606
+ .facepile > :has(.reaction-name) {
1607
+ align-items: center;
1608
+ gap: var(--spacing);
1609
+ background-color: var(--color-base);
1610
+ min-block-size: 24px;
1611
+ min-inline-size: 24px;
1612
+ padding-inline: calc(var(--spacing) * 2);
1613
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
1614
+ font-size: var(--text-sm);
1615
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1616
+ color: var(--color-text);
1617
+ --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1618
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1619
+ margin-inline-start: var(--spacing);
1620
+ text-decoration-line: none;
1621
+ display: inline-flex;
1622
+ }
724
1623
 
725
- /* The links the person calls their own, under the credit: a horizontal list in
726
- the heading font, at the page's size like every other nav (TASK-111). The
727
- site menu used to share this rule; it is in the header now (TASK-105) and
728
- the bio carries nobody but the person. */
729
- .bio-links {
730
- margin-top: var(--spacing-2);
731
- }
1624
+ .facepile > :has(.reaction-name):first-child {
1625
+ margin-inline-start: 0;
1626
+ }
732
1627
 
733
- .bio-avatar {
734
- display: inline-block;
735
- min-width: 55px;
736
- margin-inline-end: var(--spacing-4);
737
- margin-bottom: var(--spacing-0);
738
- border: 3px solid var(--color-base-3);
739
- border-radius: 50%;
740
- }
1628
+ .reaction-icon {
1629
+ font-size: var(--text-xs);
1630
+ line-height: var(--tw-leading, var(--text-xs--line-height));
1631
+ }
741
1632
 
742
- .bio-avatar img {
743
- display: block;
744
- width: 50px;
745
- height: 50px;
746
- border-radius: 50%;
747
- }
1633
+ .comments-area {
1634
+ margin-top: calc(var(--spacing) * 14);
1635
+ }
748
1636
 
749
- .circle {
750
- border-radius: 50%;
751
- }
1637
+ .comments-title {
1638
+ margin-bottom: calc(var(--spacing) * 5);
1639
+ font-size: var(--text-xl);
1640
+ line-height: var(--tw-leading, var(--text-xl--line-height));
1641
+ }
752
1642
 
753
- /* A listing: the feed of entries, and what heads one (TASK-82). The source
754
- design's own rules, on the tokens above. The feed itself takes no styling —
755
- it is a stack of articles at the measure — and what makes it read as a list
756
- is the rule between two of them and the small meta line under each. */
1643
+ .comment-list {
1644
+ margin: 0;
1645
+ list-style-type: none;
1646
+ }
757
1647
 
758
- .feed-title {
759
- margin: var(--spacing-0) var(--spacing-0) var(--spacing-4) var(--spacing-0);
760
- padding: var(--spacing-0);
761
- font-size: var(--fontSize-3);
762
- }
1648
+ :where(.comment-list > :not(:last-child)) {
1649
+ --tw-space-y-reverse: 0;
1650
+ margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
1651
+ margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
1652
+ }
763
1653
 
764
- .feed-separator {
765
- margin: var(--spacing-2) var(--spacing-0) var(--spacing-4) var(--spacing-0);
766
- }
1654
+ .comment-list {
1655
+ padding: 0;
1656
+ }
767
1657
 
768
- .feed-meta {
769
- display: flex;
770
- flex-wrap: wrap;
771
- gap: var(--spacing-2);
772
- align-items: baseline;
773
- font-size: 70%;
774
- }
1658
+ .comment-list .children {
1659
+ margin-top: calc(var(--spacing) * 6);
1660
+ list-style-type: none;
1661
+ }
775
1662
 
776
- .feed-meta p {
777
- margin: var(--spacing-0);
778
- }
1663
+ :where(.comment-list .children > :not(:last-child)) {
1664
+ --tw-space-y-reverse: 0;
1665
+ margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
1666
+ margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
1667
+ }
779
1668
 
780
- .post-categories {
781
- margin-top: var(--spacing-2);
782
- margin-bottom: var(--spacing-0);
783
- font-size: 70%;
784
- }
1669
+ .comment-list .children {
1670
+ border-inline-start-style: var(--tw-border-style);
1671
+ border-inline-start-width: 1px;
1672
+ border-color: var(--color-rule);
1673
+ padding-inline-start: calc(var(--spacing) * 6);
1674
+ }
785
1675
 
786
- .post-categories a {
787
- display: inline-block;
788
- margin-inline-end: var(--spacing-2);
789
- }
1676
+ @media (min-width: 40rem) {
1677
+ .comment-list .children {
1678
+ padding-inline-start: calc(var(--spacing) * 12);
1679
+ }
1680
+ }
790
1681
 
791
- /* The categories are already small; inside the meta line they would be small
792
- twice over, so there they are the size of the line they sit on. */
793
- .feed-meta .post-categories {
794
- font-size: 100%;
795
- }
1682
+ .comment-body {
1683
+ gap: calc(var(--spacing) * 2);
1684
+ flex-direction: column;
1685
+ display: flex;
1686
+ }
796
1687
 
797
- .category-header {
798
- margin-bottom: var(--spacing-8);
799
- }
1688
+ .comment-meta {
1689
+ align-items: center;
1690
+ column-gap: calc(var(--spacing) * 3);
1691
+ row-gap: var(--spacing);
1692
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
1693
+ font-size: var(--text-sm);
1694
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1695
+ flex-wrap: wrap;
1696
+ display: flex;
1697
+ }
800
1698
 
801
- .category-description {
802
- margin-top: var(--spacing-2);
803
- font-style: italic;
804
- }
1699
+ .comment-author {
1700
+ align-items: center;
1701
+ gap: calc(var(--spacing) * 2);
1702
+ display: flex;
1703
+ }
805
1704
 
806
- /* Pagination: two arrows under a listing, the previous one at the left edge
807
- and the next at the right however few there are. */
808
-
809
- .pagination {
810
- display: flex;
811
- gap: var(--spacing-4);
812
- align-items: baseline;
813
- justify-content: space-between;
814
- margin-top: var(--spacing-12);
815
- padding-top: var(--spacing-5);
816
- border-top: 1px solid var(--color-base);
817
- font-family: var(--font-heading);
818
- font-size: var(--fontSize-0);
819
- }
1705
+ .comment-author .avatar, .comment-avatar-empty {
1706
+ width: calc(var(--spacing) * 8);
1707
+ height: calc(var(--spacing) * 8);
1708
+ border-radius: 3.40282e38px;
1709
+ flex-shrink: 0;
1710
+ }
820
1711
 
821
- .pagination-previous {
822
- margin-inline-end: auto;
823
- }
1712
+ .comment-avatar-empty {
1713
+ background-color: var(--color-base);
1714
+ --tw-font-weight: var(--font-weight-semibold);
1715
+ font-weight: var(--font-weight-semibold);
1716
+ color: var(--color-muted);
1717
+ justify-content: center;
1718
+ align-items: center;
1719
+ display: inline-flex;
1720
+ }
824
1721
 
825
- .pagination-next {
826
- margin-inline-start: auto;
827
- }
1722
+ .comment-author a {
1723
+ align-items: center;
1724
+ min-block-size: 24px;
1725
+ min-inline-size: 24px;
1726
+ text-decoration-line: underline;
1727
+ text-decoration-color: currentColor;
1728
+ display: inline-flex;
1729
+ }
828
1730
 
829
- /* Where a post links its neighbours, which the entry layout prints (TASK-83). */
1731
+ @supports (color: color-mix(in lab, red, red)) {
1732
+ .comment-author a {
1733
+ -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
1734
+ -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
1735
+ text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
1736
+ }
1737
+ }
830
1738
 
831
- .blog-post-nav {
832
- font-family: var(--font-heading);
833
- font-size: var(--fontSize-0);
834
- }
1739
+ .comment-author a {
1740
+ text-underline-offset: 4px;
1741
+ text-decoration-thickness: 1px;
1742
+ }
835
1743
 
836
- .blog-post-nav ul {
837
- display: flex;
838
- flex-wrap: wrap;
839
- justify-content: space-between;
840
- margin: var(--spacing-0);
841
- padding: 0;
842
- list-style: none;
843
- }
1744
+ @media (hover: hover) {
1745
+ .comment-author a:hover {
1746
+ color: var(--color-primary);
1747
+ -webkit-text-decoration-color: var(--color-primary);
1748
+ -webkit-text-decoration-color: var(--color-primary);
1749
+ text-decoration-color: var(--color-primary);
1750
+ text-decoration-thickness: 2px;
1751
+ }
1752
+ }
844
1753
 
845
- /* Titles: what heads a listing, a 404 and an author archive. The source theme
846
- prints none of these — it has no archive heading at all — so they are the
847
- theme's own, sized off the same scale. An entry's own title is
848
- `.blog-post header h1` above. */
1754
+ .comment-author a:focus-visible {
1755
+ text-decoration-thickness: 2px;
1756
+ }
849
1757
 
850
- .page-title {
851
- margin: 0 0 var(--spacing-2);
852
- font-size: var(--fontSize-6);
853
- }
1758
+ .comment-author a {
1759
+ color: var(--color-text);
1760
+ }
854
1761
 
855
- .empty {
856
- font-family: var(--font-heading);
857
- font-size: var(--fontSize-0);
858
- }
1762
+ .comment-metadata a {
1763
+ align-items: center;
1764
+ min-block-size: 24px;
1765
+ min-inline-size: 24px;
1766
+ text-decoration-line: underline;
1767
+ text-decoration-color: currentColor;
1768
+ display: inline-flex;
1769
+ }
859
1770
 
860
- /* The search box (TASK-22): a field and a button on one line, at the top of
861
- the search page and nowhere else (TASK-105). The field is drawn the way the
862
- comment form's are, so the site has one look for a place to type. */
1771
+ @supports (color: color-mix(in lab, red, red)) {
1772
+ .comment-metadata a {
1773
+ -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
1774
+ -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
1775
+ text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
1776
+ }
1777
+ }
863
1778
 
864
- .search-form {
865
- display: flex;
866
- gap: var(--spacing-2);
867
- margin: 0 0 var(--spacing-4);
868
- font-family: var(--font-heading);
869
- }
1779
+ .comment-metadata a {
1780
+ text-underline-offset: 4px;
1781
+ text-decoration-thickness: 1px;
1782
+ }
870
1783
 
871
- .search-form label {
872
- flex: 1;
873
- min-width: 0;
874
- }
1784
+ @media (hover: hover) {
1785
+ .comment-metadata a:hover {
1786
+ color: var(--color-primary);
1787
+ -webkit-text-decoration-color: var(--color-primary);
1788
+ -webkit-text-decoration-color: var(--color-primary);
1789
+ text-decoration-color: var(--color-primary);
1790
+ text-decoration-thickness: 2px;
1791
+ }
1792
+ }
875
1793
 
876
- .search-form input[type='search'] {
877
- width: 100%;
878
- padding: var(--spacing-2);
879
- border: 1px solid var(--color-base);
880
- background-color: var(--color-base-3);
881
- color: var(--color-text);
882
- font-family: var(--font-body);
883
- font-size: var(--fontSize-1);
884
- }
1794
+ .comment-metadata a:focus-visible {
1795
+ text-decoration-thickness: 2px;
1796
+ }
885
1797
 
886
- .search-form input[type='search']:focus-visible {
887
- outline: 2px solid var(--color-primary);
888
- outline-offset: -1px;
889
- border-color: var(--color-primary);
890
- }
1798
+ .comment-metadata a, .comment-metadata {
1799
+ color: var(--color-muted);
1800
+ }
891
1801
 
892
- .search-form button {
893
- padding: var(--spacing-2) var(--spacing-4);
894
- border: none;
895
- background-color: var(--color-primary);
896
- color: var(--color-body);
897
- font-family: var(--font-heading);
898
- font-size: var(--fontSize-1);
899
- cursor: pointer;
900
- }
1802
+ .comment-source {
1803
+ color: var(--color-muted);
1804
+ font-style: italic;
1805
+ }
901
1806
 
902
- .search-form button:hover,
903
- .search-form button:focus-visible {
904
- opacity: 0.85;
905
- }
1807
+ .comment-content {
1808
+ font-size: 1.02rem;
1809
+ }
906
1810
 
907
- .search-summary {
908
- font-family: var(--font-heading);
909
- font-size: var(--fontSize-0);
910
- }
1811
+ .reply {
1812
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
1813
+ font-size: var(--text-sm);
1814
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1815
+ }
911
1816
 
912
- .search-result {
913
- margin: 0 0 var(--spacing-8);
914
- }
1817
+ .reply a {
1818
+ align-items: center;
1819
+ min-block-size: 24px;
1820
+ min-inline-size: 24px;
1821
+ display: inline-flex;
1822
+ }
915
1823
 
916
- .search-result .feed-title {
917
- margin-bottom: var(--spacing-2);
918
- }
1824
+ .no-comments {
1825
+ margin-top: calc(var(--spacing) * 8);
1826
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
1827
+ font-size: var(--text-sm);
1828
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1829
+ color: var(--color-muted);
1830
+ font-style: italic;
1831
+ }
919
1832
 
920
- /* A matched word is marked by weight and an underline in the primary colour
921
- rather than by a highlighter background, so it adds no colour pair the
922
- contrast test would have to prove in both schemes. */
1833
+ .comment-respond {
1834
+ margin-top: calc(var(--spacing) * 12);
1835
+ border-top-style: var(--tw-border-style);
1836
+ border-top-width: 1px;
1837
+ border-color: var(--color-rule);
1838
+ padding-top: calc(var(--spacing) * 10);
1839
+ }
923
1840
 
924
- .search-snippet mark {
925
- background-color: transparent;
926
- color: inherit;
927
- font-weight: var(--fontWeight-bold);
928
- text-decoration: underline var(--color-primary);
929
- text-underline-offset: 0.15em;
930
- }
1841
+ .comment-reply-title, .contact-form-title {
1842
+ margin-bottom: calc(var(--spacing) * 5);
1843
+ font-size: var(--text-xl);
1844
+ line-height: var(--tw-leading, var(--text-xl--line-height));
1845
+ }
931
1846
 
932
- /* An author archive (TASK-67): the person above their posts. The same URL is
933
- their ActivityPub actor, so this is the page a follower sees when they click
934
- through from somewhere else on the fediverse. The person themselves is the
935
- bio above; this is only what is left, the heading over it. */
1847
+ .comment-help {
1848
+ margin-top: calc(var(--spacing) * -3);
1849
+ margin-bottom: calc(var(--spacing) * 5);
1850
+ color: var(--color-muted);
1851
+ font-size: .95rem;
1852
+ }
936
1853
 
937
- .author-header {
938
- margin-bottom: var(--spacing-4);
939
- }
1854
+ .comment-respond form {
1855
+ gap: calc(var(--spacing) * 4);
1856
+ flex-direction: column;
1857
+ display: flex;
1858
+ }
940
1859
 
941
- /* The front page (TASK-85): the site's own words, then Recent Posts, then
942
- where to go next. Almost nothing is needed — the words are `.e-content`
943
- below, the posts are the feed above, and the heading over them is an
944
- ordinary `h2` — so this is only the line of links, which follows a feed
945
- rather than a paragraph and needs the air a paragraph would already have. */
1860
+ .field-row {
1861
+ column-gap: calc(var(--spacing) * 4);
1862
+ row-gap: calc(var(--spacing) * 4);
1863
+ display: grid;
1864
+ }
946
1865
 
947
- .front-links {
948
- margin-top: var(--spacing-8);
949
- }
1866
+ @media (min-width: 40rem) {
1867
+ .field-row {
1868
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1869
+ }
1870
+ }
950
1871
 
951
- /* An archive page: every post there has ever been, under a heading per month.
952
- The source design's essays page is plain headings over `ol.list-none` and
953
- nothing else, so the prose rules draw it; what is here only closes the gap
954
- between a month and its own posts, which at the prose spacing reads as two
955
- things rather than as one. */
1872
+ .comment-respond label {
1873
+ margin-bottom: var(--spacing);
1874
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
1875
+ font-size: var(--text-sm);
1876
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1877
+ display: block;
1878
+ }
956
1879
 
957
- .archive h2 {
958
- margin-bottom: var(--spacing-2);
959
- }
1880
+ .comment-optional, .contact-optional, .comment-hint, .contact-hint {
1881
+ color: var(--color-muted);
1882
+ }
960
1883
 
961
- /* Body copy: whatever a document's words render into, which is the entry's
962
- `section.e-content` and the `div.page-body.e-content` a posts page prints
963
- its own words in. */
1884
+ .comment-hint, .contact-hint, .comment-field-error, .contact-field-error {
1885
+ margin-top: var(--spacing);
1886
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
1887
+ font-size: var(--text-sm);
1888
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1889
+ display: block;
1890
+ }
964
1891
 
965
- .e-content {
966
- overflow-wrap: break-word;
967
- }
1892
+ .comment-field-error, .contact-field-error {
1893
+ color: var(--color-error);
1894
+ }
968
1895
 
969
- .e-content > :first-child {
970
- margin-top: 0;
971
- }
1896
+ :is(.comment-respond, .search-form) :is(input:not([type="checkbox"], [type="hidden"]), textarea) {
1897
+ border-radius: var(--radius-md);
1898
+ border-style: var(--tw-border-style);
1899
+ border-width: 1px;
1900
+ border-color: var(--color-edge);
1901
+ background-color: var(--color-base);
1902
+ width: 100%;
1903
+ padding-inline: calc(var(--spacing) * 3);
1904
+ padding-block: calc(var(--spacing) * 2);
1905
+ font-family: Iowan Old Style, Palatino Linotype, Palatino, Book Antiqua, Georgia, serif;
1906
+ font-size: var(--text-base);
1907
+ line-height: var(--tw-leading, var(--text-base--line-height));
1908
+ color: var(--color-text);
1909
+ display: block;
1910
+ }
972
1911
 
973
- .e-content table {
974
- display: block;
975
- overflow-x: auto;
976
- }
1912
+ :is(.comment-respond, .search-form) :is(input, textarea):is(:user-invalid, [aria-invalid="true"]) {
1913
+ border-style: var(--tw-border-style);
1914
+ border-width: 2px;
1915
+ border-color: var(--color-error);
1916
+ padding-block: calc(.5rem - 1px);
1917
+ padding-inline: calc(.75rem - 1px);
1918
+ }
977
1919
 
978
- .e-content th,
979
- .e-content td {
980
- padding: var(--spacing-1) var(--spacing-3);
981
- text-align: start;
982
- }
1920
+ .comment-check {
1921
+ align-items: center;
1922
+ gap: calc(var(--spacing) * 2);
1923
+ display: flex;
1924
+ }
983
1925
 
984
- .footnotes {
985
- margin-top: var(--spacing-10);
986
- padding-top: var(--spacing-4);
987
- border-top: 1px solid var(--color-base);
988
- font-size: var(--fontSize-0);
989
- }
1926
+ .comment-check label {
1927
+ margin-bottom: 0;
1928
+ }
990
1929
 
991
- .footnote-item p {
992
- display: inline;
993
- }
1930
+ .comment-respond input[type="checkbox"] {
1931
+ block-size: 24px;
1932
+ inline-size: 24px;
1933
+ accent-color: var(--color-primary);
1934
+ margin: 0;
1935
+ }
994
1936
 
995
- /* Reactions: the likes, the boosts and the pages that mentioned a post,
996
- grouped by kind as facepiles of small round avatars (TASK-84). */
1937
+ .search-form button, .comment-respond .form-submit button, .comment-respond .form-submit input[type="submit"] {
1938
+ cursor: pointer;
1939
+ border-radius: var(--radius-md);
1940
+ background-color: var(--color-primary);
1941
+ padding-inline: calc(var(--spacing) * 5);
1942
+ padding-block: calc(var(--spacing) * 2.5);
1943
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
1944
+ font-size: var(--text-sm);
1945
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1946
+ --tw-font-weight: var(--font-weight-semibold);
1947
+ font-weight: var(--font-weight-semibold);
1948
+ color: var(--color-body);
1949
+ }
997
1950
 
998
- .reactions-section {
999
- margin-top: var(--spacing-12);
1000
- }
1951
+ @media (hover: hover) {
1952
+ :is(.search-form button, .comment-respond .form-submit button, .comment-respond .form-submit input[type="submit"]):hover {
1953
+ background-color: var(--color-text);
1954
+ }
1955
+ }
1001
1956
 
1002
- .reaction-group {
1003
- display: flex;
1004
- align-items: center;
1005
- gap: var(--spacing-3);
1006
- margin-bottom: var(--spacing-3);
1007
- }
1957
+ .search-form button, .comment-respond .form-submit button, .comment-respond .form-submit input[type="submit"] {
1958
+ min-block-size: 24px;
1959
+ min-inline-size: 24px;
1960
+ }
1008
1961
 
1009
- .reaction-title {
1010
- margin: 0;
1011
- font-family: var(--font-heading);
1012
- font-size: var(--fontSize-1);
1013
- white-space: nowrap;
1014
- }
1962
+ .comment-signed-in, .comment-replying-to {
1963
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
1964
+ font-size: var(--text-sm);
1965
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1966
+ color: var(--color-muted);
1967
+ }
1015
1968
 
1016
- .facepile {
1017
- display: flex;
1018
- flex-wrap: wrap;
1019
- gap: var(--spacing-1);
1020
- }
1969
+ .comment-signed-in a, .comment-replying-to a {
1970
+ color: var(--color-primary);
1971
+ }
1021
1972
 
1022
- .facepile a,
1023
- .facepile span {
1024
- display: inline-block;
1025
- line-height: 0;
1026
- text-decoration: none;
1027
- }
1973
+ .comment-notice, .contact-notice {
1974
+ border-radius: var(--radius-md);
1975
+ border-style: var(--tw-border-style);
1976
+ border-width: 1px;
1977
+ border-color: var(--color-edge);
1978
+ background-color: var(--color-base);
1979
+ padding: calc(var(--spacing) * 4);
1980
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
1981
+ font-size: var(--text-sm);
1982
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1983
+ color: var(--color-text);
1984
+ }
1028
1985
 
1029
- /* A face is a picture of somebody: the block of colour a link takes on hover
1030
- everywhere else would sit behind it as a frame, so it is taken back off. */
1986
+ .comment-error, .contact-error {
1987
+ margin-block: calc(var(--spacing) * 6);
1988
+ border-inline-start-style: var(--tw-border-style);
1989
+ border-inline-start-width: 2px;
1990
+ border-color: var(--color-error);
1991
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
1992
+ font-size: var(--text-sm);
1993
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1994
+ padding-inline-start: calc(var(--spacing) * 4);
1995
+ }
1031
1996
 
1032
- .facepile a:hover,
1033
- .facepile a:focus {
1034
- background-color: transparent;
1035
- color: var(--color-primary);
1036
- text-decoration: underline;
1037
- }
1997
+ .comment-error h3, .contact-error h3 {
1998
+ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
1999
+ font-size: var(--text-base);
2000
+ line-height: var(--tw-leading, var(--text-base--line-height));
2001
+ --tw-font-weight: var(--font-weight-semibold);
2002
+ font-weight: var(--font-weight-semibold);
2003
+ color: var(--color-error);
2004
+ }
1038
2005
 
1039
- .facepile img {
1040
- display: block;
1041
- border-radius: 50%;
1042
- }
2006
+ .comment-error ul, .contact-error ul {
2007
+ margin-top: calc(var(--spacing) * 2);
2008
+ padding-inline-start: calc(var(--spacing) * 5);
2009
+ list-style-type: disc;
2010
+ }
1043
2011
 
1044
- /* A reaction with no avatar has nothing to recognise anybody by, so the emoji
1045
- badge of its kind stands in and the name is printed beside it — which needs
1046
- the line box the faces above do without. */
1047
-
1048
- .facepile a:has(.reaction-name),
1049
- .facepile span:has(.reaction-name) {
1050
- display: inline-flex;
1051
- align-items: center;
1052
- gap: var(--spacing-1);
1053
- font-family: var(--font-heading);
1054
- font-size: var(--fontSize-0);
1055
- line-height: normal;
1056
- }
2012
+ .comment-error a, .contact-error a {
2013
+ align-items: center;
2014
+ min-block-size: 24px;
2015
+ min-inline-size: 24px;
2016
+ display: inline-flex;
2017
+ }
1057
2018
 
1058
- .reaction-icon {
1059
- display: inline-block;
1060
- width: 2rem;
1061
- height: 2rem;
1062
- border-radius: 50%;
1063
- background-color: var(--color-base);
1064
- line-height: 2rem;
1065
- text-align: center;
2019
+ .comment-trap, .contact-trap {
2020
+ width: 1px;
2021
+ height: 1px;
2022
+ position: absolute;
2023
+ inset-inline-start: -10000px;
2024
+ overflow: hidden;
2025
+ }
1066
2026
  }
1067
2027
 
1068
- /* The thread under a post: the replies from every door, each one an h-entry
1069
- with its author, its time and its words, and answers nested inside it. */
2028
+ @layer utilities {
2029
+ .visible {
2030
+ visibility: visible;
2031
+ }
1070
2032
 
1071
- .comments-area {
1072
- margin-top: var(--spacing-12);
1073
- }
2033
+ .fixed {
2034
+ position: fixed;
2035
+ }
1074
2036
 
1075
- .comments-title {
1076
- margin: 0 0 var(--spacing-8);
1077
- font-size: var(--fontSize-4);
1078
- }
2037
+ .static {
2038
+ position: static;
2039
+ }
1079
2040
 
1080
- .comment-list,
1081
- .comment-list .children {
1082
- margin: 0;
1083
- padding: 0;
1084
- list-style: none;
1085
- }
2041
+ .target {
2042
+ align-items: center;
2043
+ min-block-size: 24px;
2044
+ min-inline-size: 24px;
2045
+ display: inline-flex;
2046
+ }
1086
2047
 
1087
- .comment-list .children {
1088
- margin-inline-start: var(--spacing-8);
1089
- }
2048
+ .block {
2049
+ display: block;
2050
+ }
1090
2051
 
1091
- .comment-body {
1092
- padding: var(--spacing-4) 0;
1093
- border-bottom: 1px solid var(--color-base);
1094
- }
2052
+ .contents {
2053
+ display: contents;
2054
+ }
1095
2055
 
1096
- .comment-author {
1097
- display: flex;
1098
- align-items: center;
1099
- gap: var(--spacing-2);
1100
- font-family: var(--font-heading);
1101
- }
2056
+ .hidden {
2057
+ display: none;
2058
+ }
1102
2059
 
1103
- .comment-author .avatar {
1104
- border-radius: 50%;
1105
- }
2060
+ .list-none {
2061
+ list-style-type: none;
2062
+ }
1106
2063
 
1107
- .comment-metadata {
1108
- margin-bottom: var(--spacing-2);
1109
- font-family: var(--font-heading);
1110
- font-size: var(--fontSize-0);
1111
- }
2064
+ .truncate {
2065
+ text-overflow: ellipsis;
2066
+ white-space: nowrap;
2067
+ overflow: hidden;
2068
+ }
1112
2069
 
1113
- /* The permalink is the whole date line, so it is the ink of the page rather
1114
- than a link's colour until somebody points at it. */
2070
+ .italic {
2071
+ font-style: italic;
2072
+ }
1115
2073
 
1116
- .comment-metadata a {
1117
- color: var(--color-text);
1118
- text-decoration: none;
2074
+ .outline {
2075
+ outline-style: var(--tw-outline-style);
2076
+ outline-width: 1px;
2077
+ }
1119
2078
  }
1120
2079
 
1121
- .comment-metadata a:hover,
1122
- .comment-metadata a:focus {
1123
- background-color: transparent;
1124
- color: var(--color-primary);
2080
+ :root {
2081
+ color-scheme: light dark;
2082
+ --color-body: #faf7f2;
2083
+ --color-text: #1c1917;
2084
+ --color-muted: #534c46;
2085
+ --color-primary: #8c2f1f;
2086
+ --color-secondary: #2b5580;
2087
+ --color-rule: #e4dccf;
2088
+ --color-edge: #8a867e;
2089
+ --color-base: #f3eee5;
2090
+ --color-base-2: #f5f6f7;
2091
+ --color-base-3: #fff;
2092
+ --color-code-background: #f3eee5;
2093
+ --color-code-text: #1c1917;
2094
+ --color-error: #9c1f18;
2095
+ --color-code-comment: #4e4f4d;
2096
+ --color-code-tag: #4e4f4e;
2097
+ --color-code-name: #991f1f;
2098
+ --color-code-literal: #77420f;
2099
+ --color-code-class: #624c00;
2100
+ --color-code-string: #455500;
2101
+ --color-code-support: #23565a;
2102
+ --color-code-function: #2f507c;
2103
+ --color-code-keyword: #63417a;
2104
+ --color-code-meta: #6d453c;
2105
+ --color-code-added-background: #dcedd3;
2106
+ --color-code-removed-background: #f5d8d6;
1125
2107
  }
1126
2108
 
1127
- .comment-content {
1128
- margin-top: var(--spacing-2);
2109
+ @media (prefers-color-scheme: dark) {
2110
+ :root {
2111
+ --color-body: #171412;
2112
+ --color-text: #ece6de;
2113
+ --color-muted: #b2aaa0;
2114
+ --color-primary: #ee9370;
2115
+ --color-secondary: #86b8e2;
2116
+ --color-rule: #3a332e;
2117
+ --color-edge: #706a67;
2118
+ --color-base: #221d1a;
2119
+ --color-base-2: #222124;
2120
+ --color-base-3: #2d2421;
2121
+ --color-code-background: #221d1a;
2122
+ --color-code-text: #ece6de;
2123
+ --color-error: #ff8f9f;
2124
+ --color-code-comment: #a9a9a9;
2125
+ --color-code-tag: #b4b7b4;
2126
+ --color-code-name: #f48b8d;
2127
+ --color-code-literal: #f99157;
2128
+ --color-code-class: #fc6;
2129
+ --color-code-string: #9c9;
2130
+ --color-code-support: #6cc;
2131
+ --color-code-function: #83add6;
2132
+ --color-code-keyword: #c9c;
2133
+ --color-code-meta: #c6a198;
2134
+ --color-code-added-background: #203622;
2135
+ --color-code-removed-background: #401e1e;
2136
+ }
1129
2137
  }
1130
2138
 
1131
- .comment-content > :last-child {
1132
- margin-bottom: 0;
1133
- }
2139
+ @media (forced-colors: active) {
2140
+ .search-form button, .comment-respond .form-submit button, .comment-respond .form-submit input[type="submit"] {
2141
+ border: 1px solid buttontext;
2142
+ }
1134
2143
 
1135
- .reply {
1136
- margin-top: var(--spacing-2);
1137
- font-family: var(--font-heading);
1138
- font-size: var(--fontSize-0);
1139
- }
2144
+ hr {
2145
+ border-block-start: 1px solid canvastext;
2146
+ }
1140
2147
 
1141
- .no-comments {
1142
- font-family: var(--font-heading);
1143
- font-style: italic;
1144
- }
2148
+ pre, code, .search-snippet mark, .comment-avatar-empty {
2149
+ border: 1px solid canvastext;
2150
+ }
1145
2151
 
1146
- /* The comment form under an open post, and the contact form on a page that
1147
- asked for one. One set of rules rather than two: they are the same kind of
1148
- form, the contact form wears `comment-respond` to say so, and a site
1149
- restyling one cannot leave the other behind. */
2152
+ pre code {
2153
+ border: 0;
2154
+ }
1150
2155
 
1151
- .comment-respond {
1152
- margin-top: var(--spacing-8);
2156
+ .facepile > a, .facepile > span {
2157
+ outline: 1px solid canvastext;
2158
+ }
1153
2159
  }
1154
2160
 
1155
- .comment-respond .comment-reply-title,
1156
- .comment-respond .contact-form-title {
1157
- margin: 0 0 var(--spacing-4);
1158
- font-size: var(--fontSize-4);
2161
+ @property --tw-outline-style {
2162
+ syntax: "*";
2163
+ inherits: false;
2164
+ initial-value: solid;
1159
2165
  }
1160
2166
 
1161
- .comment-respond label {
1162
- display: block;
1163
- margin-bottom: var(--spacing-1);
1164
- font-family: var(--font-heading);
1165
- font-size: var(--fontSize-0);
2167
+ @property --tw-leading {
2168
+ syntax: "*";
2169
+ inherits: false
1166
2170
  }
1167
2171
 
1168
- .comment-field,
1169
- .contact-field,
1170
- .comment-check {
1171
- margin: 0 0 var(--spacing-4);
2172
+ @property --tw-font-weight {
2173
+ syntax: "*";
2174
+ inherits: false
1172
2175
  }
1173
2176
 
1174
- /* The one label that belongs beside its field rather than over it. */
1175
-
1176
- .comment-check label {
1177
- display: inline;
2177
+ @property --tw-tracking {
2178
+ syntax: "*";
2179
+ inherits: false
1178
2180
  }
1179
2181
 
1180
- .comment-respond input[type='text'],
1181
- .comment-respond input[type='email'],
1182
- .comment-respond input[type='url'],
1183
- .comment-respond textarea {
1184
- width: 100%;
1185
- padding: var(--spacing-2);
1186
- border: 1px solid var(--color-base);
1187
- background-color: var(--color-base-3);
1188
- color: var(--color-text);
1189
- font-family: var(--font-body);
1190
- font-size: var(--fontSize-1);
2182
+ @property --tw-border-style {
2183
+ syntax: "*";
2184
+ inherits: false;
2185
+ initial-value: solid;
1191
2186
  }
1192
2187
 
1193
- .comment-respond input[type='text']:focus-visible,
1194
- .comment-respond input[type='email']:focus-visible,
1195
- .comment-respond input[type='url']:focus-visible,
1196
- .comment-respond textarea:focus-visible {
1197
- outline: 2px solid var(--color-primary);
1198
- outline-offset: -1px;
1199
- border-color: var(--color-primary);
2188
+ @property --tw-space-y-reverse {
2189
+ syntax: "*";
2190
+ inherits: false;
2191
+ initial-value: 0;
1200
2192
  }
1201
2193
 
1202
- .comment-respond textarea {
1203
- min-height: 8rem;
1204
- resize: vertical;
2194
+ @property --tw-shadow {
2195
+ syntax: "*";
2196
+ inherits: false;
2197
+ initial-value: 0 0 #0000;
1205
2198
  }
1206
2199
 
1207
- .comment-respond .form-submit button,
1208
- .comment-respond .form-submit input[type='submit'] {
1209
- padding: var(--spacing-2) var(--spacing-6);
1210
- border: none;
1211
- background-color: var(--color-primary);
1212
- color: var(--color-body);
1213
- font-family: var(--font-heading);
1214
- font-size: var(--fontSize-1);
1215
- cursor: pointer;
2200
+ @property --tw-shadow-color {
2201
+ syntax: "*";
2202
+ inherits: false
1216
2203
  }
1217
2204
 
1218
- .comment-respond .form-submit button:hover,
1219
- .comment-respond .form-submit button:focus-visible,
1220
- .comment-respond .form-submit input[type='submit']:hover,
1221
- .comment-respond .form-submit input[type='submit']:focus-visible {
1222
- opacity: 0.85;
2205
+ @property --tw-shadow-alpha {
2206
+ syntax: "<percentage>";
2207
+ inherits: false;
2208
+ initial-value: 100%;
1223
2209
  }
1224
2210
 
1225
- /* What a form says back: the thank-you after a submission, the message about
1226
- one that was refused, and what a reader is answering. */
1227
-
1228
- .comment-notice,
1229
- .comment-error,
1230
- .contact-notice,
1231
- .contact-error {
1232
- margin: 0 0 var(--spacing-4);
1233
- padding: var(--spacing-2) var(--spacing-3);
1234
- border-inline-start: var(--spacing-1) solid var(--color-secondary);
2211
+ @property --tw-inset-shadow {
2212
+ syntax: "*";
2213
+ inherits: false;
2214
+ initial-value: 0 0 #0000;
1235
2215
  }
1236
2216
 
1237
- .comment-error,
1238
- .contact-error {
1239
- border-inline-start-color: var(--color-error);
2217
+ @property --tw-inset-shadow-color {
2218
+ syntax: "*";
2219
+ inherits: false
1240
2220
  }
1241
2221
 
1242
- /* A refused form's summary: what went wrong as its heading, then a link to
1243
- each field to put right. */
1244
- .comment-error h3,
1245
- .contact-error h3 {
1246
- margin: 0;
1247
- font-size: var(--fontSize-1);
2222
+ @property --tw-inset-shadow-alpha {
2223
+ syntax: "<percentage>";
2224
+ inherits: false;
2225
+ initial-value: 100%;
1248
2226
  }
1249
2227
 
1250
- .comment-error ul,
1251
- .contact-error ul {
1252
- margin: var(--spacing-1) 0 0;
2228
+ @property --tw-ring-color {
2229
+ syntax: "*";
2230
+ inherits: false
1253
2231
  }
1254
2232
 
1255
- .comment-replying-to,
1256
- .comment-signed-in {
1257
- margin: 0 0 var(--spacing-4);
1258
- font-family: var(--font-heading);
1259
- font-size: var(--fontSize-0);
2233
+ @property --tw-ring-shadow {
2234
+ syntax: "*";
2235
+ inherits: false;
2236
+ initial-value: 0 0 #0000;
1260
2237
  }
1261
2238
 
1262
- .comment-optional,
1263
- .contact-optional {
1264
- font-size: var(--fontSize-0);
2239
+ @property --tw-inset-ring-color {
2240
+ syntax: "*";
2241
+ inherits: false
1265
2242
  }
1266
2243
 
1267
- .comment-hint,
1268
- .contact-hint,
1269
- .comment-field-error,
1270
- .contact-field-error {
1271
- display: block;
1272
- margin-top: var(--spacing-1);
1273
- font-size: var(--fontSize-0);
2244
+ @property --tw-inset-ring-shadow {
2245
+ syntax: "*";
2246
+ inherits: false;
2247
+ initial-value: 0 0 #0000;
1274
2248
  }
1275
2249
 
1276
- .comment-field-error,
1277
- .contact-field-error {
1278
- color: var(--color-error);
2250
+ @property --tw-ring-inset {
2251
+ syntax: "*";
2252
+ inherits: false
1279
2253
  }
1280
2254
 
1281
- /* Target size. A link that stands on its own rather than inside a sentence,
1282
- and every button, is at least 24 by 24 CSS pixels, the WCAG 2.2 AA minimum
1283
- for something a finger or an unsteady pointer has to hit. A link inside a
1284
- sentence is exempt and keeps the line it sits on. `inline-flex` grows the
1285
- box without moving the text off the baseline it shares with its line. */
1286
-
1287
- .site-nav a,
1288
- .post-categories a,
1289
- .blog-post-nav a,
1290
- .pagination a,
1291
- .comment-metadata a,
1292
- .reply a,
1293
- .comment-error a,
1294
- .contact-error a {
1295
- display: inline-flex;
1296
- align-items: center;
1297
- min-block-size: 24px;
1298
- min-inline-size: 24px;
2255
+ @property --tw-ring-offset-width {
2256
+ syntax: "<length>";
2257
+ inherits: false;
2258
+ initial-value: 0;
1299
2259
  }
1300
2260
 
1301
- .search-form button,
1302
- .comment-respond .form-submit button,
1303
- .comment-respond .form-submit input[type='submit'] {
1304
- min-block-size: 24px;
1305
- min-inline-size: 24px;
2261
+ @property --tw-ring-offset-color {
2262
+ syntax: "*";
2263
+ inherits: false;
2264
+ initial-value: #fff;
1306
2265
  }
1307
2266
 
1308
- .comment-respond input[type='checkbox'] {
1309
- inline-size: 24px;
1310
- block-size: 24px;
1311
- margin: 0;
1312
- vertical-align: middle;
2267
+ @property --tw-ring-offset-shadow {
2268
+ syntax: "*";
2269
+ inherits: false;
2270
+ initial-value: 0 0 #0000;
1313
2271
  }
1314
2272
 
1315
- /*
1316
- The honeypot. Taken out of the flow rather than `display: none`, because some
1317
- form fillers skip fields a browser would not paint at all and this one is
1318
- meant to be filled in.
1319
- */
1320
- .comment-trap,
1321
- .contact-trap {
1322
- position: absolute;
1323
- inset-inline-start: -10000px;
1324
- width: 1px;
1325
- height: 1px;
1326
- overflow: hidden;
2273
+ @property --tw-scale-x {
2274
+ syntax: "*";
2275
+ inherits: false;
2276
+ initial-value: 1;
1327
2277
  }
1328
2278
 
1329
- /* Media queries */
1330
-
1331
- @media (max-width: 42rem) {
1332
- .bio {
1333
- flex-direction: column;
1334
- }
1335
-
1336
- .bio-avatar {
1337
- margin-inline-end: var(--spacing-0);
1338
- margin-bottom: var(--spacing-4);
1339
- }
1340
-
1341
- blockquote {
1342
- margin-inline-start: var(--spacing-0);
1343
- padding-inline-start: var(--spacing-4);
1344
- }
1345
-
1346
- ul,
1347
- ol {
1348
- list-style-position: inside;
1349
- }
1350
-
1351
- .comment-list .children {
1352
- margin-inline-start: var(--spacing-4);
1353
- }
2279
+ @property --tw-scale-y {
2280
+ syntax: "*";
2281
+ inherits: false;
2282
+ initial-value: 1;
1354
2283
  }
1355
2284
 
1356
- /* Forced colours: Windows High Contrast and the like, where the reader's own
1357
- palette replaces every colour here. Borders and outlines survive that and
1358
- backgrounds do not, so anything drawn by a background alone takes a border
1359
- in a system colour: the buttons, which are otherwise a block of the primary
1360
- colour, the rule, which is a 1px background, and a block of code. Focus
1361
- needs nothing: every ring here is an outline, which the forced palette
1362
- redraws in its own colour. */
1363
-
1364
- @media (forced-colors: active) {
1365
- .search-form button,
1366
- .comment-respond .form-submit button,
1367
- .comment-respond .form-submit input[type='submit'] {
1368
- border: 1px solid ButtonText;
1369
- }
1370
-
1371
- hr {
1372
- border-block-start: 1px solid CanvasText;
1373
- }
1374
-
1375
- pre {
1376
- border: 1px solid CanvasText;
1377
- }
2285
+ @property --tw-scale-z {
2286
+ syntax: "*";
2287
+ inherits: false;
2288
+ initial-value: 1;
1378
2289
  }