@the-smithy/hearth 0.27.0 → 0.28.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.
- package/README.md +3 -2
- package/block-reference.html +1574 -0
- package/package.json +4 -3
|
@@ -0,0 +1,1574 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
6
|
+
<meta name="claude:viewport-fit-sides" content="cover">
|
|
7
|
+
<meta name="hearth-block-reference-inputs" content="8790de8920f88aac">
|
|
8
|
+
<title>Hearth Block Reference</title>
|
|
9
|
+
<style>/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
10
|
+
@layer properties;
|
|
11
|
+
@layer theme, base, components, utilities;
|
|
12
|
+
@layer theme {
|
|
13
|
+
:root, :host {
|
|
14
|
+
--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
15
|
+
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
|
16
|
+
"Courier New", monospace;
|
|
17
|
+
--color-black: #000;
|
|
18
|
+
--color-white: #fff;
|
|
19
|
+
--spacing: 0.25rem;
|
|
20
|
+
--container-2xl: 42rem;
|
|
21
|
+
--container-3xl: 48rem;
|
|
22
|
+
--container-4xl: 56rem;
|
|
23
|
+
--text-xs: 0.75rem;
|
|
24
|
+
--text-xs--line-height: calc(1 / 0.75);
|
|
25
|
+
--text-sm: 0.875rem;
|
|
26
|
+
--text-sm--line-height: calc(1.25 / 0.875);
|
|
27
|
+
--text-base: 1rem;
|
|
28
|
+
--text-base--line-height: calc(1.5 / 1);
|
|
29
|
+
--text-lg: 1.125rem;
|
|
30
|
+
--text-lg--line-height: calc(1.75 / 1.125);
|
|
31
|
+
--text-xl: 1.25rem;
|
|
32
|
+
--text-xl--line-height: calc(1.75 / 1.25);
|
|
33
|
+
--text-2xl: 1.5rem;
|
|
34
|
+
--text-2xl--line-height: calc(2 / 1.5);
|
|
35
|
+
--text-3xl: 1.875rem;
|
|
36
|
+
--text-3xl--line-height: calc(2.25 / 1.875);
|
|
37
|
+
--text-4xl: 2.25rem;
|
|
38
|
+
--text-4xl--line-height: calc(2.5 / 2.25);
|
|
39
|
+
--text-5xl: 3rem;
|
|
40
|
+
--text-5xl--line-height: 1;
|
|
41
|
+
--font-weight-normal: 400;
|
|
42
|
+
--font-weight-medium: 500;
|
|
43
|
+
--font-weight-semibold: 600;
|
|
44
|
+
--font-weight-bold: 700;
|
|
45
|
+
--leading-tight: 1.25;
|
|
46
|
+
--leading-snug: 1.375;
|
|
47
|
+
--leading-relaxed: 1.625;
|
|
48
|
+
--aspect-video: 16 / 9;
|
|
49
|
+
--default-font-family: var(--font-sans);
|
|
50
|
+
--default-mono-font-family: var(--font-mono);
|
|
51
|
+
--color-bg: #ffffff;
|
|
52
|
+
--color-ink: #1a1a1a;
|
|
53
|
+
--color-line: #d4d4d4;
|
|
54
|
+
--color-field: #8c8c8c;
|
|
55
|
+
--color-surface: #ffffff;
|
|
56
|
+
--color-muted: #f0f0f0;
|
|
57
|
+
--color-inverse: #2e2e2e;
|
|
58
|
+
--color-inverse-ink: #ffffff;
|
|
59
|
+
--color-accent: #4d4d4d;
|
|
60
|
+
--color-accent-ink: #ffffff;
|
|
61
|
+
--color-highlight: #595959;
|
|
62
|
+
--color-danger: #404040;
|
|
63
|
+
--container-site: 72rem;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
@layer base {
|
|
67
|
+
*, ::after, ::before, ::backdrop, ::file-selector-button {
|
|
68
|
+
box-sizing: border-box;
|
|
69
|
+
margin: 0;
|
|
70
|
+
padding: 0;
|
|
71
|
+
border: 0 solid;
|
|
72
|
+
}
|
|
73
|
+
html, :host {
|
|
74
|
+
line-height: 1.5;
|
|
75
|
+
-webkit-text-size-adjust: 100%;
|
|
76
|
+
tab-size: 4;
|
|
77
|
+
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");
|
|
78
|
+
font-feature-settings: var(--default-font-feature-settings, normal);
|
|
79
|
+
font-variation-settings: var(--default-font-variation-settings, normal);
|
|
80
|
+
-webkit-tap-highlight-color: transparent;
|
|
81
|
+
}
|
|
82
|
+
hr {
|
|
83
|
+
height: 0;
|
|
84
|
+
color: inherit;
|
|
85
|
+
border-top-width: 1px;
|
|
86
|
+
}
|
|
87
|
+
abbr:where([title]) {
|
|
88
|
+
-webkit-text-decoration: underline dotted;
|
|
89
|
+
text-decoration: underline dotted;
|
|
90
|
+
}
|
|
91
|
+
h1, h2, h3, h4, h5, h6 {
|
|
92
|
+
font-size: inherit;
|
|
93
|
+
font-weight: inherit;
|
|
94
|
+
}
|
|
95
|
+
a {
|
|
96
|
+
color: inherit;
|
|
97
|
+
-webkit-text-decoration: inherit;
|
|
98
|
+
text-decoration: inherit;
|
|
99
|
+
}
|
|
100
|
+
b, strong {
|
|
101
|
+
font-weight: bolder;
|
|
102
|
+
}
|
|
103
|
+
code, kbd, samp, pre {
|
|
104
|
+
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
|
|
105
|
+
font-feature-settings: var(--default-mono-font-feature-settings, normal);
|
|
106
|
+
font-variation-settings: var(--default-mono-font-variation-settings, normal);
|
|
107
|
+
font-size: 1em;
|
|
108
|
+
}
|
|
109
|
+
small {
|
|
110
|
+
font-size: 80%;
|
|
111
|
+
}
|
|
112
|
+
sub, sup {
|
|
113
|
+
font-size: 75%;
|
|
114
|
+
line-height: 0;
|
|
115
|
+
position: relative;
|
|
116
|
+
vertical-align: baseline;
|
|
117
|
+
}
|
|
118
|
+
sub {
|
|
119
|
+
bottom: -0.25em;
|
|
120
|
+
}
|
|
121
|
+
sup {
|
|
122
|
+
top: -0.5em;
|
|
123
|
+
}
|
|
124
|
+
table {
|
|
125
|
+
text-indent: 0;
|
|
126
|
+
border-color: inherit;
|
|
127
|
+
border-collapse: collapse;
|
|
128
|
+
}
|
|
129
|
+
:-moz-focusring:where(:not(iframe)) {
|
|
130
|
+
outline: auto;
|
|
131
|
+
}
|
|
132
|
+
progress {
|
|
133
|
+
vertical-align: baseline;
|
|
134
|
+
}
|
|
135
|
+
summary {
|
|
136
|
+
display: list-item;
|
|
137
|
+
}
|
|
138
|
+
ol, ul, menu {
|
|
139
|
+
list-style: none;
|
|
140
|
+
}
|
|
141
|
+
img, svg, video, canvas, audio, iframe, embed, object {
|
|
142
|
+
display: block;
|
|
143
|
+
vertical-align: middle;
|
|
144
|
+
}
|
|
145
|
+
img, video {
|
|
146
|
+
max-width: 100%;
|
|
147
|
+
height: auto;
|
|
148
|
+
}
|
|
149
|
+
button, input, select, optgroup, textarea, ::file-selector-button {
|
|
150
|
+
font: inherit;
|
|
151
|
+
font-feature-settings: inherit;
|
|
152
|
+
font-variation-settings: inherit;
|
|
153
|
+
letter-spacing: inherit;
|
|
154
|
+
color: inherit;
|
|
155
|
+
border-radius: 0;
|
|
156
|
+
background-color: transparent;
|
|
157
|
+
opacity: 1;
|
|
158
|
+
}
|
|
159
|
+
:where(select:is([multiple], [size])) optgroup {
|
|
160
|
+
font-weight: bolder;
|
|
161
|
+
}
|
|
162
|
+
:where(select:is([multiple], [size])) optgroup option {
|
|
163
|
+
padding-inline-start: 20px;
|
|
164
|
+
}
|
|
165
|
+
::file-selector-button {
|
|
166
|
+
margin-inline-end: 4px;
|
|
167
|
+
}
|
|
168
|
+
::placeholder {
|
|
169
|
+
opacity: 1;
|
|
170
|
+
}
|
|
171
|
+
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
|
|
172
|
+
::placeholder {
|
|
173
|
+
color: currentcolor;
|
|
174
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
175
|
+
color: color-mix(in oklab, currentcolor 50%, transparent);
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
textarea {
|
|
180
|
+
resize: vertical;
|
|
181
|
+
}
|
|
182
|
+
::-webkit-search-decoration {
|
|
183
|
+
-webkit-appearance: none;
|
|
184
|
+
}
|
|
185
|
+
::-webkit-date-and-time-value {
|
|
186
|
+
min-height: 1lh;
|
|
187
|
+
text-align: inherit;
|
|
188
|
+
}
|
|
189
|
+
::-webkit-datetime-edit {
|
|
190
|
+
display: inline-flex;
|
|
191
|
+
}
|
|
192
|
+
::-webkit-datetime-edit-fields-wrapper {
|
|
193
|
+
padding: 0;
|
|
194
|
+
}
|
|
195
|
+
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
|
|
196
|
+
padding-block: 0;
|
|
197
|
+
}
|
|
198
|
+
::-webkit-calendar-picker-indicator {
|
|
199
|
+
line-height: 1;
|
|
200
|
+
}
|
|
201
|
+
:-moz-ui-invalid {
|
|
202
|
+
box-shadow: none;
|
|
203
|
+
}
|
|
204
|
+
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
|
|
205
|
+
appearance: button;
|
|
206
|
+
}
|
|
207
|
+
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
|
|
208
|
+
height: auto;
|
|
209
|
+
}
|
|
210
|
+
[hidden]:where(:not([hidden="until-found"])) {
|
|
211
|
+
display: none !important;
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
@layer utilities {
|
|
215
|
+
.sr-only {
|
|
216
|
+
position: absolute;
|
|
217
|
+
width: 1px;
|
|
218
|
+
height: 1px;
|
|
219
|
+
padding: 0;
|
|
220
|
+
margin: -1px;
|
|
221
|
+
overflow: hidden;
|
|
222
|
+
clip-path: inset(50%);
|
|
223
|
+
white-space: nowrap;
|
|
224
|
+
border-width: 0;
|
|
225
|
+
}
|
|
226
|
+
.absolute {
|
|
227
|
+
position: absolute;
|
|
228
|
+
}
|
|
229
|
+
.relative {
|
|
230
|
+
position: relative;
|
|
231
|
+
}
|
|
232
|
+
.inset-0 {
|
|
233
|
+
inset: 0px;
|
|
234
|
+
}
|
|
235
|
+
.-left-\[9999px\] {
|
|
236
|
+
left: calc(9999px * -1);
|
|
237
|
+
}
|
|
238
|
+
.z-10 {
|
|
239
|
+
z-index: 10;
|
|
240
|
+
}
|
|
241
|
+
.mx-auto {
|
|
242
|
+
margin-inline: auto;
|
|
243
|
+
}
|
|
244
|
+
.mt-0\.5 {
|
|
245
|
+
margin-top: calc(var(--spacing) * 0.5);
|
|
246
|
+
}
|
|
247
|
+
.mt-1 {
|
|
248
|
+
margin-top: var(--spacing);
|
|
249
|
+
}
|
|
250
|
+
.mt-1\.5 {
|
|
251
|
+
margin-top: calc(var(--spacing) * 1.5);
|
|
252
|
+
}
|
|
253
|
+
.mt-2 {
|
|
254
|
+
margin-top: calc(var(--spacing) * 2);
|
|
255
|
+
}
|
|
256
|
+
.mt-3 {
|
|
257
|
+
margin-top: calc(var(--spacing) * 3);
|
|
258
|
+
}
|
|
259
|
+
.mt-4 {
|
|
260
|
+
margin-top: calc(var(--spacing) * 4);
|
|
261
|
+
}
|
|
262
|
+
.mt-5 {
|
|
263
|
+
margin-top: calc(var(--spacing) * 5);
|
|
264
|
+
}
|
|
265
|
+
.mt-6 {
|
|
266
|
+
margin-top: calc(var(--spacing) * 6);
|
|
267
|
+
}
|
|
268
|
+
.mt-8 {
|
|
269
|
+
margin-top: calc(var(--spacing) * 8);
|
|
270
|
+
}
|
|
271
|
+
.mt-auto {
|
|
272
|
+
margin-top: auto;
|
|
273
|
+
}
|
|
274
|
+
.mr-2 {
|
|
275
|
+
margin-right: calc(var(--spacing) * 2);
|
|
276
|
+
}
|
|
277
|
+
.mb-1\.5 {
|
|
278
|
+
margin-bottom: calc(var(--spacing) * 1.5);
|
|
279
|
+
}
|
|
280
|
+
.mb-2 {
|
|
281
|
+
margin-bottom: calc(var(--spacing) * 2);
|
|
282
|
+
}
|
|
283
|
+
.mb-3 {
|
|
284
|
+
margin-bottom: calc(var(--spacing) * 3);
|
|
285
|
+
}
|
|
286
|
+
.mb-4 {
|
|
287
|
+
margin-bottom: calc(var(--spacing) * 4);
|
|
288
|
+
}
|
|
289
|
+
.mb-6 {
|
|
290
|
+
margin-bottom: calc(var(--spacing) * 6);
|
|
291
|
+
}
|
|
292
|
+
.mb-10 {
|
|
293
|
+
margin-bottom: calc(var(--spacing) * 10);
|
|
294
|
+
}
|
|
295
|
+
.ml-1 {
|
|
296
|
+
margin-left: var(--spacing);
|
|
297
|
+
}
|
|
298
|
+
.block {
|
|
299
|
+
display: block;
|
|
300
|
+
}
|
|
301
|
+
.flex {
|
|
302
|
+
display: flex;
|
|
303
|
+
}
|
|
304
|
+
.grid {
|
|
305
|
+
display: grid;
|
|
306
|
+
}
|
|
307
|
+
.inline-block {
|
|
308
|
+
display: inline-block;
|
|
309
|
+
}
|
|
310
|
+
.aspect-\[4\/3\] {
|
|
311
|
+
aspect-ratio: 4/3;
|
|
312
|
+
}
|
|
313
|
+
.aspect-\[16\/9\] {
|
|
314
|
+
aspect-ratio: 16/9;
|
|
315
|
+
}
|
|
316
|
+
.aspect-\[16\/10\] {
|
|
317
|
+
aspect-ratio: 16/10;
|
|
318
|
+
}
|
|
319
|
+
.aspect-square {
|
|
320
|
+
aspect-ratio: 1 / 1;
|
|
321
|
+
}
|
|
322
|
+
.aspect-video {
|
|
323
|
+
aspect-ratio: var(--aspect-video);
|
|
324
|
+
}
|
|
325
|
+
.size-5 {
|
|
326
|
+
width: calc(var(--spacing) * 5);
|
|
327
|
+
height: calc(var(--spacing) * 5);
|
|
328
|
+
}
|
|
329
|
+
.size-14 {
|
|
330
|
+
width: calc(var(--spacing) * 14);
|
|
331
|
+
height: calc(var(--spacing) * 14);
|
|
332
|
+
}
|
|
333
|
+
.size-full {
|
|
334
|
+
width: 100%;
|
|
335
|
+
height: 100%;
|
|
336
|
+
}
|
|
337
|
+
.h-2\.5 {
|
|
338
|
+
height: calc(var(--spacing) * 2.5);
|
|
339
|
+
}
|
|
340
|
+
.h-10 {
|
|
341
|
+
height: calc(var(--spacing) * 10);
|
|
342
|
+
}
|
|
343
|
+
.h-20 {
|
|
344
|
+
height: calc(var(--spacing) * 20);
|
|
345
|
+
}
|
|
346
|
+
.h-full {
|
|
347
|
+
height: 100%;
|
|
348
|
+
}
|
|
349
|
+
.min-h-14 {
|
|
350
|
+
min-height: calc(var(--spacing) * 14);
|
|
351
|
+
}
|
|
352
|
+
.w-auto {
|
|
353
|
+
width: auto;
|
|
354
|
+
}
|
|
355
|
+
.w-fit {
|
|
356
|
+
width: fit-content;
|
|
357
|
+
}
|
|
358
|
+
.w-full {
|
|
359
|
+
width: 100%;
|
|
360
|
+
}
|
|
361
|
+
.max-w-2xl {
|
|
362
|
+
max-width: var(--container-2xl);
|
|
363
|
+
}
|
|
364
|
+
.max-w-3xl {
|
|
365
|
+
max-width: var(--container-3xl);
|
|
366
|
+
}
|
|
367
|
+
.max-w-4xl {
|
|
368
|
+
max-width: var(--container-4xl);
|
|
369
|
+
}
|
|
370
|
+
.max-w-site {
|
|
371
|
+
max-width: var(--container-site);
|
|
372
|
+
}
|
|
373
|
+
.flex-1 {
|
|
374
|
+
flex: 1;
|
|
375
|
+
}
|
|
376
|
+
.cursor-pointer {
|
|
377
|
+
cursor: pointer;
|
|
378
|
+
}
|
|
379
|
+
.scroll-mt-8 {
|
|
380
|
+
scroll-margin-top: calc(var(--spacing) * 8);
|
|
381
|
+
}
|
|
382
|
+
.list-none {
|
|
383
|
+
list-style-type: none;
|
|
384
|
+
}
|
|
385
|
+
.flex-col {
|
|
386
|
+
flex-direction: column;
|
|
387
|
+
}
|
|
388
|
+
.flex-col-reverse {
|
|
389
|
+
flex-direction: column-reverse;
|
|
390
|
+
}
|
|
391
|
+
.flex-wrap {
|
|
392
|
+
flex-wrap: wrap;
|
|
393
|
+
}
|
|
394
|
+
.items-center {
|
|
395
|
+
align-items: center;
|
|
396
|
+
}
|
|
397
|
+
.items-start {
|
|
398
|
+
align-items: flex-start;
|
|
399
|
+
}
|
|
400
|
+
.justify-between {
|
|
401
|
+
justify-content: space-between;
|
|
402
|
+
}
|
|
403
|
+
.gap-1 {
|
|
404
|
+
gap: var(--spacing);
|
|
405
|
+
}
|
|
406
|
+
.gap-2 {
|
|
407
|
+
gap: calc(var(--spacing) * 2);
|
|
408
|
+
}
|
|
409
|
+
.gap-2\.5 {
|
|
410
|
+
gap: calc(var(--spacing) * 2.5);
|
|
411
|
+
}
|
|
412
|
+
.gap-3 {
|
|
413
|
+
gap: calc(var(--spacing) * 3);
|
|
414
|
+
}
|
|
415
|
+
.gap-4 {
|
|
416
|
+
gap: calc(var(--spacing) * 4);
|
|
417
|
+
}
|
|
418
|
+
.gap-5 {
|
|
419
|
+
gap: calc(var(--spacing) * 5);
|
|
420
|
+
}
|
|
421
|
+
.gap-6 {
|
|
422
|
+
gap: calc(var(--spacing) * 6);
|
|
423
|
+
}
|
|
424
|
+
.gap-8 {
|
|
425
|
+
gap: calc(var(--spacing) * 8);
|
|
426
|
+
}
|
|
427
|
+
.gap-10 {
|
|
428
|
+
gap: calc(var(--spacing) * 10);
|
|
429
|
+
}
|
|
430
|
+
.gap-14 {
|
|
431
|
+
gap: calc(var(--spacing) * 14);
|
|
432
|
+
}
|
|
433
|
+
:where(.space-y-3 > :not(:last-child)) {
|
|
434
|
+
--tw-space-y-reverse: 0;
|
|
435
|
+
margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
|
|
436
|
+
margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
|
|
437
|
+
}
|
|
438
|
+
:where(.space-y-6 > :not(:last-child)) {
|
|
439
|
+
--tw-space-y-reverse: 0;
|
|
440
|
+
margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
|
|
441
|
+
margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
|
|
442
|
+
}
|
|
443
|
+
.gap-x-6 {
|
|
444
|
+
column-gap: calc(var(--spacing) * 6);
|
|
445
|
+
}
|
|
446
|
+
.gap-x-10 {
|
|
447
|
+
column-gap: calc(var(--spacing) * 10);
|
|
448
|
+
}
|
|
449
|
+
.gap-x-12 {
|
|
450
|
+
column-gap: calc(var(--spacing) * 12);
|
|
451
|
+
}
|
|
452
|
+
.gap-y-2 {
|
|
453
|
+
row-gap: calc(var(--spacing) * 2);
|
|
454
|
+
}
|
|
455
|
+
.gap-y-6 {
|
|
456
|
+
row-gap: calc(var(--spacing) * 6);
|
|
457
|
+
}
|
|
458
|
+
:where(.divide-y > :not(:last-child)) {
|
|
459
|
+
--tw-divide-y-reverse: 0;
|
|
460
|
+
border-bottom-style: var(--tw-border-style);
|
|
461
|
+
border-top-style: var(--tw-border-style);
|
|
462
|
+
border-top-width: calc(1px * var(--tw-divide-y-reverse));
|
|
463
|
+
border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
|
|
464
|
+
}
|
|
465
|
+
:where(.divide-line > :not(:last-child)) {
|
|
466
|
+
border-color: var(--color-line);
|
|
467
|
+
}
|
|
468
|
+
.self-start {
|
|
469
|
+
align-self: flex-start;
|
|
470
|
+
}
|
|
471
|
+
.overflow-hidden {
|
|
472
|
+
overflow: hidden;
|
|
473
|
+
}
|
|
474
|
+
.border {
|
|
475
|
+
border-style: var(--tw-border-style);
|
|
476
|
+
border-width: 1px;
|
|
477
|
+
}
|
|
478
|
+
.border-\[1\.5px\] {
|
|
479
|
+
border-style: var(--tw-border-style);
|
|
480
|
+
border-width: 1.5px;
|
|
481
|
+
}
|
|
482
|
+
.border-y {
|
|
483
|
+
border-block-style: var(--tw-border-style);
|
|
484
|
+
border-block-width: 1px;
|
|
485
|
+
}
|
|
486
|
+
.border-current\/40 {
|
|
487
|
+
border-color: currentcolor;
|
|
488
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
489
|
+
border-color: color-mix(in oklab, currentcolor 40%, transparent);
|
|
490
|
+
}
|
|
491
|
+
}
|
|
492
|
+
.border-danger\/30 {
|
|
493
|
+
border-color: color-mix(in srgb, #404040 30%, transparent);
|
|
494
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
495
|
+
border-color: color-mix(in oklab, var(--color-danger) 30%, transparent);
|
|
496
|
+
}
|
|
497
|
+
}
|
|
498
|
+
.border-field {
|
|
499
|
+
border-color: var(--color-field);
|
|
500
|
+
}
|
|
501
|
+
.border-line {
|
|
502
|
+
border-color: var(--color-line);
|
|
503
|
+
}
|
|
504
|
+
.bg-accent {
|
|
505
|
+
background-color: var(--color-accent);
|
|
506
|
+
}
|
|
507
|
+
.bg-bg {
|
|
508
|
+
background-color: var(--color-bg);
|
|
509
|
+
}
|
|
510
|
+
.bg-black\/55 {
|
|
511
|
+
background-color: color-mix(in srgb, #000 55%, transparent);
|
|
512
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
513
|
+
background-color: color-mix(in oklab, var(--color-black) 55%, transparent);
|
|
514
|
+
}
|
|
515
|
+
}
|
|
516
|
+
.bg-danger {
|
|
517
|
+
background-color: var(--color-danger);
|
|
518
|
+
}
|
|
519
|
+
.bg-danger\/5 {
|
|
520
|
+
background-color: color-mix(in srgb, #404040 5%, transparent);
|
|
521
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
522
|
+
background-color: color-mix(in oklab, var(--color-danger) 5%, transparent);
|
|
523
|
+
}
|
|
524
|
+
}
|
|
525
|
+
.bg-inverse {
|
|
526
|
+
background-color: var(--color-inverse);
|
|
527
|
+
}
|
|
528
|
+
.bg-line {
|
|
529
|
+
background-color: var(--color-line);
|
|
530
|
+
}
|
|
531
|
+
.bg-muted {
|
|
532
|
+
background-color: var(--color-muted);
|
|
533
|
+
}
|
|
534
|
+
.bg-surface {
|
|
535
|
+
background-color: var(--color-surface);
|
|
536
|
+
}
|
|
537
|
+
.object-cover {
|
|
538
|
+
object-fit: cover;
|
|
539
|
+
}
|
|
540
|
+
.object-top {
|
|
541
|
+
object-position: top;
|
|
542
|
+
}
|
|
543
|
+
.p-4 {
|
|
544
|
+
padding: calc(var(--spacing) * 4);
|
|
545
|
+
}
|
|
546
|
+
.p-6 {
|
|
547
|
+
padding: calc(var(--spacing) * 6);
|
|
548
|
+
}
|
|
549
|
+
.p-7 {
|
|
550
|
+
padding: calc(var(--spacing) * 7);
|
|
551
|
+
}
|
|
552
|
+
.px-1\.5 {
|
|
553
|
+
padding-inline: calc(var(--spacing) * 1.5);
|
|
554
|
+
}
|
|
555
|
+
.px-2 {
|
|
556
|
+
padding-inline: calc(var(--spacing) * 2);
|
|
557
|
+
}
|
|
558
|
+
.px-2\.5 {
|
|
559
|
+
padding-inline: calc(var(--spacing) * 2.5);
|
|
560
|
+
}
|
|
561
|
+
.px-3 {
|
|
562
|
+
padding-inline: calc(var(--spacing) * 3);
|
|
563
|
+
}
|
|
564
|
+
.px-4 {
|
|
565
|
+
padding-inline: calc(var(--spacing) * 4);
|
|
566
|
+
}
|
|
567
|
+
.px-5 {
|
|
568
|
+
padding-inline: calc(var(--spacing) * 5);
|
|
569
|
+
}
|
|
570
|
+
.px-6 {
|
|
571
|
+
padding-inline: calc(var(--spacing) * 6);
|
|
572
|
+
}
|
|
573
|
+
.py-0\.5 {
|
|
574
|
+
padding-block: calc(var(--spacing) * 0.5);
|
|
575
|
+
}
|
|
576
|
+
.py-1 {
|
|
577
|
+
padding-block: var(--spacing);
|
|
578
|
+
}
|
|
579
|
+
.py-3 {
|
|
580
|
+
padding-block: calc(var(--spacing) * 3);
|
|
581
|
+
}
|
|
582
|
+
.py-3\.5 {
|
|
583
|
+
padding-block: calc(var(--spacing) * 3.5);
|
|
584
|
+
}
|
|
585
|
+
.py-4 {
|
|
586
|
+
padding-block: calc(var(--spacing) * 4);
|
|
587
|
+
}
|
|
588
|
+
.py-5 {
|
|
589
|
+
padding-block: calc(var(--spacing) * 5);
|
|
590
|
+
}
|
|
591
|
+
.py-6 {
|
|
592
|
+
padding-block: calc(var(--spacing) * 6);
|
|
593
|
+
}
|
|
594
|
+
.py-16 {
|
|
595
|
+
padding-block: calc(var(--spacing) * 16);
|
|
596
|
+
}
|
|
597
|
+
.py-20 {
|
|
598
|
+
padding-block: calc(var(--spacing) * 20);
|
|
599
|
+
}
|
|
600
|
+
.pt-2 {
|
|
601
|
+
padding-top: calc(var(--spacing) * 2);
|
|
602
|
+
}
|
|
603
|
+
.pb-5 {
|
|
604
|
+
padding-bottom: calc(var(--spacing) * 5);
|
|
605
|
+
}
|
|
606
|
+
.text-2xl {
|
|
607
|
+
font-size: var(--text-2xl);
|
|
608
|
+
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
|
609
|
+
}
|
|
610
|
+
.text-4xl {
|
|
611
|
+
font-size: var(--text-4xl);
|
|
612
|
+
line-height: var(--tw-leading, var(--text-4xl--line-height));
|
|
613
|
+
}
|
|
614
|
+
.text-5xl {
|
|
615
|
+
font-size: var(--text-5xl);
|
|
616
|
+
line-height: var(--tw-leading, var(--text-5xl--line-height));
|
|
617
|
+
}
|
|
618
|
+
.text-base {
|
|
619
|
+
font-size: var(--text-base);
|
|
620
|
+
line-height: var(--tw-leading, var(--text-base--line-height));
|
|
621
|
+
}
|
|
622
|
+
.text-lg {
|
|
623
|
+
font-size: var(--text-lg);
|
|
624
|
+
line-height: var(--tw-leading, var(--text-lg--line-height));
|
|
625
|
+
}
|
|
626
|
+
.text-sm {
|
|
627
|
+
font-size: var(--text-sm);
|
|
628
|
+
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
629
|
+
}
|
|
630
|
+
.text-xl {
|
|
631
|
+
font-size: var(--text-xl);
|
|
632
|
+
line-height: var(--tw-leading, var(--text-xl--line-height));
|
|
633
|
+
}
|
|
634
|
+
.text-xs {
|
|
635
|
+
font-size: var(--text-xs);
|
|
636
|
+
line-height: var(--tw-leading, var(--text-xs--line-height));
|
|
637
|
+
}
|
|
638
|
+
.text-\[clamp\(28px\,3\.4cqw\,40px\)\] {
|
|
639
|
+
font-size: clamp(28px, 3.4cqw, 40px);
|
|
640
|
+
}
|
|
641
|
+
.text-\[clamp\(36px\,5cqw\,64px\)\] {
|
|
642
|
+
font-size: clamp(36px, 5cqw, 64px);
|
|
643
|
+
}
|
|
644
|
+
.leading-\[1\.05\] {
|
|
645
|
+
--tw-leading: 1.05;
|
|
646
|
+
line-height: 1.05;
|
|
647
|
+
}
|
|
648
|
+
.leading-relaxed {
|
|
649
|
+
--tw-leading: var(--leading-relaxed);
|
|
650
|
+
line-height: var(--leading-relaxed);
|
|
651
|
+
}
|
|
652
|
+
.leading-snug {
|
|
653
|
+
--tw-leading: var(--leading-snug);
|
|
654
|
+
line-height: var(--leading-snug);
|
|
655
|
+
}
|
|
656
|
+
.leading-tight {
|
|
657
|
+
--tw-leading: var(--leading-tight);
|
|
658
|
+
line-height: var(--leading-tight);
|
|
659
|
+
}
|
|
660
|
+
.font-bold {
|
|
661
|
+
--tw-font-weight: var(--font-weight-bold);
|
|
662
|
+
font-weight: var(--font-weight-bold);
|
|
663
|
+
}
|
|
664
|
+
.font-medium {
|
|
665
|
+
--tw-font-weight: var(--font-weight-medium);
|
|
666
|
+
font-weight: var(--font-weight-medium);
|
|
667
|
+
}
|
|
668
|
+
.font-normal {
|
|
669
|
+
--tw-font-weight: var(--font-weight-normal);
|
|
670
|
+
font-weight: var(--font-weight-normal);
|
|
671
|
+
}
|
|
672
|
+
.font-semibold {
|
|
673
|
+
--tw-font-weight: var(--font-weight-semibold);
|
|
674
|
+
font-weight: var(--font-weight-semibold);
|
|
675
|
+
}
|
|
676
|
+
.whitespace-pre-line {
|
|
677
|
+
white-space: pre-line;
|
|
678
|
+
}
|
|
679
|
+
.text-accent-ink {
|
|
680
|
+
color: var(--color-accent-ink);
|
|
681
|
+
}
|
|
682
|
+
.text-danger {
|
|
683
|
+
color: var(--color-danger);
|
|
684
|
+
}
|
|
685
|
+
.text-highlight {
|
|
686
|
+
color: var(--color-highlight);
|
|
687
|
+
}
|
|
688
|
+
.text-ink {
|
|
689
|
+
color: var(--color-ink);
|
|
690
|
+
}
|
|
691
|
+
.text-inverse-ink {
|
|
692
|
+
color: var(--color-inverse-ink);
|
|
693
|
+
}
|
|
694
|
+
.text-white {
|
|
695
|
+
color: var(--color-white);
|
|
696
|
+
}
|
|
697
|
+
.not-italic {
|
|
698
|
+
font-style: normal;
|
|
699
|
+
}
|
|
700
|
+
.underline {
|
|
701
|
+
text-decoration-line: underline;
|
|
702
|
+
}
|
|
703
|
+
.accent-accent {
|
|
704
|
+
accent-color: var(--color-accent);
|
|
705
|
+
}
|
|
706
|
+
.opacity-35 {
|
|
707
|
+
opacity: 35%;
|
|
708
|
+
}
|
|
709
|
+
.ring-1 {
|
|
710
|
+
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
711
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
712
|
+
}
|
|
713
|
+
.ring-field {
|
|
714
|
+
--tw-ring-color: var(--color-field);
|
|
715
|
+
}
|
|
716
|
+
.ring-line {
|
|
717
|
+
--tw-ring-color: var(--color-line);
|
|
718
|
+
}
|
|
719
|
+
.group-open\:rotate-45:is(:where(.group):is([open], :popover-open, :open) *) {
|
|
720
|
+
rotate: 45deg;
|
|
721
|
+
}
|
|
722
|
+
.before\:content-\[\'\+\'\]::before {
|
|
723
|
+
--tw-content: '+';
|
|
724
|
+
content: var(--tw-content);
|
|
725
|
+
}
|
|
726
|
+
.before\:content-\[\'“\'\]::before {
|
|
727
|
+
--tw-content: '“';
|
|
728
|
+
content: var(--tw-content);
|
|
729
|
+
}
|
|
730
|
+
.before\:content-\[\'✓\'\]::before {
|
|
731
|
+
--tw-content: '✓';
|
|
732
|
+
content: var(--tw-content);
|
|
733
|
+
}
|
|
734
|
+
.after\:absolute::after {
|
|
735
|
+
content: var(--tw-content);
|
|
736
|
+
position: absolute;
|
|
737
|
+
}
|
|
738
|
+
.after\:inset-0::after {
|
|
739
|
+
content: var(--tw-content);
|
|
740
|
+
inset: 0px;
|
|
741
|
+
}
|
|
742
|
+
.after\:content-\[\'_→\'\]::after {
|
|
743
|
+
--tw-content: ' →';
|
|
744
|
+
content: var(--tw-content);
|
|
745
|
+
}
|
|
746
|
+
.after\:content-\[\'”\'\]::after {
|
|
747
|
+
--tw-content: '”';
|
|
748
|
+
content: var(--tw-content);
|
|
749
|
+
}
|
|
750
|
+
.focus\:border-accent:focus {
|
|
751
|
+
border-color: var(--color-accent);
|
|
752
|
+
}
|
|
753
|
+
.focus\:outline-none:focus {
|
|
754
|
+
--tw-outline-style: none;
|
|
755
|
+
outline-style: none;
|
|
756
|
+
}
|
|
757
|
+
.disabled\:opacity-60:disabled {
|
|
758
|
+
opacity: 60%;
|
|
759
|
+
}
|
|
760
|
+
:where([data-layout="grid"]) .in-data-\[layout\=grid\]\:mb-2 {
|
|
761
|
+
margin-bottom: calc(var(--spacing) * 2);
|
|
762
|
+
}
|
|
763
|
+
.has-checked\:bg-accent:has(:checked) {
|
|
764
|
+
background-color: var(--color-accent);
|
|
765
|
+
}
|
|
766
|
+
.has-checked\:text-accent-ink:has(:checked) {
|
|
767
|
+
color: var(--color-accent-ink);
|
|
768
|
+
}
|
|
769
|
+
.has-checked\:ring-2:has(:checked) {
|
|
770
|
+
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
771
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
772
|
+
}
|
|
773
|
+
.has-checked\:ring-accent:has(:checked) {
|
|
774
|
+
--tw-ring-color: var(--color-accent);
|
|
775
|
+
}
|
|
776
|
+
.has-focus-visible\:outline-2:has(:focus-visible) {
|
|
777
|
+
outline-style: var(--tw-outline-style);
|
|
778
|
+
outline-width: 2px;
|
|
779
|
+
}
|
|
780
|
+
.has-focus-visible\:outline-offset-2:has(:focus-visible) {
|
|
781
|
+
outline-offset: 2px;
|
|
782
|
+
}
|
|
783
|
+
.has-focus-visible\:outline-accent:has(:focus-visible) {
|
|
784
|
+
outline-color: var(--color-accent);
|
|
785
|
+
}
|
|
786
|
+
.has-disabled\:cursor-not-allowed:has(:disabled) {
|
|
787
|
+
cursor: not-allowed;
|
|
788
|
+
}
|
|
789
|
+
.has-disabled\:opacity-50:has(:disabled) {
|
|
790
|
+
opacity: 50%;
|
|
791
|
+
}
|
|
792
|
+
.aria-invalid\:border-danger[aria-invalid="true"] {
|
|
793
|
+
border-color: var(--color-danger);
|
|
794
|
+
}
|
|
795
|
+
.data-highlight\:ring-2[data-highlight] {
|
|
796
|
+
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
797
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
798
|
+
}
|
|
799
|
+
.data-highlight\:ring-accent[data-highlight] {
|
|
800
|
+
--tw-ring-color: var(--color-accent);
|
|
801
|
+
}
|
|
802
|
+
.data-\[fit\=contain\]\:aspect-auto[data-fit="contain"] {
|
|
803
|
+
aspect-ratio: auto;
|
|
804
|
+
}
|
|
805
|
+
.data-\[fit\=contain\]\:max-h-96[data-fit="contain"] {
|
|
806
|
+
max-height: calc(var(--spacing) * 96);
|
|
807
|
+
}
|
|
808
|
+
.data-\[fit\=contain\]\:object-contain[data-fit="contain"] {
|
|
809
|
+
object-fit: contain;
|
|
810
|
+
}
|
|
811
|
+
.data-\[size\=full\]\:py-28[data-size="full"] {
|
|
812
|
+
padding-block: calc(var(--spacing) * 28);
|
|
813
|
+
}
|
|
814
|
+
.data-\[size\=large\]\:text-2xl[data-size="large"] {
|
|
815
|
+
font-size: var(--text-2xl);
|
|
816
|
+
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
|
817
|
+
}
|
|
818
|
+
.data-\[size\=small\]\:px-4[data-size="small"] {
|
|
819
|
+
padding-inline: calc(var(--spacing) * 4);
|
|
820
|
+
}
|
|
821
|
+
.data-\[size\=small\]\:py-2[data-size="small"] {
|
|
822
|
+
padding-block: calc(var(--spacing) * 2);
|
|
823
|
+
}
|
|
824
|
+
.data-\[size\=small\]\:text-sm[data-size="small"] {
|
|
825
|
+
font-size: var(--text-sm);
|
|
826
|
+
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
827
|
+
}
|
|
828
|
+
.data-\[width\=narrow\]\:max-w-2xl[data-width="narrow"] {
|
|
829
|
+
max-width: var(--container-2xl);
|
|
830
|
+
}
|
|
831
|
+
.data-\[width\=narrow\]\:max-w-3xl[data-width="narrow"] {
|
|
832
|
+
max-width: var(--container-3xl);
|
|
833
|
+
}
|
|
834
|
+
.data-\[width\=wide\]\:max-w-4xl[data-width="wide"] {
|
|
835
|
+
max-width: var(--container-4xl);
|
|
836
|
+
}
|
|
837
|
+
@container (width >= 640px) {
|
|
838
|
+
.\@min-\[640px\]\:h-24 {
|
|
839
|
+
height: calc(var(--spacing) * 24);
|
|
840
|
+
}
|
|
841
|
+
.\@min-\[640px\]\:grid-cols-2 {
|
|
842
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
843
|
+
}
|
|
844
|
+
.\@min-\[640px\]\:grid-cols-\[10rem_1fr\] {
|
|
845
|
+
grid-template-columns: 10rem 1fr;
|
|
846
|
+
}
|
|
847
|
+
.\@min-\[640px\]\:gap-6 {
|
|
848
|
+
gap: calc(var(--spacing) * 6);
|
|
849
|
+
}
|
|
850
|
+
:where(.\@min-\[640px\]\:divide-y-0 > :not(:last-child)) {
|
|
851
|
+
--tw-divide-y-reverse: 0;
|
|
852
|
+
border-bottom-style: var(--tw-border-style);
|
|
853
|
+
border-top-style: var(--tw-border-style);
|
|
854
|
+
border-top-width: calc(0px * var(--tw-divide-y-reverse));
|
|
855
|
+
border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
|
|
856
|
+
}
|
|
857
|
+
.\@min-\[640px\]\:border-y-0 {
|
|
858
|
+
border-block-style: var(--tw-border-style);
|
|
859
|
+
border-block-width: 0px;
|
|
860
|
+
}
|
|
861
|
+
.\@min-\[640px\]\:px-6 {
|
|
862
|
+
padding-inline: calc(var(--spacing) * 6);
|
|
863
|
+
}
|
|
864
|
+
.\@min-\[640px\]\:py-20 {
|
|
865
|
+
padding-block: calc(var(--spacing) * 20);
|
|
866
|
+
}
|
|
867
|
+
.\@min-\[640px\]\:py-24 {
|
|
868
|
+
padding-block: calc(var(--spacing) * 24);
|
|
869
|
+
}
|
|
870
|
+
.\@min-\[640px\]\:text-3xl {
|
|
871
|
+
font-size: var(--text-3xl);
|
|
872
|
+
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
|
873
|
+
}
|
|
874
|
+
.\@min-\[640px\]\:text-xl {
|
|
875
|
+
font-size: var(--text-xl);
|
|
876
|
+
line-height: var(--tw-leading, var(--text-xl--line-height));
|
|
877
|
+
}
|
|
878
|
+
.\@min-\[640px\]\:data-\[size\=full\]\:py-36[data-size="full"] {
|
|
879
|
+
padding-block: calc(var(--spacing) * 36);
|
|
880
|
+
}
|
|
881
|
+
}
|
|
882
|
+
@container (width >= 768px) {
|
|
883
|
+
.\@min-\[768px\]\:sticky {
|
|
884
|
+
position: sticky;
|
|
885
|
+
}
|
|
886
|
+
.\@min-\[768px\]\:top-24 {
|
|
887
|
+
top: calc(var(--spacing) * 24);
|
|
888
|
+
}
|
|
889
|
+
.\@min-\[768px\]\:order-2 {
|
|
890
|
+
order: 2;
|
|
891
|
+
}
|
|
892
|
+
.\@min-\[768px\]\:aspect-auto {
|
|
893
|
+
aspect-ratio: auto;
|
|
894
|
+
}
|
|
895
|
+
.\@min-\[768px\]\:h-\[min\(36rem\,80vh\)\] {
|
|
896
|
+
height: min(36rem, 80vh);
|
|
897
|
+
}
|
|
898
|
+
.\@min-\[768px\]\:grid-cols-2 {
|
|
899
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
900
|
+
}
|
|
901
|
+
:where([data-flip]) .\@min-\[768px\]\:in-data-\[flip\]\:order-2 {
|
|
902
|
+
order: 2;
|
|
903
|
+
}
|
|
904
|
+
:where([data-image="left"]) .\@min-\[768px\]\:in-data-\[image\=left\]\:order-2 {
|
|
905
|
+
order: 2;
|
|
906
|
+
}
|
|
907
|
+
.data-map\:\@min-\[768px\]\:grid-cols-\[2fr_3fr\][data-map] {
|
|
908
|
+
grid-template-columns: 2fr 3fr;
|
|
909
|
+
}
|
|
910
|
+
}
|
|
911
|
+
@container (width >= 1024px) {
|
|
912
|
+
.\@min-\[1024px\]\:grid-cols-3 {
|
|
913
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
914
|
+
}
|
|
915
|
+
.\@min-\[1024px\]\:grid-cols-4 {
|
|
916
|
+
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
917
|
+
}
|
|
918
|
+
.data-\[columns\=3\]\:\@min-\[1024px\]\:grid-cols-3[data-columns="3"] {
|
|
919
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
920
|
+
}
|
|
921
|
+
.data-\[columns\=4\]\:\@min-\[1024px\]\:grid-cols-4[data-columns="4"] {
|
|
922
|
+
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
923
|
+
}
|
|
924
|
+
.data-\[count\=many\]\:\@min-\[1024px\]\:grid-cols-4[data-count="many"] {
|
|
925
|
+
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
926
|
+
}
|
|
927
|
+
}
|
|
928
|
+
.on-dark\:bg-inverse-ink:where([data-ground="dark"], [data-ground="dark"] *) {
|
|
929
|
+
background-color: var(--color-inverse-ink);
|
|
930
|
+
}
|
|
931
|
+
.on-dark\:bg-white\/10:where([data-ground="dark"], [data-ground="dark"] *) {
|
|
932
|
+
background-color: color-mix(in srgb, #fff 10%, transparent);
|
|
933
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
934
|
+
background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
|
|
935
|
+
}
|
|
936
|
+
}
|
|
937
|
+
.on-dark\:text-current:where([data-ground="dark"], [data-ground="dark"] *) {
|
|
938
|
+
color: currentcolor;
|
|
939
|
+
}
|
|
940
|
+
.on-dark\:text-inverse:where([data-ground="dark"], [data-ground="dark"] *) {
|
|
941
|
+
color: var(--color-inverse);
|
|
942
|
+
}
|
|
943
|
+
.on-dark\:underline:where([data-ground="dark"], [data-ground="dark"] *) {
|
|
944
|
+
text-decoration-line: underline;
|
|
945
|
+
}
|
|
946
|
+
.on-dark\:ring-0:where([data-ground="dark"], [data-ground="dark"] *) {
|
|
947
|
+
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
948
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
949
|
+
}
|
|
950
|
+
.\[\&_\.maplibregl-map\]\:font-sans .maplibregl-map {
|
|
951
|
+
font-family: var(--font-sans);
|
|
952
|
+
}
|
|
953
|
+
.\[\&_\.maplibregl-popup-close-button\]\:size-8 .maplibregl-popup-close-button {
|
|
954
|
+
width: calc(var(--spacing) * 8);
|
|
955
|
+
height: calc(var(--spacing) * 8);
|
|
956
|
+
}
|
|
957
|
+
.\[\&_\.maplibregl-popup-close-button\]\:text-xl .maplibregl-popup-close-button {
|
|
958
|
+
font-size: var(--text-xl);
|
|
959
|
+
line-height: var(--tw-leading, var(--text-xl--line-height));
|
|
960
|
+
}
|
|
961
|
+
.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
|
|
962
|
+
display: none;
|
|
963
|
+
}
|
|
964
|
+
}
|
|
965
|
+
.prose {
|
|
966
|
+
line-height: 1.7;
|
|
967
|
+
}
|
|
968
|
+
.prose > * + * {
|
|
969
|
+
margin-top: 1em;
|
|
970
|
+
}
|
|
971
|
+
.prose h2 {
|
|
972
|
+
font-size: 1.75rem;
|
|
973
|
+
font-weight: 700;
|
|
974
|
+
line-height: 1.25;
|
|
975
|
+
margin-top: 1.6em;
|
|
976
|
+
}
|
|
977
|
+
.prose h3 {
|
|
978
|
+
font-size: 1.35rem;
|
|
979
|
+
font-weight: 700;
|
|
980
|
+
margin-top: 1.4em;
|
|
981
|
+
}
|
|
982
|
+
.prose a {
|
|
983
|
+
text-decoration: underline;
|
|
984
|
+
text-underline-offset: 3px;
|
|
985
|
+
}
|
|
986
|
+
.prose ul {
|
|
987
|
+
list-style: disc;
|
|
988
|
+
padding-left: 1.4em;
|
|
989
|
+
}
|
|
990
|
+
.prose ol {
|
|
991
|
+
list-style: decimal;
|
|
992
|
+
padding-left: 1.4em;
|
|
993
|
+
}
|
|
994
|
+
.prose blockquote {
|
|
995
|
+
border-left: 3px solid var(--color-line);
|
|
996
|
+
padding-left: 1em;
|
|
997
|
+
font-style: italic;
|
|
998
|
+
}
|
|
999
|
+
.prose img {
|
|
1000
|
+
border-radius: 0.75rem;
|
|
1001
|
+
}
|
|
1002
|
+
.prose table {
|
|
1003
|
+
display: block;
|
|
1004
|
+
max-width: 100%;
|
|
1005
|
+
overflow-x: auto;
|
|
1006
|
+
border-collapse: collapse;
|
|
1007
|
+
}
|
|
1008
|
+
.prose th, .prose td {
|
|
1009
|
+
border-bottom: 1px solid var(--color-line);
|
|
1010
|
+
padding: 0.5em 1em 0.5em 0;
|
|
1011
|
+
text-align: left;
|
|
1012
|
+
vertical-align: top;
|
|
1013
|
+
}
|
|
1014
|
+
.prose th {
|
|
1015
|
+
font-weight: 700;
|
|
1016
|
+
}
|
|
1017
|
+
:focus-visible {
|
|
1018
|
+
outline: 2px solid var(--color-accent);
|
|
1019
|
+
outline-offset: 2px;
|
|
1020
|
+
}
|
|
1021
|
+
@property --tw-space-y-reverse {
|
|
1022
|
+
syntax: "*";
|
|
1023
|
+
inherits: false;
|
|
1024
|
+
initial-value: 0;
|
|
1025
|
+
}
|
|
1026
|
+
@property --tw-divide-y-reverse {
|
|
1027
|
+
syntax: "*";
|
|
1028
|
+
inherits: false;
|
|
1029
|
+
initial-value: 0;
|
|
1030
|
+
}
|
|
1031
|
+
@property --tw-border-style {
|
|
1032
|
+
syntax: "*";
|
|
1033
|
+
inherits: false;
|
|
1034
|
+
initial-value: solid;
|
|
1035
|
+
}
|
|
1036
|
+
@property --tw-leading {
|
|
1037
|
+
syntax: "*";
|
|
1038
|
+
inherits: false;
|
|
1039
|
+
}
|
|
1040
|
+
@property --tw-font-weight {
|
|
1041
|
+
syntax: "*";
|
|
1042
|
+
inherits: false;
|
|
1043
|
+
}
|
|
1044
|
+
@property --tw-shadow {
|
|
1045
|
+
syntax: "*";
|
|
1046
|
+
inherits: false;
|
|
1047
|
+
initial-value: 0 0 #0000;
|
|
1048
|
+
}
|
|
1049
|
+
@property --tw-shadow-color {
|
|
1050
|
+
syntax: "*";
|
|
1051
|
+
inherits: false;
|
|
1052
|
+
}
|
|
1053
|
+
@property --tw-shadow-alpha {
|
|
1054
|
+
syntax: "<percentage>";
|
|
1055
|
+
inherits: false;
|
|
1056
|
+
initial-value: 100%;
|
|
1057
|
+
}
|
|
1058
|
+
@property --tw-inset-shadow {
|
|
1059
|
+
syntax: "*";
|
|
1060
|
+
inherits: false;
|
|
1061
|
+
initial-value: 0 0 #0000;
|
|
1062
|
+
}
|
|
1063
|
+
@property --tw-inset-shadow-color {
|
|
1064
|
+
syntax: "*";
|
|
1065
|
+
inherits: false;
|
|
1066
|
+
}
|
|
1067
|
+
@property --tw-inset-shadow-alpha {
|
|
1068
|
+
syntax: "<percentage>";
|
|
1069
|
+
inherits: false;
|
|
1070
|
+
initial-value: 100%;
|
|
1071
|
+
}
|
|
1072
|
+
@property --tw-ring-color {
|
|
1073
|
+
syntax: "*";
|
|
1074
|
+
inherits: false;
|
|
1075
|
+
}
|
|
1076
|
+
@property --tw-ring-shadow {
|
|
1077
|
+
syntax: "*";
|
|
1078
|
+
inherits: false;
|
|
1079
|
+
initial-value: 0 0 #0000;
|
|
1080
|
+
}
|
|
1081
|
+
@property --tw-inset-ring-color {
|
|
1082
|
+
syntax: "*";
|
|
1083
|
+
inherits: false;
|
|
1084
|
+
}
|
|
1085
|
+
@property --tw-inset-ring-shadow {
|
|
1086
|
+
syntax: "*";
|
|
1087
|
+
inherits: false;
|
|
1088
|
+
initial-value: 0 0 #0000;
|
|
1089
|
+
}
|
|
1090
|
+
@property --tw-ring-inset {
|
|
1091
|
+
syntax: "*";
|
|
1092
|
+
inherits: false;
|
|
1093
|
+
}
|
|
1094
|
+
@property --tw-ring-offset-width {
|
|
1095
|
+
syntax: "<length>";
|
|
1096
|
+
inherits: false;
|
|
1097
|
+
initial-value: 0px;
|
|
1098
|
+
}
|
|
1099
|
+
@property --tw-ring-offset-color {
|
|
1100
|
+
syntax: "*";
|
|
1101
|
+
inherits: false;
|
|
1102
|
+
initial-value: #fff;
|
|
1103
|
+
}
|
|
1104
|
+
@property --tw-ring-offset-shadow {
|
|
1105
|
+
syntax: "*";
|
|
1106
|
+
inherits: false;
|
|
1107
|
+
initial-value: 0 0 #0000;
|
|
1108
|
+
}
|
|
1109
|
+
@property --tw-content {
|
|
1110
|
+
syntax: "*";
|
|
1111
|
+
initial-value: "";
|
|
1112
|
+
inherits: false;
|
|
1113
|
+
}
|
|
1114
|
+
@property --tw-outline-style {
|
|
1115
|
+
syntax: "*";
|
|
1116
|
+
inherits: false;
|
|
1117
|
+
initial-value: solid;
|
|
1118
|
+
}
|
|
1119
|
+
@layer properties {
|
|
1120
|
+
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
|
1121
|
+
*, ::before, ::after, ::backdrop {
|
|
1122
|
+
--tw-space-y-reverse: 0;
|
|
1123
|
+
--tw-divide-y-reverse: 0;
|
|
1124
|
+
--tw-border-style: solid;
|
|
1125
|
+
--tw-leading: initial;
|
|
1126
|
+
--tw-font-weight: initial;
|
|
1127
|
+
--tw-shadow: 0 0 #0000;
|
|
1128
|
+
--tw-shadow-color: initial;
|
|
1129
|
+
--tw-shadow-alpha: 100%;
|
|
1130
|
+
--tw-inset-shadow: 0 0 #0000;
|
|
1131
|
+
--tw-inset-shadow-color: initial;
|
|
1132
|
+
--tw-inset-shadow-alpha: 100%;
|
|
1133
|
+
--tw-ring-color: initial;
|
|
1134
|
+
--tw-ring-shadow: 0 0 #0000;
|
|
1135
|
+
--tw-inset-ring-color: initial;
|
|
1136
|
+
--tw-inset-ring-shadow: 0 0 #0000;
|
|
1137
|
+
--tw-ring-inset: initial;
|
|
1138
|
+
--tw-ring-offset-width: 0px;
|
|
1139
|
+
--tw-ring-offset-color: #fff;
|
|
1140
|
+
--tw-ring-offset-shadow: 0 0 #0000;
|
|
1141
|
+
--tw-content: "";
|
|
1142
|
+
--tw-outline-style: solid;
|
|
1143
|
+
}
|
|
1144
|
+
}
|
|
1145
|
+
}
|
|
1146
|
+
|
|
1147
|
+
:root { --page: #f4f4f2; --page-ink: #1a1a1a; --page-quiet: #5c5c58; --page-line: #d8d8d4; --page-card: #ffffff; --mark: #1f4fd8; --mark-soft: #e6ecfc; color-scheme: light; }
|
|
1148
|
+
html { scroll-padding-top: 72px; }
|
|
1149
|
+
body { margin: 0; background: var(--page); color: var(--page-ink); font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
|
|
1150
|
+
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--page-card); }
|
|
1151
|
+
.topbar code, .intro code, .slots code, .fields code { font: 0.9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
|
|
1152
|
+
|
|
1153
|
+
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); background: var(--page-card); border-bottom: 1px solid var(--page-line); }
|
|
1154
|
+
.wordmark { font-weight: 700; }
|
|
1155
|
+
.jump { position: relative; }
|
|
1156
|
+
.jump summary { cursor: pointer; padding: 5px 12px; border: 1px solid var(--page-line); border-radius: 6px; list-style: none; }
|
|
1157
|
+
.jump summary::after { content: " ▾"; }
|
|
1158
|
+
.jump nav { position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; width: min(260px, calc(100vw - 32px)); max-height: 70dvh; overflow-y: auto; padding: 8px; background: var(--page-card); border: 1px solid var(--page-line); border-radius: 6px; }
|
|
1159
|
+
.jump a { display: block; padding: 3px 8px; border-radius: 4px; }
|
|
1160
|
+
.jump a:hover { background: var(--mark-soft); }
|
|
1161
|
+
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
|
|
1162
|
+
.widths { display: inline-flex; border: 1px solid var(--page-line); border-radius: 6px; overflow: hidden; }
|
|
1163
|
+
.widths button { padding: 5px 12px; background: var(--page-card); cursor: pointer; }
|
|
1164
|
+
.widths button + button { border-left: 1px solid var(--page-line); }
|
|
1165
|
+
.widths button[aria-pressed="true"] { background: var(--mark); color: #fff; }
|
|
1166
|
+
.view-switch { display: inline-flex; border: 1px solid var(--page-line); border-radius: 6px; overflow: hidden; }
|
|
1167
|
+
.view-switch > * { padding: 5px 12px; }
|
|
1168
|
+
.view-switch > * + * { border-left: 1px solid var(--page-line); }
|
|
1169
|
+
.view-current { background: var(--mark); color: #fff; }
|
|
1170
|
+
.toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
|
|
1171
|
+
.toggle input { accent-color: var(--mark); width: 16px; height: 16px; }
|
|
1172
|
+
|
|
1173
|
+
.layout { display: grid; grid-template-columns: minmax(0, 1fr); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 16px 64px; gap: 16px; }
|
|
1174
|
+
.sidenav { display: none; }
|
|
1175
|
+
.sidenav a { display: block; padding: 3px 8px; border-radius: 4px; }
|
|
1176
|
+
.sidenav a:hover { background: var(--mark-soft); }
|
|
1177
|
+
.nav-group { margin: 14px 8px 4px; font-size: 12px; font-weight: 600; color: var(--page-quiet); }
|
|
1178
|
+
main { min-width: 0; }
|
|
1179
|
+
/* The list needs a wide window: in Hearth's admin this page sits in a narrower frame, and the blocks need the room. */
|
|
1180
|
+
@media (min-width: 1280px) {
|
|
1181
|
+
.layout { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; }
|
|
1182
|
+
.sidenav { display: block; }
|
|
1183
|
+
.sidenav > div { position: sticky; top: 64px; max-height: calc(100dvh - 80px); overflow-y: auto; }
|
|
1184
|
+
.jump { display: none; }
|
|
1185
|
+
}
|
|
1186
|
+
|
|
1187
|
+
.intro { max-width: 68rem; padding-block: 16px 24px; }
|
|
1188
|
+
.intro h1 { font-size: clamp(26px, 3vw, 34px); font-weight: 700; line-height: 1.15; text-wrap: balance; }
|
|
1189
|
+
.lead { margin-top: 12px; max-width: 44rem; font-size: 17px; }
|
|
1190
|
+
.intro-grid { display: grid; gap: 16px 40px; margin-top: 24px; }
|
|
1191
|
+
@media (min-width: 800px) { .intro-grid { grid-template-columns: 1fr 1fr; } }
|
|
1192
|
+
.intro h2 { font-weight: 700; font-size: 16px; }
|
|
1193
|
+
.intro ul { margin-top: 8px; display: grid; gap: 8px; list-style: disc; padding-left: 1.2em; }
|
|
1194
|
+
.intro a { color: var(--mark); text-decoration: underline; }
|
|
1195
|
+
.intro b { font-weight: 600; }
|
|
1196
|
+
.scope { margin-top: 20px; color: var(--page-quiet); max-width: 52rem; }
|
|
1197
|
+
|
|
1198
|
+
.group-title { margin-top: 48px; padding-bottom: 8px; font-size: 24px; font-weight: 700; border-bottom: 2px solid var(--page-ink); }
|
|
1199
|
+
.entry { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 28px; border-bottom: 1px solid var(--page-line); scroll-margin-top: 64px; }
|
|
1200
|
+
.entry > header h3 { font-size: 20px; font-weight: 700; }
|
|
1201
|
+
.entry > header p { margin-top: 2px; color: var(--page-quiet); max-width: 44rem; }
|
|
1202
|
+
.preview { display: grid; gap: 6px; min-width: 0; margin: 0; }
|
|
1203
|
+
.preview figcaption { font-size: 13px; font-weight: 600; color: var(--page-quiet); }
|
|
1204
|
+
.frame-scroll { overflow-x: auto; }
|
|
1205
|
+
.frame { width: var(--frame-width, 100%); max-width: 1280px; container-type: inline-size; background: #fff; color: #1a1a1a; font-family: var(--font-sans); outline: 1px solid var(--page-line); position: relative; }
|
|
1206
|
+
.frame a { cursor: default; }
|
|
1207
|
+
.no-preview { max-width: 44rem; padding: 14px 16px; background: var(--page-card); outline: 1px solid var(--page-line); }
|
|
1208
|
+
|
|
1209
|
+
.placeholder-frame { display: grid; place-items: center; min-height: 100%; background: #d9d9d9; color: #595959; font-size: 14px; }
|
|
1210
|
+
[data-slot~="map.frame"]::after { content: "Map"; position: absolute; inset: 0; display: grid; place-items: center; background: #d9d9d9; color: #595959; font-size: 14px; }
|
|
1211
|
+
.prose img { border-radius: 0; }
|
|
1212
|
+
|
|
1213
|
+
.spec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 32px; }
|
|
1214
|
+
@media (min-width: 1000px) { .spec { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } }
|
|
1215
|
+
.spec h4 { font-size: 13px; font-weight: 600; color: var(--page-quiet); margin-bottom: 6px; }
|
|
1216
|
+
.spec-note { max-width: 44rem; margin-bottom: 10px; }
|
|
1217
|
+
.table-wrap { overflow-x: auto; }
|
|
1218
|
+
.fields { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--page-card); }
|
|
1219
|
+
.fields th, .fields td { padding: 6px 10px; text-align: left; vertical-align: top; border: 1px solid var(--page-line); }
|
|
1220
|
+
.fields th { font-weight: 600; background: var(--page); }
|
|
1221
|
+
.fields td:first-child { font-weight: 500; white-space: nowrap; }
|
|
1222
|
+
.fields .nested { padding-left: 26px; font-weight: 400; }
|
|
1223
|
+
.tokens td:first-child { display: flex; align-items: center; gap: 8px; }
|
|
1224
|
+
.swatch { width: 16px; height: 16px; flex: none; outline: 1px solid var(--page-line); }
|
|
1225
|
+
.slots { display: flex; flex-wrap: wrap; gap: 4px; }
|
|
1226
|
+
.slots code { display: block; padding: 1px 6px; background: var(--page-card); outline: 1px solid var(--page-line); border-radius: 3px; font-size: 12px; }
|
|
1227
|
+
|
|
1228
|
+
.showing-slots .frame [data-slot] { outline: 1px dashed rgb(31 79 216 / 0.45); outline-offset: -1px; }
|
|
1229
|
+
.showing-slots .frame [data-slot].slot-hover { outline: 2px solid var(--mark); background-color: rgb(31 79 216 / 0.08); }
|
|
1230
|
+
#slot-tip { position: fixed; z-index: 70; max-width: min(320px, calc(100vw - 24px)); padding: 3px 8px; background: var(--mark); color: #fff; font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border-radius: 3px; pointer-events: none; }
|
|
1231
|
+
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
|
|
1232
|
+
</style>
|
|
1233
|
+
</head>
|
|
1234
|
+
<body>
|
|
1235
|
+
<header class="topbar">
|
|
1236
|
+
<a class="wordmark" href="#top">Hearth block reference</a>
|
|
1237
|
+
<details class="jump" id="jump"><summary>All blocks</summary><nav aria-label="Blocks"><p class="nav-group">Start here</p><a href="#grounds">Grounds and buttons</a><a href="#form-states">Form states</a><p class="nav-group">Layout</p><a href="#block-hero">Hero</a><a href="#block-cta">Call to action</a><p class="nav-group">Content</p><a href="#block-richText">Text</a><a href="#block-mediaText">Image + text</a><a href="#block-stats">Stats</a><a href="#block-cardGrid">Cards</a><a href="#block-faq">FAQ</a><a href="#block-pricing">Pricing</a><a href="#block-projects">Projects</a><a href="#block-quote">Quote</a><a href="#block-people">People</a><a href="#block-logos">Logos</a><a href="#block-collectionList">Collection list</a><p class="nav-group">Media</p><a href="#block-gallery">Photo gallery</a><a href="#block-video">Video</a><a href="#block-embed">Embed</a><p class="nav-group">Places & events</p><a href="#block-location">Location</a><a href="#block-locations">Locations</a><a href="#block-schedule">Schedule</a><a href="#block-upcomingEvents">Upcoming events</a><a href="#block-pastEvents">Past events</a><a href="#block-eventSpotlight">Event spotlight</a><p class="nav-group">Forms</p><a href="#block-volunteerSignup">Volunteer sign-up</a><a href="#block-form">Form</a><p class="nav-group">Giving</p><a href="#block-fundraiserSpotlight">Fundraiser spotlight</a><a href="#block-fundraiserGrid">Fundraisers</a><a href="#block-donate">Donation form</a><p class="nav-group">Global</p><a href="#block-sharedBlock">Global block</a><p class="nav-group">Custom</p><a href="#block-custom">Custom block</a></nav></details>
|
|
1238
|
+
<div class="controls">
|
|
1239
|
+
<!-- hearth:view-switch -->
|
|
1240
|
+
<div class="widths" role="group" aria-label="Preview width">
|
|
1241
|
+
<button type="button" data-width="desktop" aria-pressed="true">Desktop</button>
|
|
1242
|
+
<button type="button" data-width="768" aria-pressed="false">Tablet</button>
|
|
1243
|
+
<button type="button" data-width="390" aria-pressed="false">Phone</button>
|
|
1244
|
+
</div>
|
|
1245
|
+
<label class="toggle"><input type="checkbox" id="show-slots"> Show slot names</label>
|
|
1246
|
+
</div>
|
|
1247
|
+
</header>
|
|
1248
|
+
<div class="layout" id="top">
|
|
1249
|
+
<nav class="sidenav" aria-label="Blocks"><div><p class="nav-group">Start here</p><a href="#grounds">Grounds and buttons</a><a href="#form-states">Form states</a><p class="nav-group">Layout</p><a href="#block-hero">Hero</a><a href="#block-cta">Call to action</a><p class="nav-group">Content</p><a href="#block-richText">Text</a><a href="#block-mediaText">Image + text</a><a href="#block-stats">Stats</a><a href="#block-cardGrid">Cards</a><a href="#block-faq">FAQ</a><a href="#block-pricing">Pricing</a><a href="#block-projects">Projects</a><a href="#block-quote">Quote</a><a href="#block-people">People</a><a href="#block-logos">Logos</a><a href="#block-collectionList">Collection list</a><p class="nav-group">Media</p><a href="#block-gallery">Photo gallery</a><a href="#block-video">Video</a><a href="#block-embed">Embed</a><p class="nav-group">Places & events</p><a href="#block-location">Location</a><a href="#block-locations">Locations</a><a href="#block-schedule">Schedule</a><a href="#block-upcomingEvents">Upcoming events</a><a href="#block-pastEvents">Past events</a><a href="#block-eventSpotlight">Event spotlight</a><p class="nav-group">Forms</p><a href="#block-volunteerSignup">Volunteer sign-up</a><a href="#block-form">Form</a><p class="nav-group">Giving</p><a href="#block-fundraiserSpotlight">Fundraiser spotlight</a><a href="#block-fundraiserGrid">Fundraisers</a><a href="#block-donate">Donation form</a><p class="nav-group">Global</p><a href="#block-sharedBlock">Global block</a><p class="nav-group">Custom</p><a href="#block-custom">Custom block</a></div></nav>
|
|
1250
|
+
<main>
|
|
1251
|
+
<section class="intro">
|
|
1252
|
+
<h1>Hearth's content blocks, without a design</h1>
|
|
1253
|
+
<p class="lead">Every website on Hearth is built from these 29 blocks. This page shows each one with its real structure and sample content, and with the color and decoration taken out, so you can design a new look for them, or see what you have to style when building a site.</p>
|
|
1254
|
+
<div class="intro-grid">
|
|
1255
|
+
<div><h2>What to design</h2><ul>
|
|
1256
|
+
<li>Set the <a href="#grounds">colors and font</a> first, then style the blocks. Text and buttons need readable contrast on all four grounds.</li>
|
|
1257
|
+
<li>Cover each variation shown. Fields marked Optional can be left empty, so check the block still works without them.</li>
|
|
1258
|
+
<li>Check Desktop, Tablet and Phone with the buttons at the top. The columns and sizes change at those widths.</li>
|
|
1259
|
+
</ul></div>
|
|
1260
|
+
<div><h2>How your design gets applied</h2><ul>
|
|
1261
|
+
<li>Each element is styled by one named theme slot, such as <code>hero.title</code>. Turn on <b>Show slot names</b> and hover over an element to see its name. Each block lists its slots too.</li>
|
|
1262
|
+
<li>Name your layers after the slots, so a developer can match them. A change to a slot applies wherever that block appears.</li>
|
|
1263
|
+
<li>Color, type, spacing, columns and shapes can all change through slots. Adding an element or a new field takes a code change, so flag those.</li>
|
|
1264
|
+
<li>In a site's code, tokens go in <code>src/theme/theme.css</code> and slots in <code>src/theme/index.ts</code>. <code>src/hearth/theme/defaults.ts</code> has each slot's starting classes.</li>
|
|
1265
|
+
</ul></div>
|
|
1266
|
+
</div>
|
|
1267
|
+
<p class="scope">Sizes and weights here only show hierarchy, the greys aren't a palette, and the content is made up. This covers content blocks, not the site's header, footer or event pages.</p>
|
|
1268
|
+
</section>
|
|
1269
|
+
<article class="entry" id="grounds">
|
|
1270
|
+
<header><h3>Grounds, headings and buttons</h3><p>Blocks sit on one of four grounds. Most blocks let editors choose, so headings, text, links and both buttons have to work on all four.</p></header>
|
|
1271
|
+
<figure class="preview"><figcaption>Standard ground</figcaption><div class="frame-scroll"><div class="frame"><section data-block="ground" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><p class="mb-3 text-sm font-semibold" data-slot="heading.eyebrow">Eyebrow</p><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">A section heading with a <span class="text-highlight on-dark:text-current on-dark:underline" data-slot="emphasis.mark">highlighted</span> phrase</h2><p class="mt-4 text-lg leading-relaxed" data-slot="heading.intro">An intro under the heading, in a sentence or two.</p></div><div class="mt-8 flex flex-wrap gap-3" data-slot="hero.actions"><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" href="#">Primary button</a><a class="inline-block w-fit border-[1.5px] border-current/40 px-6 py-3.5 font-medium data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.secondary" href="#">Secondary button</a><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" data-size="small" href="#">Small</a><a class="inline-block w-fit border-[1.5px] border-current/40 px-6 py-3.5 font-medium data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.secondary" data-size="small" href="#">Small</a></div></div></section></div></div></figure><figure class="preview"><figcaption>Subtle ground</figcaption><div class="frame-scroll"><div class="frame"><section data-block="ground" data-ground="light" data-tone="muted" class="bg-muted text-ink" data-slot="tones.muted section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><p class="mb-3 text-sm font-semibold" data-slot="heading.eyebrow">Eyebrow</p><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">A section heading with a <span class="text-highlight on-dark:text-current on-dark:underline" data-slot="emphasis.mark">highlighted</span> phrase</h2><p class="mt-4 text-lg leading-relaxed" data-slot="heading.intro">An intro under the heading, in a sentence or two.</p></div><div class="mt-8 flex flex-wrap gap-3" data-slot="hero.actions"><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" href="#">Primary button</a><a class="inline-block w-fit border-[1.5px] border-current/40 px-6 py-3.5 font-medium data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.secondary" href="#">Secondary button</a><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" data-size="small" href="#">Small</a><a class="inline-block w-fit border-[1.5px] border-current/40 px-6 py-3.5 font-medium data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.secondary" data-size="small" href="#">Small</a></div></div></section></div></div></figure><figure class="preview"><figcaption>Dark ground</figcaption><div class="frame-scroll"><div class="frame"><section data-block="ground" data-ground="dark" data-tone="inverse" class="bg-inverse text-inverse-ink" data-slot="tones.inverse section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><p class="mb-3 text-sm font-semibold" data-slot="heading.eyebrow">Eyebrow</p><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">A section heading with a <span class="text-highlight on-dark:text-current on-dark:underline" data-slot="emphasis.mark">highlighted</span> phrase</h2><p class="mt-4 text-lg leading-relaxed" data-slot="heading.intro">An intro under the heading, in a sentence or two.</p></div><div class="mt-8 flex flex-wrap gap-3" data-slot="hero.actions"><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" href="#">Primary button</a><a class="inline-block w-fit border-[1.5px] border-current/40 px-6 py-3.5 font-medium data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.secondary" href="#">Secondary button</a><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" data-size="small" href="#">Small</a><a class="inline-block w-fit border-[1.5px] border-current/40 px-6 py-3.5 font-medium data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.secondary" data-size="small" href="#">Small</a></div></div></section></div></div></figure><figure class="preview"><figcaption>Brand color ground</figcaption><div class="frame-scroll"><div class="frame"><section data-block="ground" data-ground="dark" data-tone="accent" class="bg-accent text-accent-ink" data-slot="tones.accent section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><p class="mb-3 text-sm font-semibold" data-slot="heading.eyebrow">Eyebrow</p><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">A section heading with a <span class="text-highlight on-dark:text-current on-dark:underline" data-slot="emphasis.mark">highlighted</span> phrase</h2><p class="mt-4 text-lg leading-relaxed" data-slot="heading.intro">An intro under the heading, in a sentence or two.</p></div><div class="mt-8 flex flex-wrap gap-3" data-slot="hero.actions"><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" href="#">Primary button</a><a class="inline-block w-fit border-[1.5px] border-current/40 px-6 py-3.5 font-medium data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.secondary" href="#">Secondary button</a><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" data-size="small" href="#">Small</a><a class="inline-block w-fit border-[1.5px] border-current/40 px-6 py-3.5 font-medium data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.secondary" data-size="small" href="#">Small</a></div></div></section></div></div></figure>
|
|
1272
|
+
<div class="spec"><div><h4>Color and font tokens</h4><p class="spec-note">Every color in every block comes from these tokens, plus one sans-serif font and a site width. Start a design by giving each one a value. Here they're greys.</p><div class="table-wrap"><table class="fields tokens"><tbody><tr><td><span class="swatch" style="background:#ffffff"></span><code>bg</code></td><td>The page's ground</td></tr><tr><td><span class="swatch" style="background:#1a1a1a"></span><code>ink</code></td><td>Text on the page's ground</td></tr><tr><td><span class="swatch" style="background:#595959"></span><code>muted-ink</code></td><td>Quieter text, such as a tagline</td></tr><tr><td><span class="swatch" style="background:#d4d4d4"></span><code>line</code></td><td>Dividers and card edges (can be faint)</td></tr><tr><td><span class="swatch" style="background:#8c8c8c"></span><code>field</code></td><td>Form field and option borders (needs 3:1 contrast on surface, bg and muted)</td></tr><tr><td><span class="swatch" style="background:#ffffff"></span><code>surface</code></td><td>Cards and form fields</td></tr><tr><td><span class="swatch" style="background:#f0f0f0"></span><code>muted</code></td><td>The Subtle ground</td></tr><tr><td><span class="swatch" style="background:#2e2e2e"></span><code>inverse</code></td><td>The Dark ground</td></tr><tr><td><span class="swatch" style="background:#ffffff"></span><code>inverse-ink</code></td><td>Text on the Dark ground</td></tr><tr><td><span class="swatch" style="background:#4d4d4d"></span><code>accent</code></td><td>The Brand ground, primary buttons and badges</td></tr><tr><td><span class="swatch" style="background:#ffffff"></span><code>accent-ink</code></td><td>Text on accent</td></tr><tr><td><span class="swatch" style="background:#595959"></span><code>highlight</code></td><td>Highlighted heading words, links, dates and times</td></tr><tr><td><span class="swatch" style="background:#404040"></span><code>danger</code></td><td>Form errors and cancelled events</td></tr></tbody></table></div></div>
|
|
1273
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.default</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>heading.root</code></li><li><code>heading.eyebrow</code></li><li><code>heading.title</code></li><li><code>emphasis.mark</code></li><li><code>heading.intro</code></li><li><code>hero.actions</code></li><li><code>button.primary</code></li><li><code>button.secondary</code></li><li><code>tones.muted</code></li><li><code>tones.inverse</code></li><li><code>tones.accent</code></li></ul></div></div>
|
|
1274
|
+
</article>
|
|
1275
|
+
<article class="entry" id="form-states">
|
|
1276
|
+
<header><h3>Form states</h3><p>The Form, Volunteer sign-up and Donation blocks share these pieces. Errors and the success message only appear after someone submits, so they're shown together here.</p></header>
|
|
1277
|
+
<figure class="preview"><figcaption>Errors, filled-in fields, chosen and full options, and the success message</figcaption><div class="frame-scroll"><div class="frame"><section data-block="form-states" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="max-w-2xl space-y-6" data-slot="formBlock.wrap form.root"><p role="alert" class="border border-danger/30 bg-danger/5 px-4 py-3 text-danger" data-slot="form.alert">Please check the fields below and try again.</p><div><label for="states-email" class="mb-1.5 block font-semibold" data-slot="form.label">Email</label><input id="states-email" required="" aria-invalid="true" aria-describedby="states-email-error" type="email" autoComplete="email" class="block w-full border border-field bg-surface px-4 py-3 text-base text-ink focus:border-accent focus:outline-none aria-invalid:border-danger" data-slot="form.input" name="email" value="dana@"/><span id="states-email-error" class="mt-1.5 block text-sm text-danger" data-slot="form.error">Enter a valid email address.</span></div><div><label for="states-topic" class="mb-1.5 block font-semibold" data-slot="form.label">What is this about?</label><select id="states-topic" name="topic" required="" aria-invalid="true" aria-describedby="states-topic-error" class="block w-full border border-field bg-surface px-4 py-3 text-base text-ink focus:border-accent focus:outline-none aria-invalid:border-danger" data-slot="form.input"><option value="" disabled="" selected="">Choose one…</option><option>Volunteering</option><option>Donating</option></select><span id="states-topic-error" class="mt-1.5 block text-sm text-danger" data-slot="form.error">Choose one.</span></div><div><label for="states-message" class="mb-1.5 block font-semibold" data-slot="form.label">Message</label><textarea id="states-message" name="message" required="" rows="5" class="block w-full border border-field bg-surface px-4 py-3 text-base text-ink focus:border-accent focus:outline-none aria-invalid:border-danger" data-slot="form.input">A message someone has already typed.</textarea></div><div><label class="flex items-center gap-3" data-slot="form.check"><input type="checkbox" id="states-updates" class="size-5 accent-accent" data-slot="form.checkbox" name="updates" checked=""/>Send me the monthly newsletter</label></div><label class="flex cursor-pointer items-start gap-3 p-4 ring-1 ring-line has-checked:ring-2 has-checked:ring-accent has-disabled:cursor-not-allowed has-disabled:opacity-50" data-slot="form.option"><input type="radio" class="mt-1 size-5 accent-accent" data-slot="form.optionInput" name="states-option" checked=""/><span class="flex-1" data-slot="form.optionText"><span class="flex flex-wrap justify-between gap-2 font-semibold" data-slot="form.optionTitle"><span>A chosen option</span><span class="font-normal" data-slot="form.optionMeta">3 spots left</span></span><span class="mt-0.5 block" data-slot="form.optionDetail">Its details, under the title</span></span></label><label class="flex cursor-pointer items-start gap-3 p-4 ring-1 ring-line has-checked:ring-2 has-checked:ring-accent has-disabled:cursor-not-allowed has-disabled:opacity-50" data-slot="form.option"><input type="radio" disabled="" class="mt-1 size-5 accent-accent" data-slot="form.optionInput" name="states-option"/><span class="flex-1" data-slot="form.optionText"><span class="flex flex-wrap justify-between gap-2 font-semibold" data-slot="form.optionTitle"><span>A full option</span><span class="font-normal" data-slot="form.optionMeta">Full</span></span></span></label><p role="status" class="bg-accent p-6 text-lg font-semibold text-accent-ink" data-slot="form.success">Thanks! We'll be in touch soon.</p></div></div></section></div></div></figure>
|
|
1278
|
+
<div class="spec"><div><h4>Theme slots</h4><ul class="slots"><li><code>tones.default</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>formBlock.wrap</code></li><li><code>form.root</code></li><li><code>form.alert</code></li><li><code>form.label</code></li><li><code>form.input</code></li><li><code>form.error</code></li><li><code>form.check</code></li><li><code>form.checkbox</code></li><li><code>form.option</code></li><li><code>form.optionInput</code></li><li><code>form.optionText</code></li><li><code>form.optionTitle</code></li><li><code>form.optionMeta</code></li><li><code>form.optionDetail</code></li><li><code>form.success</code></li></ul></div></div>
|
|
1279
|
+
</article>
|
|
1280
|
+
<h2 class="group-title">Layout</h2><article class="entry" id="block-hero">
|
|
1281
|
+
<header><h3>Hero</h3><p>Large page header with heading, image, and buttons.</p></header>
|
|
1282
|
+
<figure class="preview"><figcaption>Full size, with image and both buttons</figcaption><div class="frame-scroll"><div class="frame"><section data-block="hero" data-size="full" data-ground="dark" data-tone="inverse" class="relative overflow-hidden bg-inverse text-inverse-ink" data-slot="hero.root"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="eager" fetchPriority="high" decoding="sync" class="absolute inset-0 size-full object-cover opacity-35" data-slot="hero.image"/><div class="relative mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20 data-[size=full]:py-28 @min-[640px]:data-[size=full]:py-36" data-slot="hero.inner" data-size="full"><p class="mb-4 text-sm font-semibold" data-slot="hero.eyebrow">Millbrook Community Kitchen</p><h1 class="max-w-4xl text-[clamp(36px,5cqw,64px)] font-bold leading-[1.05]" data-slot="hero.title">A seat at the table for <span class="underline" data-slot="hero.emphasis">everyone</span></h1><p class="mt-5 max-w-2xl text-lg leading-relaxed @min-[640px]:text-xl" data-slot="hero.body">Free meals, cooking classes and a garden that feeds forty families, all run by the neighbors who use them.</p><div class="mt-8 flex flex-wrap gap-3" data-slot="hero.actions"><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" href="/dinners">Come to dinner</a><a class="inline-block w-fit border-[1.5px] border-current/40 px-6 py-3.5 font-medium data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.secondary" href="/volunteer">Volunteer</a></div></div></section></div></div></figure><figure class="preview"><figcaption>Compact, without an image (inner pages)</figcaption><div class="frame-scroll"><div class="frame"><section data-block="hero" data-size="compact" data-ground="dark" data-tone="inverse" class="relative overflow-hidden bg-inverse text-inverse-ink" data-slot="hero.root"><div class="relative mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20 data-[size=full]:py-28 @min-[640px]:data-[size=full]:py-36" data-slot="hero.inner" data-size="compact"><h1 class="max-w-4xl text-[clamp(36px,5cqw,64px)] font-bold leading-[1.05]" data-slot="hero.title">About the kitchen</h1><p class="mt-5 max-w-2xl text-lg leading-relaxed @min-[640px]:text-xl" data-slot="hero.body">How a church basement and two stoves became a meal for three hundred people a week.</p></div></section></div></div></figure><figure class="preview"><figcaption>With the site's logo</figcaption><div class="frame-scroll"><div class="frame"><section data-block="hero" data-size="compact" data-ground="dark" data-tone="inverse" class="relative overflow-hidden bg-inverse text-inverse-ink" data-slot="hero.root"><div class="relative mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20 data-[size=full]:py-28 @min-[640px]:data-[size=full]:py-36" data-slot="hero.inner" data-size="compact"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%2240%22%20viewBox%3D%220%200%20160%2040%22%3E%3Crect%20width%3D%22160%22%20height%3D%2240%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Ctext%20x%3D%2280%22%20y%3D%2225%22%20font-family%3D%22sans-serif%22%20font-size%3D%2214%22%20fill%3D%22%23595959%22%20text-anchor%3D%22middle%22%3ESite%20logo%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Site logo" width="160" height="40" loading="eager" fetchPriority="high" decoding="sync" class="mb-6 h-20 w-auto @min-[640px]:h-24" data-slot="hero.logo"/><h1 class="max-w-4xl text-[clamp(36px,5cqw,64px)] font-bold leading-[1.05]" data-slot="hero.title">A seat at the table for <span class="underline" data-slot="hero.emphasis">everyone</span></h1><div class="mt-8 flex flex-wrap gap-3" data-slot="hero.actions"><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" href="/dinners">Come to dinner</a></div></div></section></div></div></figure><figure class="preview"><figcaption>Background: Standard</figcaption><div class="frame-scroll"><div class="frame"><section data-block="hero" data-size="compact" data-ground="light" data-tone="default" class="bg-bg text-ink relative overflow-hidden" data-slot="tones.default hero.toned"><div class="relative mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20 data-[size=full]:py-28 @min-[640px]:data-[size=full]:py-36" data-slot="hero.inner" data-size="compact"><p class="mb-4 text-sm font-semibold" data-slot="hero.eyebrow">Our story</p><h1 class="max-w-4xl text-[clamp(36px,5cqw,64px)] font-bold leading-[1.05]" data-slot="hero.title">Cooked by neighbors, for neighbors</h1><p class="mt-5 max-w-2xl text-lg leading-relaxed @min-[640px]:text-xl" data-slot="hero.body">Every meal since 2011.</p><div class="mt-8 flex flex-wrap gap-3" data-slot="hero.actions"><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" href="/about">Read more</a><a class="inline-block w-fit border-[1.5px] border-current/40 px-6 py-3.5 font-medium data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.secondary" href="/volunteer">Volunteer</a></div></div></section></div></div></figure><figure class="preview"><figcaption>Background: Subtle</figcaption><div class="frame-scroll"><div class="frame"><section data-block="hero" data-size="compact" data-ground="light" data-tone="muted" class="bg-muted text-ink relative overflow-hidden" data-slot="tones.muted hero.toned"><div class="relative mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20 data-[size=full]:py-28 @min-[640px]:data-[size=full]:py-36" data-slot="hero.inner" data-size="compact"><p class="mb-4 text-sm font-semibold" data-slot="hero.eyebrow">Our story</p><h1 class="max-w-4xl text-[clamp(36px,5cqw,64px)] font-bold leading-[1.05]" data-slot="hero.title">Cooked by neighbors, for neighbors</h1><div class="mt-8 flex flex-wrap gap-3" data-slot="hero.actions"><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" href="/about">Read more</a></div></div></section></div></div></figure><figure class="preview"><figcaption>Background: Brand color</figcaption><div class="frame-scroll"><div class="frame"><section data-block="hero" data-size="compact" data-ground="dark" data-tone="accent" class="bg-accent text-accent-ink relative overflow-hidden" data-slot="tones.accent hero.toned"><div class="relative mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20 data-[size=full]:py-28 @min-[640px]:data-[size=full]:py-36" data-slot="hero.inner" data-size="compact"><p class="mb-4 text-sm font-semibold" data-slot="hero.eyebrow">Our story</p><h1 class="max-w-4xl text-[clamp(36px,5cqw,64px)] font-bold leading-[1.05]" data-slot="hero.title">Cooked by neighbors, for neighbors</h1><div class="mt-8 flex flex-wrap gap-3" data-slot="hero.actions"><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" href="/about">Read more</a></div></div></section></div></div></figure>
|
|
1283
|
+
<div class="spec">
|
|
1284
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Eyebrow</td><td>Short text</td><td>Optional</td><td>Small label above the heading.</td></tr><tr><td>Heading</td><td>Short text</td><td>Required</td><td>Wrap words in *asterisks* to highlight them, if the site supports it.</td></tr><tr><td>Intro text</td><td>Text</td><td>Optional</td><td></td></tr><tr><td>Image</td><td>Image</td><td>Optional</td><td></td></tr><tr><td>Primary button</td><td>Button or link</td><td>Optional</td><td></td></tr><tr><td>Secondary button</td><td>Button or link</td><td>Optional</td><td></td></tr><tr><td>Show the site logo</td><td>On or off</td><td></td><td>Uses the logo from Settings → General.</td></tr><tr><td>Size</td><td>Choice</td><td>Required</td><td>Full (homepage) · Compact (inner pages)</td></tr><tr><td>Background</td><td>Choice</td><td>Optional</td><td>Standard · Subtle (separates it from the section above) · Dark · Brand color</td></tr></tbody></table></div></div>
|
|
1285
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>hero.root</code></li><li><code>hero.image</code></li><li><code>hero.inner</code></li><li><code>hero.eyebrow</code></li><li><code>hero.title</code></li><li><code>hero.emphasis</code></li><li><code>hero.body</code></li><li><code>hero.actions</code></li><li><code>button.primary</code></li><li><code>button.secondary</code></li><li><code>hero.logo</code></li><li><code>tones.default</code></li><li><code>hero.toned</code></li><li><code>tones.muted</code></li><li><code>tones.accent</code></li></ul></div>
|
|
1286
|
+
</div>
|
|
1287
|
+
</article><article class="entry" id="block-cta">
|
|
1288
|
+
<header><h3>Call to action</h3><p>Bold banner with buttons.</p></header>
|
|
1289
|
+
<figure class="preview"><figcaption>Brand color</figcaption><div class="frame-scroll"><div class="frame"><section data-block="cta" data-ground="dark" data-tone="accent" class="bg-accent text-accent-ink" data-slot="tones.accent section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="flex flex-wrap items-center justify-between gap-8" data-slot="cta.row"><div class="max-w-2xl" data-slot="cta.text"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="cta.title">Ready to <span class="text-highlight on-dark:text-current on-dark:underline" data-slot="emphasis.mark">pull up a chair</span>?</h2><p class="mt-3 text-lg" data-slot="cta.body">Dinner is every Tuesday at six. Everyone is welcome.</p></div><div class="flex flex-wrap gap-3" data-slot="cta.actions"><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" href="/visit">Get directions</a><a class="inline-block w-fit border-[1.5px] border-current/40 px-6 py-3.5 font-medium data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.secondary" href="/volunteer">Volunteer</a></div></div></div></section></div></div></figure><figure class="preview"><figcaption>Dark</figcaption><div class="frame-scroll"><div class="frame"><section data-block="cta" data-ground="dark" data-tone="inverse" class="bg-inverse text-inverse-ink" data-slot="tones.inverse section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="flex flex-wrap items-center justify-between gap-8" data-slot="cta.row"><div class="max-w-2xl" data-slot="cta.text"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="cta.title">Ready to pull up a chair?</h2></div><div class="flex flex-wrap gap-3" data-slot="cta.actions"><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" href="/visit">Get directions</a><a class="inline-block w-fit border-[1.5px] border-current/40 px-6 py-3.5 font-medium data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.secondary" href="/volunteer">Volunteer</a></div></div></div></section></div></div></figure><figure class="preview"><figcaption>Subtle, with one button</figcaption><div class="frame-scroll"><div class="frame"><section data-block="cta" data-ground="light" data-tone="muted" class="bg-muted text-ink" data-slot="tones.muted section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="flex flex-wrap items-center justify-between gap-8" data-slot="cta.row"><div class="max-w-2xl" data-slot="cta.text"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="cta.title">Ready to pull up a chair?</h2><p class="mt-3 text-lg" data-slot="cta.body">Dinner is every Tuesday at six.</p></div><div class="flex flex-wrap gap-3" data-slot="cta.actions"><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" href="/visit">Get directions</a></div></div></div></section></div></div></figure><figure class="preview"><figcaption>Standard, with one button</figcaption><div class="frame-scroll"><div class="frame"><section data-block="cta" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="flex flex-wrap items-center justify-between gap-8" data-slot="cta.row"><div class="max-w-2xl" data-slot="cta.text"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="cta.title">Ready to pull up a chair?</h2></div><div class="flex flex-wrap gap-3" data-slot="cta.actions"><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" href="/visit">Get directions</a></div></div></div></section></div></div></figure><figure class="preview"><figcaption>With a background photo</figcaption><div class="frame-scroll"><div class="frame"><section data-block="cta" data-ground="dark" data-tone="inverse" class="relative overflow-hidden text-white" data-slot="cta.imageRoot"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="absolute inset-0 size-full object-cover" data-slot="cta.image"/><div class="relative bg-black/55" data-slot="cta.overlay"><div class="mx-auto max-w-site px-4 py-20 @min-[640px]:px-6 @min-[640px]:py-24" data-slot="cta.overlayInner"><div class="flex flex-wrap items-center justify-between gap-8" data-slot="cta.row"><div class="max-w-2xl" data-slot="cta.text"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="cta.title">Ready to pull up a chair?</h2><p class="mt-3 text-lg" data-slot="cta.body">Dinner is every Tuesday at six.</p></div><div class="flex flex-wrap gap-3" data-slot="cta.actions"><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" href="/visit">Get directions</a><a class="inline-block w-fit border-[1.5px] border-current/40 px-6 py-3.5 font-medium data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.secondary" href="/volunteer">Volunteer</a></div></div></div></div></section></div></div></figure>
|
|
1290
|
+
<div class="spec">
|
|
1291
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Heading</td><td>Short text</td><td>Required</td><td></td></tr><tr><td>Text</td><td>Text</td><td>Optional</td><td></td></tr><tr><td>Primary button</td><td>Button or link</td><td>Optional</td><td></td></tr><tr><td>Secondary button</td><td>Button or link</td><td>Optional</td><td></td></tr><tr><td>Background</td><td>Choice</td><td>Required</td><td>Standard · Subtle (separates it from the section above) · Dark · Brand color</td></tr><tr><td>Background photo</td><td>Image</td><td>Optional</td><td></td></tr></tbody></table></div></div>
|
|
1292
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.accent</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>cta.row</code></li><li><code>cta.text</code></li><li><code>cta.title</code></li><li><code>emphasis.mark</code></li><li><code>cta.body</code></li><li><code>cta.actions</code></li><li><code>button.primary</code></li><li><code>button.secondary</code></li><li><code>tones.inverse</code></li><li><code>tones.muted</code></li><li><code>tones.default</code></li><li><code>cta.imageRoot</code></li><li><code>cta.image</code></li><li><code>cta.overlay</code></li><li><code>cta.overlayInner</code></li></ul></div>
|
|
1293
|
+
</div>
|
|
1294
|
+
</article><h2 class="group-title">Content</h2><article class="entry" id="block-richText">
|
|
1295
|
+
<header><h3>Text</h3><p>Formatted paragraphs, lists, and headings.</p></header>
|
|
1296
|
+
<figure class="preview"><figcaption>Narrow, with every kind of formatting</figcaption><div class="frame-scroll"><div class="frame"><section data-block="richText" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="prose text-lg data-[width=narrow]:max-w-3xl" data-slot="richText.body" data-width="narrow"><h2>Why we cook together</h2>
|
|
1297
|
+
<p>Millbrook Community Kitchen opened in a church basement with two stoves. Today <strong>more than three hundred neighbors</strong> share a meal with us each week, and <a href="/join">anyone can join</a>.</p>
|
|
1298
|
+
<h3>What happens on a Tuesday</h3>
|
|
1299
|
+
<ol>
|
|
1300
|
+
<li>Volunteers arrive at three and start prepping.</li>
|
|
1301
|
+
<li>Dinner goes out at six, with <em>no sign-up and no charge</em>.</li>
|
|
1302
|
+
<li>Whatever is left goes home with whoever wants it.</li>
|
|
1303
|
+
</ol>
|
|
1304
|
+
<p>Things to bring:</p>
|
|
1305
|
+
<ul>
|
|
1306
|
+
<li>An appetite</li>
|
|
1307
|
+
<li>A container for leftovers</li>
|
|
1308
|
+
</ul>
|
|
1309
|
+
<blockquote>
|
|
1310
|
+
<p>The kitchen is the first place in this town where I knew everybody's name.</p>
|
|
1311
|
+
</blockquote>
|
|
1312
|
+
<table><thead><tr><th>Day</th><th>Meal</th><th>Served</th></tr></thead><tbody><tr><td>Tuesday</td><td>Community dinner</td><td>6:00 PM</td></tr><tr><td>Saturday</td><td>Family breakfast</td><td>9:00 AM</td></tr></tbody></table></div></div></section></div></div></figure><figure class="preview"><figcaption>Wide</figcaption><div class="frame-scroll"><div class="frame"><section data-block="richText" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="prose text-lg data-[width=narrow]:max-w-3xl" data-slot="richText.body" data-width="wide"><h2>A wider column of text</h2>
|
|
1313
|
+
<p>Wide text runs the full width of the site's content area. It suits short statements and text with tables more than long reading.</p></div></div></section></div></div></figure>
|
|
1314
|
+
<div class="spec">
|
|
1315
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Text</td><td>Rich text</td><td>Required</td><td></td></tr><tr><td>Width</td><td>Choice</td><td>Required</td><td>Narrow (best for reading) · Wide</td></tr></tbody></table></div></div>
|
|
1316
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.default</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>richText.body</code></li></ul></div>
|
|
1317
|
+
</div>
|
|
1318
|
+
</article><article class="entry" id="block-mediaText">
|
|
1319
|
+
<header><h3>Image + text</h3><p>Image beside a heading and copy.</p></header>
|
|
1320
|
+
<figure class="preview"><figcaption>Image on the right, with a button</figcaption><div class="frame-scroll"><div class="frame"><section data-block="mediaText" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="grid items-center gap-10 @min-[768px]:grid-cols-2" data-slot="mediaText.grid" data-image="right"><div class="@min-[768px]:in-data-[image=left]:order-2" data-slot="mediaText.text"><div class="mb-10 max-w-3xl" data-slot="heading.root"><p class="mb-3 text-sm font-semibold" data-slot="heading.eyebrow">The garden</p><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Forty beds, <span class="text-highlight on-dark:text-current on-dark:underline" data-slot="emphasis.mark">one</span> big harvest</h2></div><div class="prose text-lg" data-slot="mediaText.body"><p>Our garden supplies a third of the produce we cook. Families who tend a bed take home what they grow.</p>
|
|
1321
|
+
<ul>
|
|
1322
|
+
<li>Open to everyone</li>
|
|
1323
|
+
<li>Tools provided</li>
|
|
1324
|
+
</ul></div><div class="mt-6" data-slot="mediaText.actions"><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" href="/garden">Visit the garden</a></div></div><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[4/3] w-full object-cover data-[fit=contain]:aspect-auto data-[fit=contain]:max-h-96 data-[fit=contain]:object-contain" data-slot="mediaText.image" data-fit="cover"/></div></div></section></div></div></figure><figure class="preview"><figcaption>Image on the left</figcaption><div class="frame-scroll"><div class="frame"><section data-block="mediaText" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="grid items-center gap-10 @min-[768px]:grid-cols-2" data-slot="mediaText.grid" data-image="left"><div class="@min-[768px]:in-data-[image=left]:order-2" data-slot="mediaText.text"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Classes for every level</h2></div><div class="prose text-lg" data-slot="mediaText.body"><p>From knife skills to sourdough, our classes are hands-on and pay-what-you-can.</p></div></div><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[4/3] w-full object-cover data-[fit=contain]:aspect-auto data-[fit=contain]:max-h-96 data-[fit=contain]:object-contain" data-slot="mediaText.image" data-fit="cover"/></div></div></section></div></div></figure><figure class="preview"><figcaption>Image fit: whole image (logos, badges)</figcaption><div class="frame-scroll"><div class="frame"><section data-block="mediaText" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="grid items-center gap-10 @min-[768px]:grid-cols-2" data-slot="mediaText.grid" data-image="right"><div class="@min-[768px]:in-data-[image=left]:order-2" data-slot="mediaText.text"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Certified by the state food bank</h2></div><div class="prose text-lg" data-slot="mediaText.body"><p>We meet every food safety standard, and we're inspected each year.</p></div></div><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%2240%22%20viewBox%3D%220%200%20160%2040%22%3E%3Crect%20width%3D%22160%22%20height%3D%2240%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Ctext%20x%3D%2280%22%20y%3D%2225%22%20font-family%3D%22sans-serif%22%20font-size%3D%2214%22%20fill%3D%22%23595959%22%20text-anchor%3D%22middle%22%3EBadge%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Badge" width="160" height="40" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[4/3] w-full object-cover data-[fit=contain]:aspect-auto data-[fit=contain]:max-h-96 data-[fit=contain]:object-contain" data-slot="mediaText.image" data-fit="contain"/></div></div></section></div></div></figure>
|
|
1325
|
+
<div class="spec">
|
|
1326
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Eyebrow</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Heading</td><td>Short text</td><td>Required</td><td></td></tr><tr><td>Text</td><td>Rich text</td><td>Required</td><td></td></tr><tr><td>Image</td><td>Image</td><td>Optional</td><td></td></tr><tr><td>Image position</td><td>Choice</td><td>Required</td><td>Right · Left</td></tr><tr><td>Image fit</td><td>Choice</td><td>Required</td><td>Fill the frame (photos) · Show the whole image (logos, badges)</td></tr><tr><td>Button</td><td>Button or link</td><td>Optional</td><td></td></tr></tbody></table></div></div>
|
|
1327
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.default</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>mediaText.grid</code></li><li><code>mediaText.text</code></li><li><code>heading.root</code></li><li><code>heading.eyebrow</code></li><li><code>heading.title</code></li><li><code>emphasis.mark</code></li><li><code>mediaText.body</code></li><li><code>mediaText.actions</code></li><li><code>button.primary</code></li><li><code>mediaText.image</code></li></ul></div>
|
|
1328
|
+
</div>
|
|
1329
|
+
</article><article class="entry" id="block-stats">
|
|
1330
|
+
<header><h3>Stats</h3><p>A row of headline numbers.</p></header>
|
|
1331
|
+
<figure class="preview"><figcaption>With a heading</figcaption><div class="frame-scroll"><div class="frame"><section data-block="stats" data-ground="dark" data-tone="inverse" class="bg-inverse text-inverse-ink" data-slot="tones.inverse section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Last year at the kitchen</h2></div><dl class="grid gap-8 @min-[640px]:grid-cols-2 @min-[1024px]:grid-cols-4" data-slot="stats.list"><div class="flex flex-col-reverse" data-slot="stats.item"><dt class="mt-2" data-slot="stats.label">Meals served</dt><dd class="text-5xl font-bold" data-slot="stats.value">15,600</dd></div><div class="flex flex-col-reverse" data-slot="stats.item"><dt class="mt-2" data-slot="stats.label">Volunteers</dt><dd class="text-5xl font-bold" data-slot="stats.value">340</dd></div><div class="flex flex-col-reverse" data-slot="stats.item"><dt class="mt-2" data-slot="stats.label">Garden beds</dt><dd class="text-5xl font-bold" data-slot="stats.value">40</dd></div><div class="flex flex-col-reverse" data-slot="stats.item"><dt class="mt-2" data-slot="stats.label">Charged for dinner</dt><dd class="text-5xl font-bold" data-slot="stats.value">$0</dd></div></dl></div></section></div></div></figure><figure class="preview"><figcaption>Without a heading, two numbers</figcaption><div class="frame-scroll"><div class="frame"><section data-block="stats" data-ground="dark" data-tone="inverse" class="bg-inverse text-inverse-ink" data-slot="tones.inverse section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><dl class="grid gap-8 @min-[640px]:grid-cols-2 @min-[1024px]:grid-cols-4" data-slot="stats.list"><div class="flex flex-col-reverse" data-slot="stats.item"><dt class="mt-2" data-slot="stats.label">Years cooking together</dt><dd class="text-5xl font-bold" data-slot="stats.value">15+</dd></div><div class="flex flex-col-reverse" data-slot="stats.item"><dt class="mt-2" data-slot="stats.label">Partner pantries</dt><dd class="text-5xl font-bold" data-slot="stats.value">6</dd></div></dl></div></section></div></div></figure>
|
|
1332
|
+
<div class="spec">
|
|
1333
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Heading</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Stats</td><td>List of stat items</td><td></td><td></td></tr><tr><td class="nested">Number</td><td>Short text</td><td>Required</td><td></td></tr><tr><td class="nested">Label</td><td>Short text</td><td>Required</td><td></td></tr></tbody></table></div></div>
|
|
1334
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.inverse</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>heading.root</code></li><li><code>heading.title</code></li><li><code>stats.list</code></li><li><code>stats.item</code></li><li><code>stats.label</code></li><li><code>stats.value</code></li></ul></div>
|
|
1335
|
+
</div>
|
|
1336
|
+
</article><article class="entry" id="block-cardGrid">
|
|
1337
|
+
<header><h3>Cards</h3><p>Grid of cards with optional images and links.</p></header>
|
|
1338
|
+
<figure class="preview"><figcaption>Images and links, Standard background</figcaption><div class="frame-scroll"><div class="frame"><section data-block="cardGrid" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><p class="mb-3 text-sm font-semibold" data-slot="heading.eyebrow">What we do</p><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Three ways to take part</h2><p class="mt-4 text-lg leading-relaxed" data-slot="heading.intro">Whichever you choose, there's a place for you.</p></div><ul class="grid gap-5 @min-[640px]:grid-cols-2 @min-[1024px]:grid-cols-3" data-slot="cardGrid.list"><li class="flex flex-col gap-3 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="cardGrid.card" data-card="community-dinners"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="mb-2 aspect-[16/10] w-full object-cover" data-slot="cardGrid.image"/><h3 class="text-xl font-semibold" data-slot="cardGrid.title">Community dinners</h3><p class="leading-relaxed" data-slot="cardGrid.body">A free, hot meal every Tuesday, cooked by neighbors for neighbors.</p><a class="mt-auto pt-2 font-semibold underline after:content-['_→']" data-slot="cardGrid.link" href="/dinners">See the menu</a></li><li class="flex flex-col gap-3 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="cardGrid.card" data-card="cooking-classes"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="mb-2 aspect-[16/10] w-full object-cover" data-slot="cardGrid.image"/><h3 class="text-xl font-semibold" data-slot="cardGrid.title">Cooking classes</h3><p class="leading-relaxed" data-slot="cardGrid.body">Hands-on classes for every level, from knife skills to bread.</p><a class="mt-auto pt-2 font-semibold underline after:content-['_→']" data-slot="cardGrid.link" href="/classes">View classes</a></li><li class="flex flex-col gap-3 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="cardGrid.card" data-card="the-kitchen-garden"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="mb-2 aspect-[16/10] w-full object-cover" data-slot="cardGrid.image"/><h3 class="text-xl font-semibold" data-slot="cardGrid.title">The kitchen garden</h3><p class="leading-relaxed" data-slot="cardGrid.body">Forty raised beds that supply a third of the produce we cook.</p><a class="mt-auto pt-2 font-semibold underline after:content-['_→']" data-slot="cardGrid.link" href="/garden">Visit the garden</a></li></ul></div></section></div></div></figure><figure class="preview"><figcaption>Text only, Subtle background</figcaption><div class="frame-scroll"><div class="frame"><section data-block="cardGrid" data-ground="light" data-tone="muted" class="bg-muted text-ink" data-slot="tones.muted section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">What to expect</h2></div><ul class="grid gap-5 @min-[640px]:grid-cols-2 @min-[1024px]:grid-cols-3" data-slot="cardGrid.list"><li class="flex flex-col gap-3 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="cardGrid.card" data-card="community-dinners"><h3 class="text-xl font-semibold" data-slot="cardGrid.title">Community dinners</h3><p class="leading-relaxed" data-slot="cardGrid.body">A free, hot meal every Tuesday, cooked by neighbors for neighbors.</p></li><li class="flex flex-col gap-3 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="cardGrid.card" data-card="cooking-classes"><h3 class="text-xl font-semibold" data-slot="cardGrid.title">Cooking classes</h3><p class="leading-relaxed" data-slot="cardGrid.body">Hands-on classes for every level, from knife skills to bread.</p></li><li class="flex flex-col gap-3 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="cardGrid.card" data-card="the-kitchen-garden"><h3 class="text-xl font-semibold" data-slot="cardGrid.title">The kitchen garden</h3><p class="leading-relaxed" data-slot="cardGrid.body">Forty raised beds that supply a third of the produce we cook.</p></li></ul></div></section></div></div></figure><figure class="preview"><figcaption>Dark background</figcaption><div class="frame-scroll"><div class="frame"><section data-block="cardGrid" data-ground="dark" data-tone="inverse" class="bg-inverse text-inverse-ink" data-slot="tones.inverse section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">What to expect</h2></div><ul class="grid gap-5 @min-[640px]:grid-cols-2 @min-[1024px]:grid-cols-3" data-slot="cardGrid.list"><li class="flex flex-col gap-3 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="cardGrid.card" data-card="community-dinners"><h3 class="text-xl font-semibold" data-slot="cardGrid.title">Community dinners</h3><p class="leading-relaxed" data-slot="cardGrid.body">A free, hot meal every Tuesday, cooked by neighbors for neighbors.</p><a class="mt-auto pt-2 font-semibold underline after:content-['_→']" data-slot="cardGrid.link" href="/dinners">See the menu</a></li><li class="flex flex-col gap-3 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="cardGrid.card" data-card="cooking-classes"><h3 class="text-xl font-semibold" data-slot="cardGrid.title">Cooking classes</h3><p class="leading-relaxed" data-slot="cardGrid.body">Hands-on classes for every level, from knife skills to bread.</p><a class="mt-auto pt-2 font-semibold underline after:content-['_→']" data-slot="cardGrid.link" href="/classes">View classes</a></li><li class="flex flex-col gap-3 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="cardGrid.card" data-card="the-kitchen-garden"><h3 class="text-xl font-semibold" data-slot="cardGrid.title">The kitchen garden</h3><p class="leading-relaxed" data-slot="cardGrid.body">Forty raised beds that supply a third of the produce we cook.</p><a class="mt-auto pt-2 font-semibold underline after:content-['_→']" data-slot="cardGrid.link" href="/garden">Visit the garden</a></li></ul></div></section></div></div></figure><figure class="preview"><figcaption>Brand color background, no heading</figcaption><div class="frame-scroll"><div class="frame"><section data-block="cardGrid" data-ground="dark" data-tone="accent" class="bg-accent text-accent-ink" data-slot="tones.accent section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><ul class="grid gap-5 @min-[640px]:grid-cols-2 @min-[1024px]:grid-cols-3" data-slot="cardGrid.list"><li class="flex flex-col gap-3 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="cardGrid.card" data-card="community-dinners"><h2 class="text-xl font-semibold" data-slot="cardGrid.title">Community dinners</h2><p class="leading-relaxed" data-slot="cardGrid.body">A free, hot meal every Tuesday, cooked by neighbors for neighbors.</p><a class="mt-auto pt-2 font-semibold underline after:content-['_→']" data-slot="cardGrid.link" href="/dinners">See the menu</a></li><li class="flex flex-col gap-3 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="cardGrid.card" data-card="cooking-classes"><h2 class="text-xl font-semibold" data-slot="cardGrid.title">Cooking classes</h2><p class="leading-relaxed" data-slot="cardGrid.body">Hands-on classes for every level, from knife skills to bread.</p><a class="mt-auto pt-2 font-semibold underline after:content-['_→']" data-slot="cardGrid.link" href="/classes">View classes</a></li><li class="flex flex-col gap-3 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="cardGrid.card" data-card="the-kitchen-garden"><h2 class="text-xl font-semibold" data-slot="cardGrid.title">The kitchen garden</h2><p class="leading-relaxed" data-slot="cardGrid.body">Forty raised beds that supply a third of the produce we cook.</p><a class="mt-auto pt-2 font-semibold underline after:content-['_→']" data-slot="cardGrid.link" href="/garden">Visit the garden</a></li></ul></div></section></div></div></figure>
|
|
1339
|
+
<div class="spec">
|
|
1340
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Eyebrow</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Heading</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Intro</td><td>Text</td><td>Optional</td><td></td></tr><tr><td>Cards</td><td>List of card items</td><td></td><td></td></tr><tr><td class="nested">Title</td><td>Short text</td><td>Required</td><td></td></tr><tr><td class="nested">Text</td><td>Text</td><td>Required</td><td></td></tr><tr><td class="nested">Image</td><td>Image</td><td>Optional</td><td></td></tr><tr><td class="nested">Link</td><td>Button or link</td><td>Optional</td><td></td></tr><tr><td class="nested">Icon</td><td>Short text</td><td>Optional</td><td>A short name for an icon the website's design draws, if it has them.</td></tr><tr><td>Background</td><td>Choice</td><td>Required</td><td>Standard · Subtle (separates it from the section above) · Dark · Brand color</td></tr></tbody></table></div></div>
|
|
1341
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.default</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>heading.root</code></li><li><code>heading.eyebrow</code></li><li><code>heading.title</code></li><li><code>heading.intro</code></li><li><code>cardGrid.list</code></li><li><code>cardGrid.card</code></li><li><code>cardGrid.image</code></li><li><code>cardGrid.title</code></li><li><code>cardGrid.body</code></li><li><code>cardGrid.link</code></li><li><code>tones.muted</code></li><li><code>tones.inverse</code></li><li><code>tones.accent</code></li></ul></div>
|
|
1342
|
+
</div>
|
|
1343
|
+
</article><article class="entry" id="block-faq">
|
|
1344
|
+
<header><h3>FAQ</h3><p>Expandable questions and answers.</p></header>
|
|
1345
|
+
<figure class="preview"><figcaption>Answers open on click (the first is open here)</figcaption><div class="frame-scroll"><div class="frame"><section data-block="faq" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Common questions</h2></div><div class="max-w-3xl divide-y divide-line border-y border-line" data-slot="faq.list"><details open class="group" data-slot="faq.item"><summary class="flex min-h-14 cursor-pointer list-none items-center justify-between gap-4 py-4 text-lg font-semibold [&::-webkit-details-marker]:hidden" data-slot="faq.question">Do I need to sign up for a meal?<span aria-hidden="true" class="text-highlight before:content-['+'] group-open:rotate-45" data-slot="faq.icon"></span></summary><div class="prose pb-5 text-lg" data-slot="faq.answer"><p>No. Come any Tuesday at six. Everyone is welcome and every meal is free.</p></div></details><details class="group" data-slot="faq.item"><summary class="flex min-h-14 cursor-pointer list-none items-center justify-between gap-4 py-4 text-lg font-semibold [&::-webkit-details-marker]:hidden" data-slot="faq.question">Can I volunteer if I've never worked in a kitchen?<span aria-hidden="true" class="text-highlight before:content-['+'] group-open:rotate-45" data-slot="faq.icon"></span></summary><div class="prose pb-5 text-lg" data-slot="faq.answer"><p>Yes. We'll pair you with someone experienced. <strong>Most of our volunteers started that way.</strong></p></div></details><details class="group" data-slot="faq.item"><summary class="flex min-h-14 cursor-pointer list-none items-center justify-between gap-4 py-4 text-lg font-semibold [&::-webkit-details-marker]:hidden" data-slot="faq.question">Can I rent the kitchen for my own event?<span aria-hidden="true" class="text-highlight before:content-['+'] group-open:rotate-45" data-slot="faq.icon"></span></summary><div class="prose pb-5 text-lg" data-slot="faq.answer"><p>We rent to local groups on weekends. <a href="/contact">Get in touch</a> for the rates.</p></div></details></div></div></section></div></div></figure><figure class="preview"><figcaption>All answers showing</figcaption><div class="frame-scroll"><div class="frame"><section data-block="faq" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Common questions</h2></div><dl class="grid max-w-3xl gap-8" data-slot="faq.terms"><div data-slot="faq.term"><dt class="text-lg font-semibold" data-slot="faq.termQuestion">Do I need to sign up for a meal?</dt><dd><div class="prose mt-2 text-lg" data-slot="faq.termAnswer"><p>No. Come any Tuesday at six. Everyone is welcome and every meal is free.</p></div></dd></div><div data-slot="faq.term"><dt class="text-lg font-semibold" data-slot="faq.termQuestion">Can I volunteer if I've never worked in a kitchen?</dt><dd><div class="prose mt-2 text-lg" data-slot="faq.termAnswer"><p>Yes. We'll pair you with someone experienced. <strong>Most of our volunteers started that way.</strong></p></div></dd></div><div data-slot="faq.term"><dt class="text-lg font-semibold" data-slot="faq.termQuestion">Can I rent the kitchen for my own event?</dt><dd><div class="prose mt-2 text-lg" data-slot="faq.termAnswer"><p>We rent to local groups on weekends. <a href="/contact">Get in touch</a> for the rates.</p></div></dd></div></dl></div></section></div></div></figure>
|
|
1346
|
+
<div class="spec">
|
|
1347
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Heading</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Questions</td><td>List of question items</td><td></td><td></td></tr><tr><td class="nested">Question</td><td>Short text</td><td>Required</td><td></td></tr><tr><td class="nested">Answer</td><td>Rich text</td><td>Required</td><td></td></tr><tr><td>Show answers</td><td>Choice</td><td>Required</td><td>When a question is opened · All the time, as a list</td></tr></tbody></table></div></div>
|
|
1348
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.default</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>heading.root</code></li><li><code>heading.title</code></li><li><code>faq.list</code></li><li><code>faq.item</code></li><li><code>faq.question</code></li><li><code>faq.icon</code></li><li><code>faq.answer</code></li><li><code>faq.terms</code></li><li><code>faq.term</code></li><li><code>faq.termQuestion</code></li><li><code>faq.termAnswer</code></li></ul></div>
|
|
1349
|
+
</div>
|
|
1350
|
+
</article><article class="entry" id="block-pricing">
|
|
1351
|
+
<header><h3>Pricing</h3><p>Plans or packages side by side, with prices, what's included and a button each.</p></header>
|
|
1352
|
+
<figure class="preview"><figcaption>Three plans, one highlighted</figcaption><div class="frame-scroll"><div class="frame"><section data-block="pricing" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><p class="mb-3 text-sm font-semibold" data-slot="heading.eyebrow">Membership</p><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Keep dinner free</h2><p class="mt-4 text-lg leading-relaxed" data-slot="heading.intro">Members cover the cost of what we cook.</p></div><ul class="grid gap-5 @min-[640px]:grid-cols-2 @min-[1024px]:grid-cols-3 data-[count=many]:@min-[1024px]:grid-cols-4" data-slot="pricing.list" data-count="few"><li class="flex flex-col gap-4 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0 data-highlight:ring-2 data-highlight:ring-accent" data-slot="pricing.plan"><h3 class="text-xl font-semibold" data-slot="pricing.name">Neighbor</h3><p data-slot="pricing.price"><span class="text-4xl font-bold" data-slot="pricing.amount">$10</span><span class="ml-1" data-slot="pricing.period">per month</span></p><p class="leading-relaxed" data-slot="pricing.description">For anyone who wants to help keep dinner free.</p><ul class="grid gap-2" data-slot="pricing.features"><li class="flex gap-2.5" data-slot="pricing.feature"><span aria-hidden="true" class="text-highlight before:content-['✓'] on-dark:text-current" data-slot="pricing.check"></span>Monthly newsletter</li><li class="flex gap-2.5" data-slot="pricing.feature"><span aria-hidden="true" class="text-highlight before:content-['✓'] on-dark:text-current" data-slot="pricing.check"></span>Member night invitations</li></ul><div class="mt-auto pt-2" data-slot="pricing.actions"><a class="inline-block w-fit border-[1.5px] border-current/40 px-6 py-3.5 font-medium data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.secondary" href="/join">Join</a></div></li><li class="flex flex-col gap-4 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0 data-highlight:ring-2 data-highlight:ring-accent" data-slot="pricing.plan" data-highlight=""><p class="self-start bg-accent px-3 py-0.5 text-sm font-semibold text-accent-ink" data-slot="pricing.highlight">Most popular</p><h3 class="text-xl font-semibold" data-slot="pricing.name">Friend</h3><p data-slot="pricing.price"><span class="text-4xl font-bold" data-slot="pricing.amount">$25</span><span class="ml-1" data-slot="pricing.period">per month</span></p><p class="leading-relaxed" data-slot="pricing.description">Covers a family's meals for a month.</p><ul class="grid gap-2" data-slot="pricing.features"><li class="flex gap-2.5" data-slot="pricing.feature"><span aria-hidden="true" class="text-highlight before:content-['✓'] on-dark:text-current" data-slot="pricing.check"></span>Everything in Neighbor</li><li class="flex gap-2.5" data-slot="pricing.feature"><span aria-hidden="true" class="text-highlight before:content-['✓'] on-dark:text-current" data-slot="pricing.check"></span>Name on the wall of friends</li><li class="flex gap-2.5" data-slot="pricing.feature"><span aria-hidden="true" class="text-highlight before:content-['✓'] on-dark:text-current" data-slot="pricing.check"></span>Two guest passes</li></ul><div class="mt-auto pt-2" data-slot="pricing.actions"><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" href="/join">Join</a></div></li><li class="flex flex-col gap-4 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0 data-highlight:ring-2 data-highlight:ring-accent" data-slot="pricing.plan"><h3 class="text-xl font-semibold" data-slot="pricing.name">Partner</h3><p data-slot="pricing.price"><span class="text-4xl font-bold" data-slot="pricing.amount">Let's talk</span></p><p class="leading-relaxed" data-slot="pricing.description">For businesses that sponsor a program.</p><ul class="grid gap-2" data-slot="pricing.features"><li class="flex gap-2.5" data-slot="pricing.feature"><span aria-hidden="true" class="text-highlight before:content-['✓'] on-dark:text-current" data-slot="pricing.check"></span>Everything in Friend</li><li class="flex gap-2.5" data-slot="pricing.feature"><span aria-hidden="true" class="text-highlight before:content-['✓'] on-dark:text-current" data-slot="pricing.check"></span>Logo on the website</li></ul><div class="mt-auto pt-2" data-slot="pricing.actions"><a class="inline-block w-fit border-[1.5px] border-current/40 px-6 py-3.5 font-medium data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.secondary" href="/contact">Contact us</a></div></li></ul><div class="prose mt-8 max-w-3xl text-sm" data-slot="pricing.footnote"><p>Cancel any time. Donations are tax deductible. <a href="/finances">See our finances</a>.</p></div></div></section></div></div></figure><figure class="preview"><figcaption>Four plans, Subtle background</figcaption><div class="frame-scroll"><div class="frame"><section data-block="pricing" data-ground="light" data-tone="muted" class="bg-muted text-ink" data-slot="tones.muted section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Membership</h2></div><ul class="grid gap-5 @min-[640px]:grid-cols-2 @min-[1024px]:grid-cols-3 data-[count=many]:@min-[1024px]:grid-cols-4" data-slot="pricing.list" data-count="many"><li class="flex flex-col gap-4 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0 data-highlight:ring-2 data-highlight:ring-accent" data-slot="pricing.plan"><h3 class="text-xl font-semibold" data-slot="pricing.name">Neighbor</h3><p data-slot="pricing.price"><span class="text-4xl font-bold" data-slot="pricing.amount">$10</span><span class="ml-1" data-slot="pricing.period">per month</span></p><p class="leading-relaxed" data-slot="pricing.description">For anyone who wants to help keep dinner free.</p><ul class="grid gap-2" data-slot="pricing.features"><li class="flex gap-2.5" data-slot="pricing.feature"><span aria-hidden="true" class="text-highlight before:content-['✓'] on-dark:text-current" data-slot="pricing.check"></span>Monthly newsletter</li><li class="flex gap-2.5" data-slot="pricing.feature"><span aria-hidden="true" class="text-highlight before:content-['✓'] on-dark:text-current" data-slot="pricing.check"></span>Member night invitations</li></ul><div class="mt-auto pt-2" data-slot="pricing.actions"><a class="inline-block w-fit border-[1.5px] border-current/40 px-6 py-3.5 font-medium data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.secondary" href="/join">Join</a></div></li><li class="flex flex-col gap-4 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0 data-highlight:ring-2 data-highlight:ring-accent" data-slot="pricing.plan" data-highlight=""><p class="self-start bg-accent px-3 py-0.5 text-sm font-semibold text-accent-ink" data-slot="pricing.highlight">Most popular</p><h3 class="text-xl font-semibold" data-slot="pricing.name">Friend</h3><p data-slot="pricing.price"><span class="text-4xl font-bold" data-slot="pricing.amount">$25</span><span class="ml-1" data-slot="pricing.period">per month</span></p><p class="leading-relaxed" data-slot="pricing.description">Covers a family's meals for a month.</p><ul class="grid gap-2" data-slot="pricing.features"><li class="flex gap-2.5" data-slot="pricing.feature"><span aria-hidden="true" class="text-highlight before:content-['✓'] on-dark:text-current" data-slot="pricing.check"></span>Everything in Neighbor</li><li class="flex gap-2.5" data-slot="pricing.feature"><span aria-hidden="true" class="text-highlight before:content-['✓'] on-dark:text-current" data-slot="pricing.check"></span>Name on the wall of friends</li><li class="flex gap-2.5" data-slot="pricing.feature"><span aria-hidden="true" class="text-highlight before:content-['✓'] on-dark:text-current" data-slot="pricing.check"></span>Two guest passes</li></ul><div class="mt-auto pt-2" data-slot="pricing.actions"><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" href="/join">Join</a></div></li><li class="flex flex-col gap-4 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0 data-highlight:ring-2 data-highlight:ring-accent" data-slot="pricing.plan"><h3 class="text-xl font-semibold" data-slot="pricing.name">Partner</h3><p data-slot="pricing.price"><span class="text-4xl font-bold" data-slot="pricing.amount">Let's talk</span></p><p class="leading-relaxed" data-slot="pricing.description">For businesses that sponsor a program.</p><ul class="grid gap-2" data-slot="pricing.features"><li class="flex gap-2.5" data-slot="pricing.feature"><span aria-hidden="true" class="text-highlight before:content-['✓'] on-dark:text-current" data-slot="pricing.check"></span>Everything in Friend</li><li class="flex gap-2.5" data-slot="pricing.feature"><span aria-hidden="true" class="text-highlight before:content-['✓'] on-dark:text-current" data-slot="pricing.check"></span>Logo on the website</li></ul><div class="mt-auto pt-2" data-slot="pricing.actions"><a class="inline-block w-fit border-[1.5px] border-current/40 px-6 py-3.5 font-medium data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.secondary" href="/contact">Contact us</a></div></li><li class="flex flex-col gap-4 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0 data-highlight:ring-2 data-highlight:ring-accent" data-slot="pricing.plan"><h3 class="text-xl font-semibold" data-slot="pricing.name">Patron</h3><p data-slot="pricing.price"><span class="text-4xl font-bold" data-slot="pricing.amount">$100</span><span class="ml-1" data-slot="pricing.period">per month</span></p><ul class="grid gap-2" data-slot="pricing.features"><li class="flex gap-2.5" data-slot="pricing.feature"><span aria-hidden="true" class="text-highlight before:content-['✓'] on-dark:text-current" data-slot="pricing.check"></span>Everything in Friend</li><li class="flex gap-2.5" data-slot="pricing.feature"><span aria-hidden="true" class="text-highlight before:content-['✓'] on-dark:text-current" data-slot="pricing.check"></span>An annual dinner with the cooks</li></ul><div class="mt-auto pt-2" data-slot="pricing.actions"><a class="inline-block w-fit border-[1.5px] border-current/40 px-6 py-3.5 font-medium data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.secondary" href="/join">Join</a></div></li></ul></div></section></div></div></figure><figure class="preview"><figcaption>Dark background</figcaption><div class="frame-scroll"><div class="frame"><section data-block="pricing" data-ground="dark" data-tone="inverse" class="bg-inverse text-inverse-ink" data-slot="tones.inverse section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Membership</h2></div><ul class="grid gap-5 @min-[640px]:grid-cols-2 @min-[1024px]:grid-cols-3 data-[count=many]:@min-[1024px]:grid-cols-4" data-slot="pricing.list" data-count="few"><li class="flex flex-col gap-4 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0 data-highlight:ring-2 data-highlight:ring-accent" data-slot="pricing.plan"><h3 class="text-xl font-semibold" data-slot="pricing.name">Neighbor</h3><p data-slot="pricing.price"><span class="text-4xl font-bold" data-slot="pricing.amount">$10</span><span class="ml-1" data-slot="pricing.period">per month</span></p><p class="leading-relaxed" data-slot="pricing.description">For anyone who wants to help keep dinner free.</p><ul class="grid gap-2" data-slot="pricing.features"><li class="flex gap-2.5" data-slot="pricing.feature"><span aria-hidden="true" class="text-highlight before:content-['✓'] on-dark:text-current" data-slot="pricing.check"></span>Monthly newsletter</li><li class="flex gap-2.5" data-slot="pricing.feature"><span aria-hidden="true" class="text-highlight before:content-['✓'] on-dark:text-current" data-slot="pricing.check"></span>Member night invitations</li></ul><div class="mt-auto pt-2" data-slot="pricing.actions"><a class="inline-block w-fit border-[1.5px] border-current/40 px-6 py-3.5 font-medium data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.secondary" href="/join">Join</a></div></li><li class="flex flex-col gap-4 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0 data-highlight:ring-2 data-highlight:ring-accent" data-slot="pricing.plan" data-highlight=""><p class="self-start bg-accent px-3 py-0.5 text-sm font-semibold text-accent-ink" data-slot="pricing.highlight">Most popular</p><h3 class="text-xl font-semibold" data-slot="pricing.name">Friend</h3><p data-slot="pricing.price"><span class="text-4xl font-bold" data-slot="pricing.amount">$25</span><span class="ml-1" data-slot="pricing.period">per month</span></p><p class="leading-relaxed" data-slot="pricing.description">Covers a family's meals for a month.</p><ul class="grid gap-2" data-slot="pricing.features"><li class="flex gap-2.5" data-slot="pricing.feature"><span aria-hidden="true" class="text-highlight before:content-['✓'] on-dark:text-current" data-slot="pricing.check"></span>Everything in Neighbor</li><li class="flex gap-2.5" data-slot="pricing.feature"><span aria-hidden="true" class="text-highlight before:content-['✓'] on-dark:text-current" data-slot="pricing.check"></span>Name on the wall of friends</li><li class="flex gap-2.5" data-slot="pricing.feature"><span aria-hidden="true" class="text-highlight before:content-['✓'] on-dark:text-current" data-slot="pricing.check"></span>Two guest passes</li></ul><div class="mt-auto pt-2" data-slot="pricing.actions"><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" href="/join">Join</a></div></li><li class="flex flex-col gap-4 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0 data-highlight:ring-2 data-highlight:ring-accent" data-slot="pricing.plan"><h3 class="text-xl font-semibold" data-slot="pricing.name">Partner</h3><p data-slot="pricing.price"><span class="text-4xl font-bold" data-slot="pricing.amount">Let's talk</span></p><p class="leading-relaxed" data-slot="pricing.description">For businesses that sponsor a program.</p><ul class="grid gap-2" data-slot="pricing.features"><li class="flex gap-2.5" data-slot="pricing.feature"><span aria-hidden="true" class="text-highlight before:content-['✓'] on-dark:text-current" data-slot="pricing.check"></span>Everything in Friend</li><li class="flex gap-2.5" data-slot="pricing.feature"><span aria-hidden="true" class="text-highlight before:content-['✓'] on-dark:text-current" data-slot="pricing.check"></span>Logo on the website</li></ul><div class="mt-auto pt-2" data-slot="pricing.actions"><a class="inline-block w-fit border-[1.5px] border-current/40 px-6 py-3.5 font-medium data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.secondary" href="/contact">Contact us</a></div></li></ul></div></section></div></div></figure>
|
|
1353
|
+
<div class="spec">
|
|
1354
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Eyebrow</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Heading</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Intro</td><td>Text</td><td>Optional</td><td></td></tr><tr><td>Plans</td><td>List of plan items</td><td></td><td>Up to six. Put the one you recommend in the middle.</td></tr><tr><td class="nested">Name</td><td>Short text</td><td>Required</td><td></td></tr><tr><td class="nested">Price</td><td>Short text</td><td>Required</td><td>Any text: "Free", "From $500" or "Let's talk" all work.</td></tr><tr><td class="nested">Price note</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td class="nested">Who it's for</td><td>Text</td><td>Optional</td><td></td></tr><tr><td class="nested">What's included</td><td>List, one per line</td><td>Optional</td><td>One item per line.</td></tr><tr><td class="nested">Button</td><td>Button or link</td><td>Optional</td><td></td></tr><tr><td class="nested">Badge</td><td>Short text</td><td>Optional</td><td>Highlights this plan.</td></tr><tr><td>Small print</td><td>Rich text</td><td>Optional</td><td></td></tr><tr><td>Background</td><td>Choice</td><td>Required</td><td>Standard · Subtle (separates it from the section above) · Dark · Brand color</td></tr></tbody></table></div></div>
|
|
1355
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.default</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>heading.root</code></li><li><code>heading.eyebrow</code></li><li><code>heading.title</code></li><li><code>heading.intro</code></li><li><code>pricing.list</code></li><li><code>pricing.plan</code></li><li><code>pricing.name</code></li><li><code>pricing.price</code></li><li><code>pricing.amount</code></li><li><code>pricing.period</code></li><li><code>pricing.description</code></li><li><code>pricing.features</code></li><li><code>pricing.feature</code></li><li><code>pricing.check</code></li><li><code>pricing.actions</code></li><li><code>button.secondary</code></li><li><code>pricing.highlight</code></li><li><code>button.primary</code></li><li><code>pricing.footnote</code></li><li><code>tones.muted</code></li><li><code>tones.inverse</code></li></ul></div>
|
|
1356
|
+
</div>
|
|
1357
|
+
</article><article class="entry" id="block-projects">
|
|
1358
|
+
<header><h3>Projects</h3><p>Portfolio work with screenshots, live links, roles and the tools used.</p></header>
|
|
1359
|
+
<figure class="preview"><figcaption>Showcase (large images, alternating sides)</figcaption><div class="frame-scroll"><div class="frame"><section data-block="projects" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><p class="mb-3 text-sm font-semibold" data-slot="heading.eyebrow">Our work</p><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">What we've built together</h2><p class="mt-4 text-lg leading-relaxed" data-slot="heading.intro">Programs that started in the kitchen and grew.</p></div><ul class="grid gap-14" data-slot="projects.showcaseList" data-layout="showcase"><li class="grid items-center gap-8 @min-[768px]:grid-cols-2" data-slot="projects.showcaseItem"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[16/10] w-full object-cover object-top in-data-[layout=grid]:mb-2 @min-[768px]:in-data-[flip]:order-2" data-slot="projects.image"/><div class="flex flex-col gap-3" data-slot="projects.text"><div class="flex flex-wrap items-center gap-3" data-slot="projects.top"><h3 class="text-xl font-semibold" data-slot="projects.name">Riverside Food Hub</h3><span class="bg-accent px-3 py-0.5 text-sm font-semibold text-accent-ink" data-slot="projects.status">Live</span></div><p class="text-sm font-semibold" data-slot="projects.role">Lead partner</p><div class="prose text-lg leading-relaxed" data-slot="projects.description"><p>A shared cold store that lets six pantries buy together and <strong>waste less</strong>.</p></div><ul class="flex flex-wrap gap-2" data-slot="projects.stack"><li class="bg-surface px-2.5 py-1 text-sm ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="projects.stackItem">Cold storage</li><li class="bg-surface px-2.5 py-1 text-sm ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="projects.stackItem">Delivery van</li><li class="bg-surface px-2.5 py-1 text-sm ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="projects.stackItem">Shared ordering</li></ul><a href="https://example.org/hub" class="mt-auto pt-2 font-semibold underline after:content-['_→']" data-slot="projects.link">Visit Riverside Food Hub</a></div></li><li class="grid items-center gap-8 @min-[768px]:grid-cols-2" data-slot="projects.showcaseItem" data-flip=""><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[16/10] w-full object-cover object-top in-data-[layout=grid]:mb-2 @min-[768px]:in-data-[flip]:order-2" data-slot="projects.image"/><div class="flex flex-col gap-3" data-slot="projects.text"><div class="flex flex-wrap items-center gap-3" data-slot="projects.top"><h3 class="text-xl font-semibold" data-slot="projects.name">Lunch Box Library</h3><span class="bg-accent px-3 py-0.5 text-sm font-semibold text-accent-ink" data-slot="projects.status">2024–2026</span></div><p class="text-sm font-semibold" data-slot="projects.role">Program designer</p><div class="prose text-lg leading-relaxed" data-slot="projects.description"><p>Reusable lunch boxes that families borrow and return at any school.</p></div><ul class="flex flex-wrap gap-2" data-slot="projects.stack"><li class="bg-surface px-2.5 py-1 text-sm ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="projects.stackItem">Schools</li><li class="bg-surface px-2.5 py-1 text-sm ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="projects.stackItem">Volunteers</li></ul><a href="https://example.org/lunch" class="mt-auto pt-2 font-semibold underline after:content-['_→']" data-slot="projects.link">Visit Lunch Box Library</a></div></li><li class="grid items-center gap-8 @min-[768px]:grid-cols-2" data-slot="projects.showcaseItem"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[16/10] w-full object-cover object-top in-data-[layout=grid]:mb-2 @min-[768px]:in-data-[flip]:order-2" data-slot="projects.image"/><div class="flex flex-col gap-3" data-slot="projects.text"><div class="flex flex-wrap items-center gap-3" data-slot="projects.top"><h3 class="text-xl font-semibold" data-slot="projects.name">Seed Exchange</h3></div><div class="prose text-lg leading-relaxed" data-slot="projects.description"><p>A yearly swap for seeds saved from the kitchen garden.</p></div></div></li></ul></div></section></div></div></figure><figure class="preview"><figcaption>Grid (compact cards), Subtle background</figcaption><div class="frame-scroll"><div class="frame"><section data-block="projects" data-ground="light" data-tone="muted" class="bg-muted text-ink" data-slot="tones.muted section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Our work</h2></div><ul class="grid gap-5 @min-[640px]:grid-cols-2 @min-[1024px]:grid-cols-3" data-slot="projects.gridList" data-layout="grid"><li class="flex flex-col gap-3 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="projects.gridItem"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[16/10] w-full object-cover object-top in-data-[layout=grid]:mb-2 @min-[768px]:in-data-[flip]:order-2" data-slot="projects.image"/><div class="flex flex-col gap-3" data-slot="projects.text"><div class="flex flex-wrap items-center gap-3" data-slot="projects.top"><h3 class="text-xl font-semibold" data-slot="projects.name">Riverside Food Hub</h3><span class="bg-accent px-3 py-0.5 text-sm font-semibold text-accent-ink" data-slot="projects.status">Live</span></div><p class="text-sm font-semibold" data-slot="projects.role">Lead partner</p><div class="prose text-lg leading-relaxed" data-slot="projects.description"><p>A shared cold store that lets six pantries buy together and <strong>waste less</strong>.</p></div><ul class="flex flex-wrap gap-2" data-slot="projects.stack"><li class="bg-surface px-2.5 py-1 text-sm ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="projects.stackItem">Cold storage</li><li class="bg-surface px-2.5 py-1 text-sm ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="projects.stackItem">Delivery van</li><li class="bg-surface px-2.5 py-1 text-sm ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="projects.stackItem">Shared ordering</li></ul><a href="https://example.org/hub" class="mt-auto pt-2 font-semibold underline after:content-['_→']" data-slot="projects.link">Visit Riverside Food Hub</a></div></li><li class="flex flex-col gap-3 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="projects.gridItem"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[16/10] w-full object-cover object-top in-data-[layout=grid]:mb-2 @min-[768px]:in-data-[flip]:order-2" data-slot="projects.image"/><div class="flex flex-col gap-3" data-slot="projects.text"><div class="flex flex-wrap items-center gap-3" data-slot="projects.top"><h3 class="text-xl font-semibold" data-slot="projects.name">Lunch Box Library</h3><span class="bg-accent px-3 py-0.5 text-sm font-semibold text-accent-ink" data-slot="projects.status">2024–2026</span></div><p class="text-sm font-semibold" data-slot="projects.role">Program designer</p><div class="prose text-lg leading-relaxed" data-slot="projects.description"><p>Reusable lunch boxes that families borrow and return at any school.</p></div><ul class="flex flex-wrap gap-2" data-slot="projects.stack"><li class="bg-surface px-2.5 py-1 text-sm ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="projects.stackItem">Schools</li><li class="bg-surface px-2.5 py-1 text-sm ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="projects.stackItem">Volunteers</li></ul><a href="https://example.org/lunch" class="mt-auto pt-2 font-semibold underline after:content-['_→']" data-slot="projects.link">Visit Lunch Box Library</a></div></li><li class="flex flex-col gap-3 p-7 bg-surface ring-1 ring-line on-dark:bg-white/10 on-dark:ring-0" data-slot="projects.gridItem"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[16/10] w-full object-cover object-top in-data-[layout=grid]:mb-2 @min-[768px]:in-data-[flip]:order-2" data-slot="projects.image"/><div class="flex flex-col gap-3" data-slot="projects.text"><div class="flex flex-wrap items-center gap-3" data-slot="projects.top"><h3 class="text-xl font-semibold" data-slot="projects.name">Seed Exchange</h3></div><div class="prose text-lg leading-relaxed" data-slot="projects.description"><p>A yearly swap for seeds saved from the kitchen garden.</p></div></div></li></ul></div></section></div></div></figure>
|
|
1360
|
+
<div class="spec">
|
|
1361
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Eyebrow</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Heading</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Intro</td><td>Text</td><td>Optional</td><td></td></tr><tr><td>Projects</td><td>List of project items</td><td></td><td></td></tr><tr><td class="nested">Name</td><td>Short text</td><td>Required</td><td></td></tr><tr><td class="nested">Description</td><td>Rich text</td><td>Required</td><td></td></tr><tr><td class="nested">Screenshot</td><td>Image</td><td>Optional</td><td></td></tr><tr><td class="nested">Live link</td><td>Web address</td><td>Optional</td><td></td></tr><tr><td class="nested">Role</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td class="nested">Badge</td><td>Short text</td><td>Optional</td><td>A short label such as "Beta" or "2019–2021".</td></tr><tr><td class="nested">Built with</td><td>List, one per line</td><td>Optional</td><td>One tool or platform per line.</td></tr><tr><td>Layout</td><td>Choice</td><td>Required</td><td>Showcase (large screenshots) · Grid (compact cards)</td></tr><tr><td>Background</td><td>Choice</td><td>Required</td><td>Standard · Subtle (separates it from the section above) · Dark · Brand color</td></tr></tbody></table></div></div>
|
|
1362
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.default</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>heading.root</code></li><li><code>heading.eyebrow</code></li><li><code>heading.title</code></li><li><code>heading.intro</code></li><li><code>projects.showcaseList</code></li><li><code>projects.showcaseItem</code></li><li><code>projects.image</code></li><li><code>projects.text</code></li><li><code>projects.top</code></li><li><code>projects.name</code></li><li><code>projects.status</code></li><li><code>projects.role</code></li><li><code>projects.description</code></li><li><code>projects.stack</code></li><li><code>projects.stackItem</code></li><li><code>projects.link</code></li><li><code>tones.muted</code></li><li><code>projects.gridList</code></li><li><code>projects.gridItem</code></li></ul></div>
|
|
1363
|
+
</div>
|
|
1364
|
+
</article><article class="entry" id="block-quote">
|
|
1365
|
+
<header><h3>Quote</h3><p>A testimonial or quote with who said it.</p></header>
|
|
1366
|
+
<figure class="preview"><figcaption>With photo, Standard background</figcaption><div class="frame-scroll"><div class="frame"><section data-block="quote" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><figure class="flex max-w-3xl flex-col gap-6" data-slot="quote.figure"><blockquote class="text-2xl font-semibold leading-snug before:content-['“'] after:content-['”'] @min-[640px]:text-3xl" data-slot="quote.text">The kitchen is the first place in this town where I knew everybody's name.</blockquote><figcaption class="flex items-center gap-4" data-slot="quote.caption"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22600%22%20viewBox%3D%220%200%20600%20600%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L600%20600M600%200L0%20600%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Rosa Delgado" width="600" height="600" loading="lazy" fetchPriority="auto" decoding="async" class="size-14 object-cover" data-slot="quote.image"/><span><span class="block font-semibold" data-slot="quote.name">Rosa Delgado</span><span class="block" data-slot="quote.role">Volunteer since 2019</span></span></figcaption></figure></div></section></div></div></figure><figure class="preview"><figcaption>Name only, Subtle background</figcaption><div class="frame-scroll"><div class="frame"><section data-block="quote" data-ground="light" data-tone="muted" class="bg-muted text-ink" data-slot="tones.muted section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><figure class="flex max-w-3xl flex-col gap-6" data-slot="quote.figure"><blockquote class="text-2xl font-semibold leading-snug before:content-['“'] after:content-['”'] @min-[640px]:text-3xl" data-slot="quote.text">My kids ask every week whether it's Tuesday yet.</blockquote><figcaption class="flex items-center gap-4" data-slot="quote.caption"><span><span class="block font-semibold" data-slot="quote.name">James Okafor</span></span></figcaption></figure></div></section></div></div></figure><figure class="preview"><figcaption>Dark background</figcaption><div class="frame-scroll"><div class="frame"><section data-block="quote" data-ground="dark" data-tone="inverse" class="bg-inverse text-inverse-ink" data-slot="tones.inverse section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><figure class="flex max-w-3xl flex-col gap-6" data-slot="quote.figure"><blockquote class="text-2xl font-semibold leading-snug before:content-['“'] after:content-['”'] @min-[640px]:text-3xl" data-slot="quote.text">Nobody asks why you came. They just hand you a plate.</blockquote><figcaption class="flex items-center gap-4" data-slot="quote.caption"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22600%22%20viewBox%3D%220%200%20600%20600%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L600%20600M600%200L0%20600%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Rosa Delgado" width="600" height="600" loading="lazy" fetchPriority="auto" decoding="async" class="size-14 object-cover" data-slot="quote.image"/><span><span class="block font-semibold" data-slot="quote.name">Rosa Delgado</span><span class="block" data-slot="quote.role">Volunteer since 2019</span></span></figcaption></figure></div></section></div></div></figure><figure class="preview"><figcaption>Brand color, no name</figcaption><div class="frame-scroll"><div class="frame"><section data-block="quote" data-ground="dark" data-tone="accent" class="bg-accent text-accent-ink" data-slot="tones.accent section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><figure class="flex max-w-3xl flex-col gap-6" data-slot="quote.figure"><blockquote class="text-2xl font-semibold leading-snug before:content-['“'] after:content-['”'] @min-[640px]:text-3xl" data-slot="quote.text">Nobody asks why you came. They just hand you a plate.</blockquote></figure></div></section></div></div></figure>
|
|
1367
|
+
<div class="spec">
|
|
1368
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Quote</td><td>Text</td><td>Required</td><td></td></tr><tr><td>Name</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Role</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Photo</td><td>Image</td><td>Optional</td><td></td></tr><tr><td>Background</td><td>Choice</td><td>Required</td><td>Standard · Subtle (separates it from the section above) · Dark · Brand color</td></tr></tbody></table></div></div>
|
|
1369
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.default</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>quote.figure</code></li><li><code>quote.text</code></li><li><code>quote.caption</code></li><li><code>quote.image</code></li><li><code>quote.name</code></li><li><code>quote.role</code></li><li><code>tones.muted</code></li><li><code>tones.inverse</code></li><li><code>tones.accent</code></li></ul></div>
|
|
1370
|
+
</div>
|
|
1371
|
+
</article><article class="entry" id="block-people">
|
|
1372
|
+
<header><h3>People</h3><p>Team members, staff, or volunteers with photos.</p></header>
|
|
1373
|
+
<figure class="preview"><figcaption>Photos, roles and bios</figcaption><div class="frame-scroll"><div class="frame"><section data-block="people" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><p class="mb-3 text-sm font-semibold" data-slot="heading.eyebrow">Who we are</p><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Our team</h2><p class="mt-4 text-lg leading-relaxed" data-slot="heading.intro">A small staff and a lot of volunteers.</p></div><ul class="grid gap-8 @min-[640px]:grid-cols-2 @min-[1024px]:grid-cols-3" data-slot="people.list"><li class="flex flex-col gap-3" data-slot="people.person"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22600%22%20viewBox%3D%220%200%20600%20600%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L600%20600M600%200L0%20600%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Dana Whitfield" width="600" height="600" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-square w-full object-cover" data-slot="people.image"/><div><h3 class="text-xl font-semibold" data-slot="people.name">Dana Whitfield</h3><p data-slot="people.role">Executive Director</p></div><p class="leading-relaxed" data-slot="people.bio">Started the kitchen with two stoves and a borrowed van.</p></li><li class="flex flex-col gap-3" data-slot="people.person"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22600%22%20viewBox%3D%220%200%20600%20600%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L600%20600M600%200L0%20600%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Marco Reyes" width="600" height="600" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-square w-full object-cover" data-slot="people.image"/><div><h3 class="text-xl font-semibold" data-slot="people.name">Marco Reyes</h3><p data-slot="people.role">Head Cook</p></div><p class="leading-relaxed" data-slot="people.bio">Cooked in restaurants for twenty years before coming home to Millbrook.</p></li><li class="flex flex-col gap-3" data-slot="people.person"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22600%22%20viewBox%3D%220%200%20600%20600%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L600%20600M600%200L0%20600%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Priya Nair" width="600" height="600" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-square w-full object-cover" data-slot="people.image"/><div><h3 class="text-xl font-semibold" data-slot="people.name">Priya Nair</h3><p data-slot="people.role">Volunteer Coordinator</p></div><p class="leading-relaxed" data-slot="people.bio">Knows every volunteer by name, and what they're best at.</p></li></ul></div></section></div></div></figure><figure class="preview"><figcaption>Names and roles only</figcaption><div class="frame-scroll"><div class="frame"><section data-block="people" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Our board</h2></div><ul class="grid gap-8 @min-[640px]:grid-cols-2 @min-[1024px]:grid-cols-3" data-slot="people.list"><li class="flex flex-col gap-3" data-slot="people.person"><div><h3 class="text-xl font-semibold" data-slot="people.name">Dana Whitfield</h3><p data-slot="people.role">Executive Director</p></div></li><li class="flex flex-col gap-3" data-slot="people.person"><div><h3 class="text-xl font-semibold" data-slot="people.name">Marco Reyes</h3><p data-slot="people.role">Head Cook</p></div></li><li class="flex flex-col gap-3" data-slot="people.person"><div><h3 class="text-xl font-semibold" data-slot="people.name">Priya Nair</h3><p data-slot="people.role">Volunteer Coordinator</p></div></li></ul></div></section></div></div></figure>
|
|
1374
|
+
<div class="spec">
|
|
1375
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Eyebrow</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Heading</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Intro</td><td>Text</td><td>Optional</td><td></td></tr><tr><td>People</td><td>List of person items</td><td></td><td></td></tr><tr><td class="nested">Name</td><td>Short text</td><td>Required</td><td></td></tr><tr><td class="nested">Role</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td class="nested">Photo</td><td>Image</td><td>Optional</td><td></td></tr><tr><td class="nested">Short bio</td><td>Text</td><td>Optional</td><td></td></tr></tbody></table></div></div>
|
|
1376
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.default</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>heading.root</code></li><li><code>heading.eyebrow</code></li><li><code>heading.title</code></li><li><code>heading.intro</code></li><li><code>people.list</code></li><li><code>people.person</code></li><li><code>people.image</code></li><li><code>people.name</code></li><li><code>people.role</code></li><li><code>people.bio</code></li></ul></div>
|
|
1377
|
+
</div>
|
|
1378
|
+
</article><article class="entry" id="block-logos">
|
|
1379
|
+
<header><h3>Logos</h3><p>Logo wall for clients, sponsors, or partners.</p></header>
|
|
1380
|
+
<figure class="preview"><figcaption>Logos, some linked</figcaption><div class="frame-scroll"><div class="frame"><section data-block="logos" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Our partners</h2><p class="mt-4 text-lg leading-relaxed" data-slot="heading.intro">We couldn't do this without them.</p></div><ul class="flex flex-wrap items-center gap-x-12 gap-y-6" data-slot="logos.list"><li><a href="https://example.org" rel="noopener" class="block" data-slot="logos.link"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%2240%22%20viewBox%3D%220%200%20160%2040%22%3E%3Crect%20width%3D%22160%22%20height%3D%2240%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Ctext%20x%3D%2280%22%20y%3D%2225%22%20font-family%3D%22sans-serif%22%20font-size%3D%2214%22%20fill%3D%22%23595959%22%20text-anchor%3D%22middle%22%3EFood%20Bank%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Food Bank" loading="lazy" fetchPriority="auto" decoding="async" class="h-10 w-auto" data-slot="logos.image"/></a></li><li><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%2240%22%20viewBox%3D%220%200%20160%2040%22%3E%3Crect%20width%3D%22160%22%20height%3D%2240%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Ctext%20x%3D%2280%22%20y%3D%2225%22%20font-family%3D%22sans-serif%22%20font-size%3D%2214%22%20fill%3D%22%23595959%22%20text-anchor%3D%22middle%22%3ECity%20Farm%3C%2Ftext%3E%3C%2Fsvg%3E" alt="City Farm" loading="lazy" fetchPriority="auto" decoding="async" class="h-10 w-auto" data-slot="logos.image"/></li><li><a href="https://example.org" rel="noopener" class="block" data-slot="logos.link"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%2240%22%20viewBox%3D%220%200%20160%2040%22%3E%3Crect%20width%3D%22160%22%20height%3D%2240%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Ctext%20x%3D%2280%22%20y%3D%2225%22%20font-family%3D%22sans-serif%22%20font-size%3D%2214%22%20fill%3D%22%23595959%22%20text-anchor%3D%22middle%22%3ESchool%20District%3C%2Ftext%3E%3C%2Fsvg%3E" alt="School District" loading="lazy" fetchPriority="auto" decoding="async" class="h-10 w-auto" data-slot="logos.image"/></a></li><li><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%2240%22%20viewBox%3D%220%200%20160%2040%22%3E%3Crect%20width%3D%22160%22%20height%3D%2240%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Ctext%20x%3D%2280%22%20y%3D%2225%22%20font-family%3D%22sans-serif%22%20font-size%3D%2214%22%20fill%3D%22%23595959%22%20text-anchor%3D%22middle%22%3ERotary%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Rotary" loading="lazy" fetchPriority="auto" decoding="async" class="h-10 w-auto" data-slot="logos.image"/></li><li><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%2240%22%20viewBox%3D%220%200%20160%2040%22%3E%3Crect%20width%3D%22160%22%20height%3D%2240%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Ctext%20x%3D%2280%22%20y%3D%2225%22%20font-family%3D%22sans-serif%22%20font-size%3D%2214%22%20fill%3D%22%23595959%22%20text-anchor%3D%22middle%22%3ELibrary%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Library" loading="lazy" fetchPriority="auto" decoding="async" class="h-10 w-auto" data-slot="logos.image"/></li></ul></div></section></div></div></figure><figure class="preview"><figcaption>Names, when there's no logo</figcaption><div class="frame-scroll"><div class="frame"><section data-block="logos" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><ul class="flex flex-wrap items-center gap-x-12 gap-y-6" data-slot="logos.list"><li><a href="https://example.org" rel="noopener" class="block" data-slot="logos.link"><span class="text-lg font-semibold" data-slot="logos.name">Millbrook Food Bank</span></a></li><li><span class="text-lg font-semibold" data-slot="logos.name">City Farm</span></li><li><span class="text-lg font-semibold" data-slot="logos.name">Rotary Club</span></li></ul></div></section></div></div></figure>
|
|
1381
|
+
<div class="spec">
|
|
1382
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Heading</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Intro</td><td>Text</td><td>Optional</td><td></td></tr><tr><td>Logos</td><td>List of logo items</td><td></td><td></td></tr><tr><td class="nested">Name</td><td>Short text</td><td>Required</td><td></td></tr><tr><td class="nested">Logo</td><td>Image</td><td>Optional</td><td>Without a logo, the name is shown.</td></tr><tr><td class="nested">Website</td><td>Web address</td><td>Optional</td><td></td></tr></tbody></table></div></div>
|
|
1383
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.default</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>heading.root</code></li><li><code>heading.title</code></li><li><code>heading.intro</code></li><li><code>logos.list</code></li><li><code>logos.link</code></li><li><code>logos.image</code></li><li><code>logos.name</code></li></ul></div>
|
|
1384
|
+
</div>
|
|
1385
|
+
</article><article class="entry" id="block-collectionList">
|
|
1386
|
+
<header><h3>Collection list</h3><p>Latest entries from a collection, like a blog or case studies.</p></header>
|
|
1387
|
+
<figure class="preview"><figcaption>Cards with images</figcaption><div class="frame-scroll"><div class="frame"><section data-block="collectionList" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><p class="mb-3 text-sm font-semibold" data-slot="heading.eyebrow">From the kitchen</p><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Latest stories</h2><p class="mt-4 text-lg leading-relaxed" data-slot="heading.intro">News and recipes from our volunteers.</p></div><ul class="grid gap-5 @min-[640px]:grid-cols-2 @min-[1024px]:grid-cols-3" data-slot="collectionList.cards"><li class="relative flex flex-col overflow-hidden bg-surface ring-1 ring-line" data-slot="collectionList.card"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[16/10] w-full object-cover" data-slot="collectionList.image"/><div class="flex flex-1 flex-col gap-2 p-6" data-slot="collectionList.body"><p class="text-sm font-semibold text-highlight" data-slot="collectionList.date">September 14, 2026</p><h3 class="text-xl font-semibold" data-slot="collectionList.title"><a class="after:absolute after:inset-0" data-slot="collectionList.link" href="/stories/first-year">What a first year of shared meals taught us</a></h3><p class="leading-relaxed" data-slot="collectionList.summary">What we learned this month, from the volunteers who were there and the families they cooked for.</p><ul class="mt-auto flex flex-wrap gap-2 pt-2" data-slot="collectionList.tags"><li class="bg-muted px-3 py-1 text-xs font-semibold" data-slot="collectionList.tag">Community</li><li class="bg-muted px-3 py-1 text-xs font-semibold" data-slot="collectionList.tag">Meals</li></ul></div></li><li class="relative flex flex-col overflow-hidden bg-surface ring-1 ring-line" data-slot="collectionList.card"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[16/10] w-full object-cover" data-slot="collectionList.image"/><div class="flex flex-1 flex-col gap-2 p-6" data-slot="collectionList.body"><p class="text-sm font-semibold text-highlight" data-slot="collectionList.date">August 2, 2026</p><h3 class="text-xl font-semibold" data-slot="collectionList.title"><a class="after:absolute after:inset-0" data-slot="collectionList.link" href="/stories/garden">The garden that feeds forty families</a></h3><p class="leading-relaxed" data-slot="collectionList.summary">What we learned this month, from the volunteers who were there and the families they cooked for.</p><ul class="mt-auto flex flex-wrap gap-2 pt-2" data-slot="collectionList.tags"><li class="bg-muted px-3 py-1 text-xs font-semibold" data-slot="collectionList.tag">Garden</li></ul></div></li><li class="relative flex flex-col overflow-hidden bg-surface ring-1 ring-line" data-slot="collectionList.card"><div class="flex flex-1 flex-col gap-2 p-6" data-slot="collectionList.body"><p class="text-sm font-semibold text-highlight" data-slot="collectionList.date">June 21, 2026</p><h3 class="text-xl font-semibold" data-slot="collectionList.title"><a class="after:absolute after:inset-0" data-slot="collectionList.link" href="/stories/ovens">Why we need new ovens</a></h3><p class="leading-relaxed" data-slot="collectionList.summary">What we learned this month, from the volunteers who were there and the families they cooked for.</p></div></li></ul><a class="mt-8 inline-block font-semibold underline after:content-['_→']" data-slot="collectionList.more" href="/stories">All stories</a></div></section></div></div></figure><figure class="preview"><figcaption>Simple list</figcaption><div class="frame-scroll"><div class="frame"><section data-block="collectionList" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Latest stories</h2></div><ul class="max-w-3xl divide-y divide-line border-y border-line" data-slot="collectionList.list"><li class="py-5" data-slot="collectionList.listItem"><a class="text-lg font-semibold" data-slot="collectionList.listLink" href="/stories/first-year">What a first year of shared meals taught us</a><p class="mt-1" data-slot="collectionList.listMeta"><span class="font-semibold" data-slot="collectionList.listDate">September 14, 2026</span> · What we learned this month, from the volunteers who were there and the families they cooked for.</p></li><li class="py-5" data-slot="collectionList.listItem"><a class="text-lg font-semibold" data-slot="collectionList.listLink" href="/stories/garden">The garden that feeds forty families</a><p class="mt-1" data-slot="collectionList.listMeta"><span class="font-semibold" data-slot="collectionList.listDate">August 2, 2026</span> · What we learned this month, from the volunteers who were there and the families they cooked for.</p></li><li class="py-5" data-slot="collectionList.listItem"><a class="text-lg font-semibold" data-slot="collectionList.listLink" href="/stories/ovens">Why we need new ovens</a><p class="mt-1" data-slot="collectionList.listMeta"><span class="font-semibold" data-slot="collectionList.listDate">June 21, 2026</span> · What we learned this month, from the volunteers who were there and the families they cooked for.</p></li></ul><a class="mt-8 inline-block font-semibold underline after:content-['_→']" data-slot="collectionList.more" href="/stories">All stories</a></div></section></div></div></figure><figure class="preview"><figcaption>When there are none</figcaption><div class="frame-scroll"><div class="frame"><section data-block="collectionList" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Latest stories</h2></div><p class="text-lg" data-slot="collectionList.empty">Nothing here yet. Check back soon.</p></div></section></div></div></figure>
|
|
1388
|
+
<div class="spec">
|
|
1389
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Eyebrow</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Heading</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Intro</td><td>Text</td><td>Optional</td><td></td></tr><tr><td>Collection</td><td>One of the site's collections</td><td>Required</td><td></td></tr><tr><td>How many</td><td>Number</td><td>Required</td><td></td></tr><tr><td>Layout</td><td>Choice</td><td>Required</td><td>Cards with images · Simple list</td></tr><tr><td>Only this tag</td><td>Short text</td><td>Optional</td><td>Leave empty for every entry.</td></tr><tr><td>Only this category</td><td>One of the site's categories</td><td>Optional</td><td>E.g. Featured.</td></tr></tbody></table></div></div>
|
|
1390
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.default</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>heading.root</code></li><li><code>heading.eyebrow</code></li><li><code>heading.title</code></li><li><code>heading.intro</code></li><li><code>collectionList.cards</code></li><li><code>collectionList.card</code></li><li><code>collectionList.image</code></li><li><code>collectionList.body</code></li><li><code>collectionList.date</code></li><li><code>collectionList.title</code></li><li><code>collectionList.link</code></li><li><code>collectionList.summary</code></li><li><code>collectionList.tags</code></li><li><code>collectionList.tag</code></li><li><code>collectionList.more</code></li><li><code>collectionList.list</code></li><li><code>collectionList.listItem</code></li><li><code>collectionList.listLink</code></li><li><code>collectionList.listMeta</code></li><li><code>collectionList.listDate</code></li><li><code>collectionList.empty</code></li></ul></div>
|
|
1391
|
+
</div>
|
|
1392
|
+
</article><h2 class="group-title">Media</h2><article class="entry" id="block-gallery">
|
|
1393
|
+
<header><h3>Photo gallery</h3><p>Grid of photos.</p></header>
|
|
1394
|
+
<figure class="preview"><figcaption>3 across, with captions</figcaption><div class="frame-scroll"><div class="frame"><section data-block="gallery" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Life in the kitchen</h2><p class="mt-4 text-lg leading-relaxed" data-slot="heading.intro">A few photos from this year.</p></div><ul class="grid gap-4 @min-[640px]:grid-cols-2 data-[columns=3]:@min-[1024px]:grid-cols-3 data-[columns=4]:@min-[1024px]:grid-cols-4" data-slot="gallery.list" data-columns="3"><li><figure><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[4/3] w-full object-cover" data-slot="gallery.image"/><figcaption class="mt-2 text-sm" data-slot="gallery.caption">Tuesday dinner service</figcaption></figure></li><li><figure><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[4/3] w-full object-cover" data-slot="gallery.image"/></figure></li><li><figure><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[4/3] w-full object-cover" data-slot="gallery.image"/><figcaption class="mt-2 text-sm" data-slot="gallery.caption">Tuesday dinner service</figcaption></figure></li><li><figure><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[4/3] w-full object-cover" data-slot="gallery.image"/></figure></li><li><figure><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[4/3] w-full object-cover" data-slot="gallery.image"/><figcaption class="mt-2 text-sm" data-slot="gallery.caption">Tuesday dinner service</figcaption></figure></li><li><figure><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[4/3] w-full object-cover" data-slot="gallery.image"/></figure></li></ul></div></section></div></div></figure><figure class="preview"><figcaption>2 across (larger)</figcaption><div class="frame-scroll"><div class="frame"><section data-block="gallery" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><ul class="grid gap-4 @min-[640px]:grid-cols-2 data-[columns=3]:@min-[1024px]:grid-cols-3 data-[columns=4]:@min-[1024px]:grid-cols-4" data-slot="gallery.list" data-columns="2"><li><figure><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[4/3] w-full object-cover" data-slot="gallery.image"/></figure></li><li><figure><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[4/3] w-full object-cover" data-slot="gallery.image"/></figure></li></ul></div></section></div></div></figure><figure class="preview"><figcaption>4 across (smaller)</figcaption><div class="frame-scroll"><div class="frame"><section data-block="gallery" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><ul class="grid gap-4 @min-[640px]:grid-cols-2 data-[columns=3]:@min-[1024px]:grid-cols-3 data-[columns=4]:@min-[1024px]:grid-cols-4" data-slot="gallery.list" data-columns="4"><li><figure><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[4/3] w-full object-cover" data-slot="gallery.image"/></figure></li><li><figure><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[4/3] w-full object-cover" data-slot="gallery.image"/></figure></li><li><figure><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[4/3] w-full object-cover" data-slot="gallery.image"/></figure></li><li><figure><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[4/3] w-full object-cover" data-slot="gallery.image"/></figure></li></ul></div></section></div></div></figure>
|
|
1395
|
+
<div class="spec">
|
|
1396
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Heading</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Intro</td><td>Text</td><td>Optional</td><td></td></tr><tr><td>Photos</td><td>List of photo items</td><td></td><td></td></tr><tr><td class="nested">Photo</td><td>Image</td><td>Required</td><td></td></tr><tr><td class="nested">Caption</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Columns</td><td>Choice</td><td>Required</td><td>3 across · 2 across (larger photos) · 4 across (smaller photos)</td></tr></tbody></table></div></div>
|
|
1397
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.default</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>heading.root</code></li><li><code>heading.title</code></li><li><code>heading.intro</code></li><li><code>gallery.list</code></li><li><code>gallery.image</code></li><li><code>gallery.caption</code></li></ul></div>
|
|
1398
|
+
</div>
|
|
1399
|
+
</article><article class="entry" id="block-video">
|
|
1400
|
+
<header><h3>Video</h3><p>A YouTube or Vimeo video.</p></header>
|
|
1401
|
+
<figure class="preview"><figcaption>With heading and caption</figcaption><div class="frame-scroll"><div class="frame"><section data-block="video" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">A Tuesday at the kitchen</h2></div><figure class="max-w-4xl" data-slot="video.figure"><div class="aspect-video overflow-hidden bg-inverse" data-slot="video.frame"><div class="placeholder-frame size-full" style="">Video player</div></div><figcaption class="mt-3" data-slot="video.caption">Filmed by volunteers in the spring.</figcaption></figure></div></section></div></div></figure>
|
|
1402
|
+
<div class="spec">
|
|
1403
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Heading</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Video link</td><td>Web address</td><td>Required</td><td>Paste the link from YouTube or Vimeo.</td></tr><tr><td>Video title</td><td>Short text</td><td>Required</td><td>Describes the video for screen readers.</td></tr><tr><td>Caption</td><td>Short text</td><td>Optional</td><td></td></tr></tbody></table></div></div>
|
|
1404
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.default</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>heading.root</code></li><li><code>heading.title</code></li><li><code>video.figure</code></li><li><code>video.frame</code></li><li><code>video.caption</code></li></ul></div>
|
|
1405
|
+
</div>
|
|
1406
|
+
</article><article class="entry" id="block-embed">
|
|
1407
|
+
<header><h3>Embed</h3><p>Embed code from another service: a booking widget, a map, a social post, a playlist.</p></header>
|
|
1408
|
+
<figure class="preview"><figcaption>Narrow</figcaption><div class="frame-scroll"><div class="frame"><section data-block="embed" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><figure class="data-[width=narrow]:max-w-2xl data-[width=wide]:max-w-4xl" data-slot="embed.figure" data-width="narrow"><div class="placeholder-frame" data-slot="embed.frame" style="height:300px">Embedded content</div><figcaption class="mt-3" data-slot="embed.caption">Bookings are handled by another service.</figcaption></figure></div></section></div></div></figure><figure class="preview"><figcaption>Wide</figcaption><div class="frame-scroll"><div class="frame"><section data-block="embed" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><figure class="data-[width=narrow]:max-w-2xl data-[width=wide]:max-w-4xl" data-slot="embed.figure" data-width="wide"><div class="placeholder-frame" data-slot="embed.frame" style="height:300px">Embedded content</div></figure></div></section></div></div></figure><figure class="preview"><figcaption>Full width</figcaption><div class="frame-scroll"><div class="frame"><section data-block="embed" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><figure class="data-[width=narrow]:max-w-2xl data-[width=wide]:max-w-4xl" data-slot="embed.figure" data-width="full"><div class="placeholder-frame" data-slot="embed.frame" style="height:300px">Embedded content</div></figure></div></section></div></div></figure>
|
|
1409
|
+
<div class="spec">
|
|
1410
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Embed code</td><td>Text</td><td>Required</td><td>Paste the HTML the service gives you. It runs in its own sealed frame, so it can't affect the rest of the page.</td></tr><tr><td>Title</td><td>Short text</td><td>Required</td><td>Describes the embed for screen readers, e.g. Book a table.</td></tr><tr><td>Height (pixels)</td><td>Number</td><td>Required</td><td></td></tr><tr><td>Width</td><td>Choice</td><td>Required</td><td>Narrow · Wide · Full width</td></tr><tr><td>Caption</td><td>Short text</td><td>Optional</td><td></td></tr></tbody></table></div></div>
|
|
1411
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.default</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>embed.figure</code></li><li><code>embed.frame</code></li><li><code>embed.caption</code></li></ul></div>
|
|
1412
|
+
</div>
|
|
1413
|
+
</article><h2 class="group-title">Places & events</h2><article class="entry" id="block-location">
|
|
1414
|
+
<header><h3>Location</h3><p>Address, hours, map, and directions.</p></header>
|
|
1415
|
+
<figure class="preview"><figcaption>With a map</figcaption><div class="frame-scroll"><div class="frame"><section data-block="location" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><p class="mb-3 text-sm font-semibold" data-slot="heading.eyebrow">Visit us</p><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Find the kitchen</h2></div><div class="grid gap-10 @min-[768px]:grid-cols-2" data-slot="location.grid"><div class="flex flex-col gap-4 text-lg" data-slot="location.details"><h3 class="text-xl font-semibold" data-slot="location.name">Mill Street Kitchen</h3><address class="whitespace-pre-line not-italic" data-slot="location.address">410 Mill Street
|
|
1416
|
+
Millbrook, IL 60541</address><p class="whitespace-pre-line" data-slot="location.hours">Mon–Fri · 9am–5pm
|
|
1417
|
+
Dinner Tuesdays at 6pm</p><div class="prose text-lg" data-slot="location.notes"><p>Free parking behind the building. <strong>Step-free entrance</strong> on Mill Street.</p></div><a href="https://www.google.com/maps/dir/?api=1&destination=Mill%20Street%20Kitchen%2C%20410%20Mill%20Street%2C%20Millbrook%2C%20IL%2060541" rel="noopener" class="font-semibold text-highlight underline on-dark:text-current" data-slot="location.directions">Get directions</a></div><div class="relative overflow-hidden bg-muted [&_.maplibregl-map]:font-sans [&_.maplibregl-popup-close-button]:size-8 [&_.maplibregl-popup-close-button]:text-xl aspect-[4/3]" data-slot="map.frame location.map"><div class="size-full"></div></div></div></div></section></div></div></figure><figure class="preview"><figcaption>Without a map or heading</figcaption><div class="frame-scroll"><div class="frame"><section data-block="location" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="grid gap-10 @min-[768px]:grid-cols-2" data-slot="location.grid"><div class="flex flex-col gap-4 text-lg" data-slot="location.details"><h2 class="text-xl font-semibold" data-slot="location.name">Mill Street Kitchen</h2><address class="whitespace-pre-line not-italic" data-slot="location.address">410 Mill Street
|
|
1418
|
+
Millbrook, IL 60541</address><a href="https://www.google.com/maps/dir/?api=1&destination=Mill%20Street%20Kitchen%2C%20410%20Mill%20Street%2C%20Millbrook%2C%20IL%2060541" rel="noopener" class="font-semibold text-highlight underline on-dark:text-current" data-slot="location.directions">Get directions</a></div></div></div></section></div></div></figure>
|
|
1419
|
+
<div class="spec">
|
|
1420
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Eyebrow</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Heading</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Place name</td><td>Short text</td><td>Required</td><td></td></tr><tr><td>Address</td><td>Text</td><td>Required</td><td>Street, city, state. Used for the map and directions.</td></tr><tr><td>Hours or date</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Notes</td><td>Rich text</td><td>Optional</td><td>Parking, accessibility, what to bring.</td></tr><tr><td>Map pin</td><td>Map pin</td><td>Optional</td><td></td></tr><tr><td>Show a map</td><td>On or off</td><td></td><td></td></tr></tbody></table></div></div>
|
|
1421
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.default</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>heading.root</code></li><li><code>heading.eyebrow</code></li><li><code>heading.title</code></li><li><code>location.grid</code></li><li><code>location.details</code></li><li><code>location.name</code></li><li><code>location.address</code></li><li><code>location.hours</code></li><li><code>location.notes</code></li><li><code>location.directions</code></li><li><code>map.frame</code></li><li><code>location.map</code></li></ul></div>
|
|
1422
|
+
</div>
|
|
1423
|
+
</article><article class="entry" id="block-locations">
|
|
1424
|
+
<header><h3>Locations</h3><p>Several places on one map, with a list: branches, venues, drop-off points.</p></header>
|
|
1425
|
+
<figure class="preview"><figcaption>With a map</figcaption><div class="frame-scroll"><div class="frame"><section data-block="locations" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><p class="mb-3 text-sm font-semibold" data-slot="heading.eyebrow">Find us</p><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Our locations</h2><p class="mt-4 text-lg leading-relaxed" data-slot="heading.intro">Three places, all open to everyone.</p></div><div class="grid gap-10 data-map:@min-[768px]:grid-cols-[2fr_3fr]" data-slot="locations.grid" data-map=""><div class="relative overflow-hidden bg-muted [&_.maplibregl-map]:font-sans [&_.maplibregl-popup-close-button]:size-8 [&_.maplibregl-popup-close-button]:text-xl aspect-[4/3] @min-[768px]:sticky @min-[768px]:top-24 @min-[768px]:order-2 @min-[768px]:aspect-auto @min-[768px]:h-[min(36rem,80vh)]" data-slot="map.frame locations.map"><div class="size-full"></div></div><ul class="divide-y divide-line border-y border-line" data-slot="locations.list"><li class="flex flex-col gap-2 py-6" data-slot="locations.item"><h3 class="text-xl font-semibold" data-slot="locations.name">Mill Street Kitchen</h3><address class="whitespace-pre-line not-italic" data-slot="locations.address">410 Mill Street
|
|
1426
|
+
Millbrook, IL</address><p class="whitespace-pre-line" data-slot="locations.hours">Mon–Fri · 9am–5pm</p><p class="whitespace-pre-line" data-slot="locations.notes">Free parking behind the building. Step-free entrance on Mill Street.</p><p class="mt-1 flex flex-wrap gap-x-6 gap-y-2" data-slot="locations.links"><a href="https://www.google.com/maps/dir/?api=1&destination=Mill%20Street%20Kitchen%2C%20410%20Mill%20Street%2C%20Millbrook%2C%20IL" rel="noopener" class="font-semibold text-highlight underline on-dark:text-current" data-slot="locations.link">Get directions<span class="sr-only"> to Mill Street Kitchen</span></a><a class="font-semibold text-highlight underline on-dark:text-current" data-slot="locations.link" href="/kitchens">About this kitchen</a></p></li><li class="flex flex-col gap-2 py-6" data-slot="locations.item"><h3 class="text-xl font-semibold" data-slot="locations.name">Eastside Pantry</h3><address class="whitespace-pre-line not-italic" data-slot="locations.address">22 Elm Avenue
|
|
1427
|
+
Millbrook, IL</address><p class="whitespace-pre-line" data-slot="locations.hours">Tue & Thu · 2pm–6pm</p><p class="whitespace-pre-line" data-slot="locations.notes">Free parking behind the building. Step-free entrance on Mill Street.</p><p class="mt-1 flex flex-wrap gap-x-6 gap-y-2" data-slot="locations.links"><a href="https://www.google.com/maps/dir/?api=1&destination=Eastside%20Pantry%2C%2022%20Elm%20Avenue%2C%20Millbrook%2C%20IL" rel="noopener" class="font-semibold text-highlight underline on-dark:text-current" data-slot="locations.link">Get directions<span class="sr-only"> to Eastside Pantry</span></a><a class="font-semibold text-highlight underline on-dark:text-current" data-slot="locations.link" href="/kitchens">About this kitchen</a></p></li><li class="flex flex-col gap-2 py-6" data-slot="locations.item"><h3 class="text-xl font-semibold" data-slot="locations.name">Riverside Hub</h3><address class="whitespace-pre-line not-italic" data-slot="locations.address">9 Water Street
|
|
1428
|
+
Millbrook, IL</address><p class="whitespace-pre-line" data-slot="locations.hours">Saturdays · 8am–noon</p><p class="whitespace-pre-line" data-slot="locations.notes">Free parking behind the building. Step-free entrance on Mill Street.</p><p class="mt-1 flex flex-wrap gap-x-6 gap-y-2" data-slot="locations.links"><a href="https://www.google.com/maps/dir/?api=1&destination=Riverside%20Hub%2C%209%20Water%20Street%2C%20Millbrook%2C%20IL" rel="noopener" class="font-semibold text-highlight underline on-dark:text-current" data-slot="locations.link">Get directions<span class="sr-only"> to Riverside Hub</span></a><a class="font-semibold text-highlight underline on-dark:text-current" data-slot="locations.link" href="/kitchens">About this kitchen</a></p></li></ul></div></div></section></div></div></figure><figure class="preview"><figcaption>Without a map</figcaption><div class="frame-scroll"><div class="frame"><section data-block="locations" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Our locations</h2></div><div class="grid gap-10 data-map:@min-[768px]:grid-cols-[2fr_3fr]" data-slot="locations.grid"><ul class="divide-y divide-line border-y border-line grid gap-x-10 @min-[640px]:grid-cols-2 @min-[640px]:divide-y-0 @min-[640px]:border-y-0" data-slot="locations.listNoMap"><li class="flex flex-col gap-2 py-6" data-slot="locations.item"><h3 class="text-xl font-semibold" data-slot="locations.name">Mill Street Kitchen</h3><address class="whitespace-pre-line not-italic" data-slot="locations.address">410 Mill Street
|
|
1429
|
+
Millbrook, IL</address><p class="whitespace-pre-line" data-slot="locations.hours">Mon–Fri · 9am–5pm</p><p class="whitespace-pre-line" data-slot="locations.notes">Free parking behind the building. Step-free entrance on Mill Street.</p><p class="mt-1 flex flex-wrap gap-x-6 gap-y-2" data-slot="locations.links"><a href="https://www.google.com/maps/dir/?api=1&destination=Mill%20Street%20Kitchen%2C%20410%20Mill%20Street%2C%20Millbrook%2C%20IL" rel="noopener" class="font-semibold text-highlight underline on-dark:text-current" data-slot="locations.link">Get directions<span class="sr-only"> to Mill Street Kitchen</span></a><a class="font-semibold text-highlight underline on-dark:text-current" data-slot="locations.link" href="/kitchens">About this kitchen</a></p></li><li class="flex flex-col gap-2 py-6" data-slot="locations.item"><h3 class="text-xl font-semibold" data-slot="locations.name">Eastside Pantry</h3><address class="whitespace-pre-line not-italic" data-slot="locations.address">22 Elm Avenue
|
|
1430
|
+
Millbrook, IL</address><p class="whitespace-pre-line" data-slot="locations.hours">Tue & Thu · 2pm–6pm</p><p class="whitespace-pre-line" data-slot="locations.notes">Free parking behind the building. Step-free entrance on Mill Street.</p><p class="mt-1 flex flex-wrap gap-x-6 gap-y-2" data-slot="locations.links"><a href="https://www.google.com/maps/dir/?api=1&destination=Eastside%20Pantry%2C%2022%20Elm%20Avenue%2C%20Millbrook%2C%20IL" rel="noopener" class="font-semibold text-highlight underline on-dark:text-current" data-slot="locations.link">Get directions<span class="sr-only"> to Eastside Pantry</span></a><a class="font-semibold text-highlight underline on-dark:text-current" data-slot="locations.link" href="/kitchens">About this kitchen</a></p></li><li class="flex flex-col gap-2 py-6" data-slot="locations.item"><h3 class="text-xl font-semibold" data-slot="locations.name">Riverside Hub</h3><address class="whitespace-pre-line not-italic" data-slot="locations.address">9 Water Street
|
|
1431
|
+
Millbrook, IL</address><p class="whitespace-pre-line" data-slot="locations.hours">Saturdays · 8am–noon</p><p class="whitespace-pre-line" data-slot="locations.notes">Free parking behind the building. Step-free entrance on Mill Street.</p><p class="mt-1 flex flex-wrap gap-x-6 gap-y-2" data-slot="locations.links"><a href="https://www.google.com/maps/dir/?api=1&destination=Riverside%20Hub%2C%209%20Water%20Street%2C%20Millbrook%2C%20IL" rel="noopener" class="font-semibold text-highlight underline on-dark:text-current" data-slot="locations.link">Get directions<span class="sr-only"> to Riverside Hub</span></a><a class="font-semibold text-highlight underline on-dark:text-current" data-slot="locations.link" href="/kitchens">About this kitchen</a></p></li></ul></div></div></section></div></div></figure>
|
|
1432
|
+
<div class="spec">
|
|
1433
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Eyebrow</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Heading</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Intro</td><td>Text</td><td>Optional</td><td></td></tr><tr><td>Places</td><td>List of place items</td><td></td><td></td></tr><tr><td class="nested">Place name</td><td>Short text</td><td>Required</td><td></td></tr><tr><td class="nested">Address</td><td>Text</td><td>Required</td><td>Street, city, state. Used for the map and directions.</td></tr><tr><td class="nested">Map pin</td><td>Map pin</td><td>Optional</td><td></td></tr><tr><td class="nested">Hours</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td class="nested">Notes</td><td>Text</td><td>Optional</td><td>Parking, accessibility, what to find there.</td></tr><tr><td class="nested">Link</td><td>Button or link</td><td>Optional</td><td>A page about this place, or its own website.</td></tr><tr><td>Show a map</td><td>On or off</td><td></td><td></td></tr></tbody></table></div></div>
|
|
1434
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.default</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>heading.root</code></li><li><code>heading.eyebrow</code></li><li><code>heading.title</code></li><li><code>heading.intro</code></li><li><code>locations.grid</code></li><li><code>map.frame</code></li><li><code>locations.map</code></li><li><code>locations.list</code></li><li><code>locations.item</code></li><li><code>locations.name</code></li><li><code>locations.address</code></li><li><code>locations.hours</code></li><li><code>locations.notes</code></li><li><code>locations.links</code></li><li><code>locations.link</code></li><li><code>locations.listNoMap</code></li></ul></div>
|
|
1435
|
+
</div>
|
|
1436
|
+
</article><article class="entry" id="block-schedule">
|
|
1437
|
+
<header><h3>Schedule</h3><p>Times and activities, like an agenda.</p></header>
|
|
1438
|
+
<figure class="preview"><figcaption>With details on some items</figcaption><div class="frame-scroll"><div class="frame"><section data-block="schedule" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><p class="mb-3 text-sm font-semibold" data-slot="heading.eyebrow">Saturday</p><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Schedule</h2><p class="mt-4 text-lg leading-relaxed" data-slot="heading.intro">Doors open at eleven.</p></div><ol class="max-w-3xl divide-y divide-line border-y border-line" data-slot="schedule.list"><li class="grid gap-1 py-5 @min-[640px]:grid-cols-[10rem_1fr] @min-[640px]:gap-6" data-slot="schedule.item"><p class="font-semibold text-highlight on-dark:text-current" data-slot="schedule.time">11:00 am</p><div><p class="text-lg font-semibold" data-slot="schedule.title">Doors open</p><p class="mt-1" data-slot="schedule.details">Coffee and pastries in the hall.</p></div></li><li class="grid gap-1 py-5 @min-[640px]:grid-cols-[10rem_1fr] @min-[640px]:gap-6" data-slot="schedule.item"><p class="font-semibold text-highlight on-dark:text-current" data-slot="schedule.time">12:30 pm</p><div><p class="text-lg font-semibold" data-slot="schedule.title">Lunch</p></div></li><li class="grid gap-1 py-5 @min-[640px]:grid-cols-[10rem_1fr] @min-[640px]:gap-6" data-slot="schedule.item"><p class="font-semibold text-highlight on-dark:text-current" data-slot="schedule.time">2:00 pm</p><div><p class="text-lg font-semibold" data-slot="schedule.title">Cooking demonstration</p><p class="mt-1" data-slot="schedule.details">Marco Reyes shows how to make stock from kitchen scraps.</p></div></li><li class="grid gap-1 py-5 @min-[640px]:grid-cols-[10rem_1fr] @min-[640px]:gap-6" data-slot="schedule.item"><p class="font-semibold text-highlight on-dark:text-current" data-slot="schedule.time">4:00 pm</p><div><p class="text-lg font-semibold" data-slot="schedule.title">Close</p></div></li></ol></div></section></div></div></figure>
|
|
1439
|
+
<div class="spec">
|
|
1440
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Eyebrow</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Heading</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Intro</td><td>Text</td><td>Optional</td><td></td></tr><tr><td>Schedule items</td><td>List of item items</td><td></td><td></td></tr><tr><td class="nested">Time</td><td>Short text</td><td>Required</td><td></td></tr><tr><td class="nested">What's happening</td><td>Short text</td><td>Required</td><td></td></tr><tr><td class="nested">Details</td><td>Text</td><td>Optional</td><td></td></tr></tbody></table></div></div>
|
|
1441
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.default</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>heading.root</code></li><li><code>heading.eyebrow</code></li><li><code>heading.title</code></li><li><code>heading.intro</code></li><li><code>schedule.list</code></li><li><code>schedule.item</code></li><li><code>schedule.time</code></li><li><code>schedule.title</code></li><li><code>schedule.details</code></li></ul></div>
|
|
1442
|
+
</div>
|
|
1443
|
+
</article><article class="entry" id="block-upcomingEvents">
|
|
1444
|
+
<header><h3>Upcoming events</h3><p>List of upcoming events.</p></header>
|
|
1445
|
+
<figure class="preview"><figcaption>Register button, sold out, and cancelled without an image</figcaption><div class="frame-scroll"><div class="frame"><section data-block="upcomingEvents" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><p class="mb-3 text-sm font-semibold" data-slot="heading.eyebrow">What's on</p><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Upcoming events</h2><p class="mt-4 text-lg leading-relaxed" data-slot="heading.intro">Everyone is welcome.</p></div><ul class="grid gap-5 @min-[640px]:grid-cols-2 @min-[1024px]:grid-cols-3" data-slot="eventCard.list"><li class="relative flex flex-col overflow-hidden bg-surface ring-1 ring-line" data-slot="eventCard.card"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[16/9] w-full object-cover" data-slot="eventCard.image"/><div class="flex flex-1 flex-col gap-2 p-6" data-slot="eventCard.body"><p class="text-sm font-semibold text-highlight" data-slot="eventCard.date"><time dateTime="2027-02-14T23:00:00.000Z">Sun, Feb 14, 2027 · 5:00 PM – 8:00 PM</time></p><h3 class="text-xl font-semibold" data-slot="eventCard.title"><a class="after:absolute after:inset-0" data-slot="eventCard.link" href="/events/harvest-supper">Harvest Supper</a></h3><p data-slot="eventCard.place">Millbrook Community Kitchen</p><p class="leading-relaxed" data-slot="eventCard.summary">An evening of cooking, sharing a table and meeting the neighbors who keep the kitchen running.</p><div class="relative z-10 mt-auto pt-2" data-slot="eventCard.actions"><a href="https://example.org/register" rel="noopener" class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" data-size="small">Register</a></div></div></li><li class="relative flex flex-col overflow-hidden bg-surface ring-1 ring-line" data-slot="eventCard.card"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[16/9] w-full object-cover" data-slot="eventCard.image"/><div class="flex flex-1 flex-col gap-2 p-6" data-slot="eventCard.body"><p class="text-sm font-semibold text-highlight" data-slot="eventCard.date"><time dateTime="2027-02-28T23:00:00.000Z">Sun, Feb 28, 2027 · 5:00 PM – 8:00 PM</time></p><h3 class="text-xl font-semibold" data-slot="eventCard.title"><a class="after:absolute after:inset-0" data-slot="eventCard.link" href="/events/knife-skills">Knife Skills for Beginners</a></h3><p data-slot="eventCard.place">Millbrook Community Kitchen</p><p class="leading-relaxed" data-slot="eventCard.summary">An evening of cooking, sharing a table and meeting the neighbors who keep the kitchen running.</p><div class="relative z-10 mt-auto pt-2" data-slot="eventCard.actions"><p class="font-semibold data-[size=small]:text-sm" data-slot="registration.note" data-size="small">Sold out</p></div></div></li><li class="relative flex flex-col overflow-hidden bg-surface ring-1 ring-line" data-slot="eventCard.card" data-cancelled=""><div class="flex flex-1 flex-col gap-2 p-6" data-slot="eventCard.body"><p class="text-sm font-semibold text-highlight" data-slot="eventCard.date"><span class="mr-2 bg-danger px-1.5 py-0.5 text-white" data-slot="eventCard.cancelled">Cancelled</span><time dateTime="2027-03-14T23:00:00.000Z">Sun, Mar 14, 2027 · 6:00 PM – 9:00 PM</time></p><h3 class="text-xl font-semibold" data-slot="eventCard.title"><a class="after:absolute after:inset-0" data-slot="eventCard.link" href="/events/preserving">Preserving the Season</a></h3><p data-slot="eventCard.place">Millbrook Community Kitchen</p><p class="leading-relaxed" data-slot="eventCard.summary">An evening of cooking, sharing a table and meeting the neighbors who keep the kitchen running.</p><div class="relative z-10 mt-auto pt-2" data-slot="eventCard.actions"></div></div></li></ul><a class="mt-8 inline-block font-semibold underline after:content-['_→']" data-slot="upcomingEvents.more" href="/events">All events</a></div></section></div></div></figure><figure class="preview"><figcaption>Registration coming soon, with a link to all of a collection's events</figcaption><div class="frame-scroll"><div class="frame"><section data-block="upcomingEvents" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Talks</h2></div><ul class="grid gap-5 @min-[640px]:grid-cols-2 @min-[1024px]:grid-cols-3" data-slot="eventCard.list"><li class="relative flex flex-col overflow-hidden bg-surface ring-1 ring-line" data-slot="eventCard.card"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[16/9] w-full object-cover" data-slot="eventCard.image"/><div class="flex flex-1 flex-col gap-2 p-6" data-slot="eventCard.body"><p class="text-sm font-semibold text-highlight" data-slot="eventCard.date"><time dateTime="2027-03-26T23:00:00.000Z">Fri, Mar 26, 2027 · 6:00 PM – 9:00 PM</time></p><h3 class="text-xl font-semibold" data-slot="eventCard.title"><a class="after:absolute after:inset-0" data-slot="eventCard.link" href="/events/talk">Feeding a Town</a></h3><p data-slot="eventCard.place">Millbrook Community Kitchen</p><p class="leading-relaxed" data-slot="eventCard.summary">An evening of cooking, sharing a table and meeting the neighbors who keep the kitchen running.</p><div class="relative z-10 mt-auto pt-2" data-slot="eventCard.actions"><p class="font-semibold data-[size=small]:text-sm" data-slot="registration.note" data-size="small">Registration coming soon</p></div></div></li></ul><a class="mt-8 inline-block font-semibold underline after:content-['_→']" data-slot="upcomingEvents.more" href="/talks">All talks</a></div></section></div></div></figure><figure class="preview"><figcaption>When there are none</figcaption><div class="frame-scroll"><div class="frame"><section data-block="upcomingEvents" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Upcoming events</h2></div><p class="text-lg" data-slot="eventCard.empty">No upcoming events right now. Check back soon.</p></div></section></div></div></figure>
|
|
1446
|
+
<div class="spec">
|
|
1447
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Eyebrow</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Heading</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Intro</td><td>Text</td><td>Optional</td><td></td></tr><tr><td>How many</td><td>Number</td><td>Required</td><td>0 shows every upcoming event.</td></tr><tr><td>Which events</td><td>One of the site's collections</td><td>Optional</td><td>Only one type of event, e.g. Talks.</td></tr><tr><td>Only this category</td><td>One of the site's categories</td><td>Optional</td><td>E.g. Featured.</td></tr><tr><td>When there are none</td><td>Short text</td><td>Optional</td><td>What to say when no events are coming up.</td></tr></tbody></table></div></div>
|
|
1448
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.default</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>heading.root</code></li><li><code>heading.eyebrow</code></li><li><code>heading.title</code></li><li><code>heading.intro</code></li><li><code>eventCard.list</code></li><li><code>eventCard.card</code></li><li><code>eventCard.image</code></li><li><code>eventCard.body</code></li><li><code>eventCard.date</code></li><li><code>eventCard.title</code></li><li><code>eventCard.link</code></li><li><code>eventCard.place</code></li><li><code>eventCard.summary</code></li><li><code>eventCard.actions</code></li><li><code>button.primary</code></li><li><code>registration.note</code></li><li><code>eventCard.cancelled</code></li><li><code>upcomingEvents.more</code></li><li><code>eventCard.empty</code></li></ul></div>
|
|
1449
|
+
</div>
|
|
1450
|
+
</article><article class="entry" id="block-pastEvents">
|
|
1451
|
+
<header><h3>Past events</h3><p>Events that have ended, most recent first, like a talk archive.</p></header>
|
|
1452
|
+
<figure class="preview"><figcaption>Past events (Subtle background by default)</figcaption><div class="frame-scroll"><div class="frame"><section data-block="pastEvents" data-ground="light" data-tone="muted" class="bg-muted text-ink" data-slot="tones.muted section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Past events</h2><p class="mt-4 text-lg leading-relaxed" data-slot="heading.intro">Photos and recipes from earlier gatherings.</p></div><ul class="grid gap-5 @min-[640px]:grid-cols-2 @min-[1024px]:grid-cols-3" data-slot="eventCard.list"><li class="relative flex flex-col overflow-hidden bg-surface ring-1 ring-line" data-slot="eventCard.card"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[16/9] w-full object-cover" data-slot="eventCard.image"/><div class="flex flex-1 flex-col gap-2 p-6" data-slot="eventCard.body"><p class="text-sm font-semibold text-highlight" data-slot="eventCard.date"><time dateTime="2026-11-16T23:00:00.000Z">Mon, Nov 16, 2026 · 5:00 PM – 8:00 PM</time></p><h3 class="text-xl font-semibold" data-slot="eventCard.title"><a class="after:absolute after:inset-0" data-slot="eventCard.link" href="/events/spring-table">Spring Table</a></h3><p data-slot="eventCard.place">Millbrook Community Kitchen</p><p class="leading-relaxed" data-slot="eventCard.summary">An evening of cooking, sharing a table and meeting the neighbors who keep the kitchen running.</p><div class="relative z-10 mt-auto pt-2" data-slot="eventCard.actions"></div></div></li><li class="relative flex flex-col overflow-hidden bg-surface ring-1 ring-line" data-slot="eventCard.card"><div class="flex flex-1 flex-col gap-2 p-6" data-slot="eventCard.body"><p class="text-sm font-semibold text-highlight" data-slot="eventCard.date"><time dateTime="2026-10-12T23:00:00.000Z">Mon, Oct 12, 2026 · 6:00 PM – 9:00 PM</time></p><h3 class="text-xl font-semibold" data-slot="eventCard.title"><a class="after:absolute after:inset-0" data-slot="eventCard.link" href="/events/bread-day">Community Bread Day</a></h3><p data-slot="eventCard.place">Millbrook Community Kitchen</p><p class="leading-relaxed" data-slot="eventCard.summary">An evening of cooking, sharing a table and meeting the neighbors who keep the kitchen running.</p><div class="relative z-10 mt-auto pt-2" data-slot="eventCard.actions"></div></div></li><li class="relative flex flex-col overflow-hidden bg-surface ring-1 ring-line" data-slot="eventCard.card"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[16/9] w-full object-cover" data-slot="eventCard.image"/><div class="flex flex-1 flex-col gap-2 p-6" data-slot="eventCard.body"><p class="text-sm font-semibold text-highlight" data-slot="eventCard.date"><time dateTime="2026-09-07T23:00:00.000Z">Mon, Sep 7, 2026 · 6:00 PM – 9:00 PM</time></p><h3 class="text-xl font-semibold" data-slot="eventCard.title"><a class="after:absolute after:inset-0" data-slot="eventCard.link" href="/events/soup-swap">Soup Swap</a></h3><p data-slot="eventCard.place">Millbrook Community Kitchen</p><p class="leading-relaxed" data-slot="eventCard.summary">An evening of cooking, sharing a table and meeting the neighbors who keep the kitchen running.</p><div class="relative z-10 mt-auto pt-2" data-slot="eventCard.actions"></div></div></li></ul></div></section></div></div></figure><figure class="preview"><figcaption>When there are none</figcaption><div class="frame-scroll"><div class="frame"><section data-block="pastEvents" data-ground="light" data-tone="muted" class="bg-muted text-ink" data-slot="tones.muted section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Past events</h2></div><p class="text-lg" data-slot="eventCard.empty">Nothing here yet. Our first gathering is coming up.</p></div></section></div></div></figure>
|
|
1453
|
+
<div class="spec">
|
|
1454
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Eyebrow</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Heading</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Intro</td><td>Text</td><td>Optional</td><td></td></tr><tr><td>How many</td><td>Number</td><td>Required</td><td></td></tr><tr><td>Which events</td><td>One of the site's collections</td><td>Optional</td><td>Only one type of event, e.g. Talks.</td></tr><tr><td>Only this category</td><td>One of the site's categories</td><td>Optional</td><td></td></tr><tr><td>When there are none</td><td>Short text</td><td>Optional</td><td>What to say when no events have ended yet. Leave empty and the block doesn't show.</td></tr></tbody></table></div></div>
|
|
1455
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.muted</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>heading.root</code></li><li><code>heading.title</code></li><li><code>heading.intro</code></li><li><code>eventCard.list</code></li><li><code>eventCard.card</code></li><li><code>eventCard.image</code></li><li><code>eventCard.body</code></li><li><code>eventCard.date</code></li><li><code>eventCard.title</code></li><li><code>eventCard.link</code></li><li><code>eventCard.place</code></li><li><code>eventCard.summary</code></li><li><code>eventCard.actions</code></li><li><code>eventCard.empty</code></li></ul></div>
|
|
1456
|
+
</div>
|
|
1457
|
+
</article><article class="entry" id="block-eventSpotlight">
|
|
1458
|
+
<header><h3>Event spotlight</h3><p>Feature one event.</p></header>
|
|
1459
|
+
<figure class="preview"><figcaption>With a label and image</figcaption><div class="frame-scroll"><div class="frame"><section data-block="eventSpotlight" data-ground="light" data-tone="muted" class="bg-muted text-ink" data-slot="tones.muted section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="grid items-center gap-10 @min-[768px]:grid-cols-2" data-slot="eventSpotlight.grid"><div><p class="mb-3 text-sm font-semibold" data-slot="eventSpotlight.label">Featured event</p><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="eventSpotlight.title">Harvest Supper</h2><p class="mt-3 text-lg font-semibold text-highlight" data-slot="eventSpotlight.date">Sun, Feb 14, 2027 · 5:00 PM – 8:00 PM</p><p class="mt-1" data-slot="eventSpotlight.place">Millbrook Community Kitchen</p><p class="mt-4 text-lg" data-slot="eventSpotlight.summary">An evening of cooking, sharing a table and meeting the neighbors who keep the kitchen running.</p><div class="mt-6" data-slot="eventSpotlight.actions"><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" href="/events/harvest-supper">Event details</a></div></div><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[4/3] w-full object-cover" data-slot="eventSpotlight.image"/></div></div></section></div></div></figure>
|
|
1460
|
+
<div class="spec">
|
|
1461
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Event</td><td>One of the site's events</td><td>Optional</td><td>Leave on automatic to show the next event coming up.</td></tr><tr><td>Automatic: only this category</td><td>One of the site's categories</td><td>Optional</td><td>With an automatic event: the next one in this category, e.g. Featured.</td></tr><tr><td>Label</td><td>Short text</td><td>Optional</td><td></td></tr></tbody></table></div></div>
|
|
1462
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.muted</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>eventSpotlight.grid</code></li><li><code>eventSpotlight.label</code></li><li><code>eventSpotlight.title</code></li><li><code>eventSpotlight.date</code></li><li><code>eventSpotlight.place</code></li><li><code>eventSpotlight.summary</code></li><li><code>eventSpotlight.actions</code></li><li><code>button.primary</code></li><li><code>eventSpotlight.image</code></li></ul></div>
|
|
1463
|
+
</div>
|
|
1464
|
+
</article><h2 class="group-title">Forms</h2><article class="entry" id="block-volunteerSignup">
|
|
1465
|
+
<header><h3>Volunteer sign-up</h3><p>An event's volunteer form, with its shifts and questions. Sign-ups appear under the event's Volunteers.</p></header>
|
|
1466
|
+
<figure class="preview"><figcaption>Open, with shifts (one is full)</figcaption><div class="frame-scroll"><div class="frame"><section id="volunteer-harvest-supper" data-block="volunteerSignup" data-ground="light" data-tone="default" class="bg-bg text-ink scroll-mt-8" data-slot="tones.default section.root section.anchored"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="max-w-2xl" data-slot="volunteerSignup.wrap"><h2 class="mb-2 text-2xl font-bold" data-slot="volunteerSignup.title">Volunteer</h2><p class="mb-2 font-semibold" data-slot="volunteerSignup.event"><a class="underline" data-slot="volunteerSignup.eventLink" href="/events/harvest-supper">Harvest Supper</a><span class="text-highlight on-dark:text-current" data-slot="volunteerSignup.eventDate"> · Sun, Feb 14, 2027 · 5:00 PM – 8:00 PM</span></p><p class="mb-2 whitespace-pre-line" data-slot="volunteerSignup.intro">We need hands for setup, cooking and cleanup. No experience needed.</p><p class="mb-2" data-slot="volunteerSignup.note">This event supports New ovens for the kitchen.</p><div class="mt-6" data-slot="volunteerSignup.form"><form class="space-y-6" data-slot="form.root" noValidate=""><div aria-hidden="true" class="absolute -left-[9999px]"><label>Leave this empty<input tabindex="-1" autoComplete="off" name="_gotcha"/></label></div><div class="grid gap-5 @min-[640px]:grid-cols-2" data-slot="form.row"><label class="block" data-slot="form.field"><span class="mb-1.5 block font-semibold" data-slot="form.label">Name</span><input required="" autoComplete="name" class="block w-full border border-field bg-surface px-4 py-3 text-base text-ink focus:border-accent focus:outline-none aria-invalid:border-danger" data-slot="form.input" name="name"/></label><label class="block" data-slot="form.field"><span class="mb-1.5 block font-semibold" data-slot="form.label">Email</span><input type="email" required="" autoComplete="email" class="block w-full border border-field bg-surface px-4 py-3 text-base text-ink focus:border-accent focus:outline-none aria-invalid:border-danger" data-slot="form.input" name="email"/></label></div><fieldset><legend class="mb-3 font-semibold" data-slot="form.legend">Shifts you can do</legend><div class="space-y-3" data-slot="form.options"><label class="flex cursor-pointer items-start gap-3 p-4 ring-1 ring-line has-checked:ring-2 has-checked:ring-accent has-disabled:cursor-not-allowed has-disabled:opacity-50" data-slot="form.option"><input type="checkbox" class="mt-1 size-5 accent-accent" data-slot="form.optionInput" name="shift" value="s1"/><span class="flex-1" data-slot="form.optionText"><span class="flex flex-wrap justify-between gap-2 font-semibold" data-slot="form.optionTitle"><span>Setup</span></span><span class="mt-0.5 block" data-slot="form.optionDetail">Sun, Feb 14 · 2:00 PM – 4:00 PM</span><span class="mt-0.5 block" data-slot="form.optionDetail">Tables, chairs and signs.</span></span></label><label class="flex cursor-pointer items-start gap-3 p-4 ring-1 ring-line has-checked:ring-2 has-checked:ring-accent has-disabled:cursor-not-allowed has-disabled:opacity-50" data-slot="form.option"><input type="checkbox" class="mt-1 size-5 accent-accent" data-slot="form.optionInput" name="shift" value="s2"/><span class="flex-1" data-slot="form.optionText"><span class="flex flex-wrap justify-between gap-2 font-semibold" data-slot="form.optionTitle"><span>Cooking</span><span class="font-normal" data-slot="form.optionMeta">3 spots left</span></span><span class="mt-0.5 block" data-slot="form.optionDetail">Sun, Feb 14 · 3:00 PM – 6:00 PM</span></span></label><label class="flex cursor-pointer items-start gap-3 p-4 ring-1 ring-line has-checked:ring-2 has-checked:ring-accent has-disabled:cursor-not-allowed has-disabled:opacity-50" data-slot="form.option"><input type="checkbox" disabled="" class="mt-1 size-5 accent-accent" data-slot="form.optionInput" name="shift" value="s3"/><span class="flex-1" data-slot="form.optionText"><span class="flex flex-wrap justify-between gap-2 font-semibold" data-slot="form.optionTitle"><span>Cleanup</span><span class="font-normal" data-slot="form.optionMeta">Full</span></span><span class="mt-0.5 block" data-slot="form.optionDetail">Sun, Feb 14 · 8:00 PM – 10:00 PM</span></span></label></div></fieldset><div><label for="volunteer-shirt" class="mb-1.5 block font-semibold" data-slot="form.label">Anything we should know?<span class="ml-1 font-normal" data-slot="form.optional">(optional)</span></label><textarea id="volunteer-shirt" name="shirt" rows="5" class="block w-full border border-field bg-surface px-4 py-3 text-base text-ink focus:border-accent focus:outline-none aria-invalid:border-danger" data-slot="form.input"></textarea></div><button type="submit" class="bg-accent px-6 py-3.5 font-semibold text-accent-ink disabled:opacity-60" data-slot="form.submit">Sign up</button></form></div></div></div></section></div></div></figure><figure class="preview"><figcaption>Closed</figcaption><div class="frame-scroll"><div class="frame"><section id="volunteer-harvest-supper" data-block="volunteerSignup" data-ground="light" data-tone="default" class="bg-bg text-ink scroll-mt-8" data-slot="tones.default section.root section.anchored"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="max-w-2xl" data-slot="volunteerSignup.wrap"><h2 class="mb-2 text-2xl font-bold" data-slot="volunteerSignup.title">Volunteer</h2><p class="mb-2 font-semibold" data-slot="volunteerSignup.event"><a class="underline" data-slot="volunteerSignup.eventLink" href="/events/harvest-supper">Harvest Supper</a><span class="text-highlight on-dark:text-current" data-slot="volunteerSignup.eventDate"> · Sun, Feb 14, 2027 · 5:00 PM – 8:00 PM</span></p><p class="mb-2 whitespace-pre-line" data-slot="volunteerSignup.intro">We need hands for setup, cooking and cleanup. No experience needed.</p><p class="mb-2" data-slot="volunteerSignup.note">This event supports New ovens for the kitchen.</p><div class="mt-6" data-slot="volunteerSignup.form"><p data-slot="volunteerSignup.closed">Volunteer sign-up for this event has closed.</p></div></div></div></section></div></div></figure>
|
|
1467
|
+
<div class="spec">
|
|
1468
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Event</td><td>One of the site's events</td><td>Optional</td><td>Set up the form on the event's Volunteers tab. The block shows only while the event asks for volunteers (on an event's own page, "This event").</td></tr><tr><td>Heading</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Intro</td><td>Text</td><td>Optional</td><td>Leave empty to use the event's own volunteer intro.</td></tr></tbody></table></div></div>
|
|
1469
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.default</code></li><li><code>section.root</code></li><li><code>section.anchored</code></li><li><code>section.inner</code></li><li><code>volunteerSignup.wrap</code></li><li><code>volunteerSignup.title</code></li><li><code>volunteerSignup.event</code></li><li><code>volunteerSignup.eventLink</code></li><li><code>volunteerSignup.eventDate</code></li><li><code>volunteerSignup.intro</code></li><li><code>volunteerSignup.note</code></li><li><code>volunteerSignup.form</code></li><li><code>form.root</code></li><li><code>form.row</code></li><li><code>form.field</code></li><li><code>form.label</code></li><li><code>form.input</code></li><li><code>form.legend</code></li><li><code>form.options</code></li><li><code>form.option</code></li><li><code>form.optionInput</code></li><li><code>form.optionText</code></li><li><code>form.optionTitle</code></li><li><code>form.optionDetail</code></li><li><code>form.optionMeta</code></li><li><code>form.optional</code></li><li><code>form.submit</code></li><li><code>volunteerSignup.closed</code></li></ul></div>
|
|
1470
|
+
</div>
|
|
1471
|
+
</article><article class="entry" id="block-form">
|
|
1472
|
+
<header><h3>Form</h3><p>The site's contact form, built under Forms; submissions appear there too.</p></header>
|
|
1473
|
+
<figure class="preview"><figcaption>Every kind of field</figcaption><div class="frame-scroll"><div class="frame"><section data-block="form" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="max-w-2xl" data-slot="formBlock.wrap"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Get in touch</h2><p class="mt-4 text-lg leading-relaxed" data-slot="heading.intro">We read everything and reply within two days.</p></div><form class="space-y-6" data-slot="form.root" noValidate=""><div aria-hidden="true" class="absolute -left-[9999px]"><label>Leave this empty<input tabindex="-1" autoComplete="off" name="_gotcha"/></label></div><div><label for="contact-name" class="mb-1.5 block font-semibold" data-slot="form.label">Your name</label><input id="contact-name" required="" type="text" autoComplete="name" class="block w-full border border-field bg-surface px-4 py-3 text-base text-ink focus:border-accent focus:outline-none aria-invalid:border-danger" data-slot="form.input" name="name"/></div><div><label for="contact-email" class="mb-1.5 block font-semibold" data-slot="form.label">Email</label><input id="contact-email" required="" type="email" placeholder="you@example.org" autoComplete="email" class="block w-full border border-field bg-surface px-4 py-3 text-base text-ink focus:border-accent focus:outline-none aria-invalid:border-danger" data-slot="form.input" name="email"/></div><div><label for="contact-phone" class="mb-1.5 block font-semibold" data-slot="form.label">Phone<span class="ml-1 font-normal" data-slot="form.optional">(optional)</span></label><input id="contact-phone" type="tel" autoComplete="tel" class="block w-full border border-field bg-surface px-4 py-3 text-base text-ink focus:border-accent focus:outline-none aria-invalid:border-danger" data-slot="form.input" name="phone"/></div><div><label for="contact-topic" class="mb-1.5 block font-semibold" data-slot="form.label">What is this about?</label><select id="contact-topic" name="topic" required="" class="block w-full border border-field bg-surface px-4 py-3 text-base text-ink focus:border-accent focus:outline-none aria-invalid:border-danger" data-slot="form.input"><option value="" disabled="" selected="">Choose one…</option><option>Volunteering</option><option>Donating</option><option>Renting the kitchen</option></select></div><div><label for="contact-message" class="mb-1.5 block font-semibold" data-slot="form.label">Message</label><textarea id="contact-message" name="message" required="" rows="5" class="block w-full border border-field bg-surface px-4 py-3 text-base text-ink focus:border-accent focus:outline-none aria-invalid:border-danger" data-slot="form.input"></textarea></div><div><label class="flex items-center gap-3" data-slot="form.check"><input type="checkbox" id="contact-updates" class="size-5 accent-accent" data-slot="form.checkbox" name="updates"/>Send me the monthly newsletter</label></div><button type="submit" class="bg-accent px-6 py-3.5 font-semibold text-accent-ink disabled:opacity-60" data-slot="form.submit">Send</button></form></div></div></section></div></div></figure>
|
|
1474
|
+
<div class="spec">
|
|
1475
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Form</td><td>One of the site's forms</td><td></td><td></td></tr><tr><td>Heading</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Intro</td><td>Text</td><td>Optional</td><td></td></tr></tbody></table></div></div>
|
|
1476
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.default</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>formBlock.wrap</code></li><li><code>heading.root</code></li><li><code>heading.title</code></li><li><code>heading.intro</code></li><li><code>form.root</code></li><li><code>form.label</code></li><li><code>form.input</code></li><li><code>form.optional</code></li><li><code>form.check</code></li><li><code>form.checkbox</code></li><li><code>form.submit</code></li></ul></div>
|
|
1477
|
+
</div>
|
|
1478
|
+
</article><h2 class="group-title">Giving</h2><article class="entry" id="block-fundraiserSpotlight">
|
|
1479
|
+
<header><h3>Fundraiser spotlight</h3><p>Feature one fundraiser with its goal and progress.</p></header>
|
|
1480
|
+
<figure class="preview"><figcaption>Active, with a goal</figcaption><div class="frame-scroll"><div class="frame"><section data-block="fundraiserSpotlight" data-ground="light" data-tone="muted" class="bg-muted text-ink" data-slot="tones.muted section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="grid items-center gap-10 @min-[768px]:grid-cols-2" data-slot="fundraiserSpotlight.grid"><div class="flex flex-col gap-4" data-slot="fundraiserSpotlight.details"><p class="text-sm font-semibold" data-slot="fundraiserSpotlight.label">Featured fundraiser</p><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="fundraiserSpotlight.title">New ovens for the kitchen</h2><p class="text-lg" data-slot="fundraiserSpotlight.summary">Every gift goes toward equipment and ingredients for the meals we cook each week.</p><div class="flex flex-col gap-2" data-slot="progress.root"><p class="text-base data-[size=large]:text-2xl" data-slot="progress.amounts" data-size="large"><span class="font-bold" data-slot="progress.raised">$18,425</span><span data-slot="progress.goal"> raised of $25,000</span></p><div class="h-2.5 overflow-hidden bg-line" data-slot="progress.bar" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" aria-label="Progress toward the goal"><div class="h-full bg-accent" data-slot="progress.fill" style="width:74%"></div></div><p class="text-sm" data-slot="progress.donors">214 online donations</p></div><p class="flex flex-wrap gap-3 pt-2" data-slot="fundraiserSpotlight.actions"><a class="inline-block w-fit bg-accent px-6 py-3.5 font-semibold text-accent-ink on-dark:bg-inverse-ink on-dark:text-inverse data-[size=small]:px-4 data-[size=small]:py-2 data-[size=small]:text-sm" data-slot="button.primary" href="/fundraisers/new-ovens#donate">Donate</a><a class="px-6 py-3.5 font-semibold ring-1 ring-line" data-slot="fundraiserSpotlight.learnMore" href="/fundraisers/new-ovens">Learn more</a></p></div><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[4/3] w-full object-cover" data-slot="fundraiserSpotlight.image"/></div></div></section></div></div></figure><figure class="preview"><figcaption>Completed (no Donate button)</figcaption><div class="frame-scroll"><div class="frame"><section data-block="fundraiserSpotlight" data-ground="light" data-tone="muted" class="bg-muted text-ink" data-slot="tones.muted section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="grid items-center gap-10 @min-[768px]:grid-cols-2" data-slot="fundraiserSpotlight.grid"><div class="flex flex-col gap-4" data-slot="fundraiserSpotlight.details"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="fundraiserSpotlight.title">School lunch fund</h2><p class="text-lg" data-slot="fundraiserSpotlight.summary">Every gift goes toward equipment and ingredients for the meals we cook each week.</p><div class="flex flex-col gap-2" data-slot="progress.root"><p class="text-base data-[size=large]:text-2xl" data-slot="progress.amounts" data-size="large"><span class="font-bold" data-slot="progress.raised">$12,000</span><span data-slot="progress.goal"> raised of $12,000</span></p><div class="h-2.5 overflow-hidden bg-line" data-slot="progress.bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" aria-label="Progress toward the goal"><div class="h-full bg-accent" data-slot="progress.fill" style="width:100%"></div></div><p class="text-sm" data-slot="progress.donors">132 online donations</p></div><p class="flex flex-wrap gap-3 pt-2" data-slot="fundraiserSpotlight.actions"><a class="px-6 py-3.5 font-semibold ring-1 ring-line" data-slot="fundraiserSpotlight.learnMore" href="/fundraisers/school-lunches">Learn more</a></p></div><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[4/3] w-full object-cover" data-slot="fundraiserSpotlight.image"/></div></div></section></div></div></figure>
|
|
1481
|
+
<div class="spec">
|
|
1482
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Fundraiser</td><td>One of the site's fundraisers</td><td>Optional</td><td>Leave on automatic to show the first active fundraiser.</td></tr><tr><td>Automatic: only this category</td><td>One of the site's categories</td><td>Optional</td><td>E.g. Featured.</td></tr><tr><td>Label</td><td>Short text</td><td>Optional</td><td></td></tr></tbody></table></div></div>
|
|
1483
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.muted</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>fundraiserSpotlight.grid</code></li><li><code>fundraiserSpotlight.details</code></li><li><code>fundraiserSpotlight.label</code></li><li><code>fundraiserSpotlight.title</code></li><li><code>fundraiserSpotlight.summary</code></li><li><code>progress.root</code></li><li><code>progress.amounts</code></li><li><code>progress.raised</code></li><li><code>progress.goal</code></li><li><code>progress.bar</code></li><li><code>progress.fill</code></li><li><code>progress.donors</code></li><li><code>fundraiserSpotlight.actions</code></li><li><code>button.primary</code></li><li><code>fundraiserSpotlight.learnMore</code></li><li><code>fundraiserSpotlight.image</code></li></ul></div>
|
|
1484
|
+
</div>
|
|
1485
|
+
</article><article class="entry" id="block-fundraiserGrid">
|
|
1486
|
+
<header><h3>Fundraisers</h3><p>Fundraisers as cards with their progress.</p></header>
|
|
1487
|
+
<figure class="preview"><figcaption>With a goal, without a goal or image, and completed</figcaption><div class="frame-scroll"><div class="frame"><section data-block="fundraiserGrid" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><p class="mb-3 text-sm font-semibold" data-slot="heading.eyebrow">Giving</p><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Current fundraisers</h2><p class="mt-4 text-lg leading-relaxed" data-slot="heading.intro">Choose what your gift supports.</p></div><ul class="grid gap-5 @min-[640px]:grid-cols-2 @min-[1024px]:grid-cols-3" data-slot="fundraiserCard.list"><li class="relative flex flex-col overflow-hidden bg-surface ring-1 ring-line" data-slot="fundraiserCard.card" data-status="active"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[16/9] w-full object-cover" data-slot="fundraiserCard.image"/><div class="flex flex-1 flex-col gap-3 p-6" data-slot="fundraiserCard.body"><h3 class="text-xl font-semibold" data-slot="fundraiserCard.title"><a class="after:absolute after:inset-0" data-slot="fundraiserCard.link" href="/fundraisers/new-ovens">New ovens for the kitchen</a></h3><p class="leading-relaxed" data-slot="fundraiserCard.summary">Every gift goes toward equipment and ingredients for the meals we cook each week.</p><div class="mt-auto pt-2" data-slot="fundraiserCard.progress"><div class="flex flex-col gap-2" data-slot="progress.root"><p class="text-base data-[size=large]:text-2xl" data-slot="progress.amounts"><span class="font-bold" data-slot="progress.raised">$18,425</span><span data-slot="progress.goal"> raised of $25,000</span></p><div class="h-2.5 overflow-hidden bg-line" data-slot="progress.bar" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" aria-label="Progress toward the goal"><div class="h-full bg-accent" data-slot="progress.fill" style="width:74%"></div></div><p class="text-sm" data-slot="progress.donors">214 online donations</p></div></div></div></li><li class="relative flex flex-col overflow-hidden bg-surface ring-1 ring-line" data-slot="fundraiserCard.card" data-status="active"><div class="flex flex-1 flex-col gap-3 p-6" data-slot="fundraiserCard.body"><h3 class="text-xl font-semibold" data-slot="fundraiserCard.title"><a class="after:absolute after:inset-0" data-slot="fundraiserCard.link" href="/fundraisers/winter-meals">Winter meals program</a></h3><p class="leading-relaxed" data-slot="fundraiserCard.summary">Every gift goes toward equipment and ingredients for the meals we cook each week.</p><div class="mt-auto pt-2" data-slot="fundraiserCard.progress"><div class="flex flex-col gap-2" data-slot="progress.root"><p class="text-base data-[size=large]:text-2xl" data-slot="progress.amounts"><span class="font-bold" data-slot="progress.raised">$6,400</span><span data-slot="progress.goal"> raised</span></p><p class="text-sm" data-slot="progress.donors">57 online donations</p></div></div></div></li><li class="relative flex flex-col overflow-hidden bg-surface ring-1 ring-line" data-slot="fundraiserCard.card" data-status="completed"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22800%22%20viewBox%3D%220%200%201200%20800%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23d9d9d9%22%2F%3E%3Cpath%20d%3D%22M0%200L1200%20800M1200%200L0%20800%22%20stroke%3D%22%23bdbdbd%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E" alt="Placeholder image" width="1200" height="800" loading="lazy" fetchPriority="auto" decoding="async" class="aspect-[16/9] w-full object-cover" data-slot="fundraiserCard.image"/><div class="flex flex-1 flex-col gap-3 p-6" data-slot="fundraiserCard.body"><p class="w-fit bg-muted px-2 py-0.5 text-sm font-semibold" data-slot="fundraiserCard.completed">Completed</p><h3 class="text-xl font-semibold" data-slot="fundraiserCard.title"><a class="after:absolute after:inset-0" data-slot="fundraiserCard.link" href="/fundraisers/school-lunches">School lunch fund</a></h3><p class="leading-relaxed" data-slot="fundraiserCard.summary">Every gift goes toward equipment and ingredients for the meals we cook each week.</p><div class="mt-auto pt-2" data-slot="fundraiserCard.progress"><div class="flex flex-col gap-2" data-slot="progress.root"><p class="text-base data-[size=large]:text-2xl" data-slot="progress.amounts"><span class="font-bold" data-slot="progress.raised">$12,000</span><span data-slot="progress.goal"> raised of $12,000</span></p><div class="h-2.5 overflow-hidden bg-line" data-slot="progress.bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" aria-label="Progress toward the goal"><div class="h-full bg-accent" data-slot="progress.fill" style="width:100%"></div></div><p class="text-sm" data-slot="progress.donors">132 online donations</p></div></div></div></li></ul><a class="mt-8 inline-block font-semibold underline after:content-['_→']" data-slot="fundraiserGrid.more" href="/fundraisers">All fundraisers</a></div></section></div></div></figure><figure class="preview"><figcaption>When there are none</figcaption><div class="frame-scroll"><div class="frame"><section data-block="fundraiserGrid" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Current fundraisers</h2></div><p class="text-lg" data-slot="fundraiserCard.empty">No fundraisers right now. Check back soon.</p></div></section></div></div></figure>
|
|
1488
|
+
<div class="spec">
|
|
1489
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Eyebrow</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Heading</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Intro</td><td>Text</td><td>Optional</td><td></td></tr><tr><td>Show</td><td>Choice</td><td>Required</td><td>Active fundraisers · Completed fundraisers · Active and completed</td></tr><tr><td>How many</td><td>Number</td><td>Required</td><td></td></tr><tr><td>Only this category</td><td>One of the site's categories</td><td>Optional</td><td>E.g. Featured.</td></tr><tr><td>When there are none</td><td>Short text</td><td>Optional</td><td>What to say when there are no fundraisers to show.</td></tr></tbody></table></div></div>
|
|
1490
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.default</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>heading.root</code></li><li><code>heading.eyebrow</code></li><li><code>heading.title</code></li><li><code>heading.intro</code></li><li><code>fundraiserCard.list</code></li><li><code>fundraiserCard.card</code></li><li><code>fundraiserCard.image</code></li><li><code>fundraiserCard.body</code></li><li><code>fundraiserCard.title</code></li><li><code>fundraiserCard.link</code></li><li><code>fundraiserCard.summary</code></li><li><code>fundraiserCard.progress</code></li><li><code>progress.root</code></li><li><code>progress.amounts</code></li><li><code>progress.raised</code></li><li><code>progress.goal</code></li><li><code>progress.bar</code></li><li><code>progress.fill</code></li><li><code>progress.donors</code></li><li><code>fundraiserCard.completed</code></li><li><code>fundraiserGrid.more</code></li><li><code>fundraiserCard.empty</code></li></ul></div>
|
|
1491
|
+
</div>
|
|
1492
|
+
</article><article class="entry" id="block-donate">
|
|
1493
|
+
<header><h3>Donation form</h3><p>Suggested amounts and a custom amount, then secure checkout.</p></header>
|
|
1494
|
+
<figure class="preview"><figcaption>General, with a choice of fundraiser</figcaption><div class="frame-scroll"><div class="frame"><section data-block="donate" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="max-w-2xl" data-slot="donate.wrap"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Make a gift</h2><p class="mt-4 text-lg leading-relaxed" data-slot="heading.intro">Your gift keeps dinner free.</p></div><form class="space-y-6" data-slot="form.root" id="donate"><fieldset><legend class="mb-3 font-semibold" data-slot="form.legend">Amount</legend><div class="flex flex-wrap gap-3" data-slot="form.amounts"><label class="cursor-pointer px-5 py-3 font-semibold ring-1 ring-field has-checked:bg-accent has-checked:text-accent-ink has-checked:ring-accent has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-accent" data-slot="form.amount"><input type="radio" class="sr-only" name="amount" value="25"/>$25</label><label class="cursor-pointer px-5 py-3 font-semibold ring-1 ring-field has-checked:bg-accent has-checked:text-accent-ink has-checked:ring-accent has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-accent" data-slot="form.amount"><input type="radio" class="sr-only" name="amount" checked="" value="50"/>$50</label><label class="cursor-pointer px-5 py-3 font-semibold ring-1 ring-field has-checked:bg-accent has-checked:text-accent-ink has-checked:ring-accent has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-accent" data-slot="form.amount"><input type="radio" class="sr-only" name="amount" value="100"/>$100</label><label class="cursor-pointer px-5 py-3 font-semibold ring-1 ring-field has-checked:bg-accent has-checked:text-accent-ink has-checked:ring-accent has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-accent" data-slot="form.amount"><input type="radio" class="sr-only" name="amount" value="250"/>$250</label><label class="cursor-pointer px-5 py-3 font-semibold ring-1 ring-field has-checked:bg-accent has-checked:text-accent-ink has-checked:ring-accent has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-accent" data-slot="form.amount"><input type="radio" class="sr-only" name="amount" value="custom"/>Other</label></div><p class="mt-2 text-sm" data-slot="form.hint">$5 to $25,000.</p></fieldset><div><label for="donate-fundraiser" class="mb-1.5 block font-semibold" data-slot="form.label">Where should your gift go?</label><select id="donate-fundraiser" name="fundraiser" class="block w-full border border-field bg-surface px-4 py-3 text-base text-ink focus:border-accent focus:outline-none aria-invalid:border-danger" data-slot="form.input"><option value="" selected="">Where it's needed most</option><option value="new-ovens">New ovens for the kitchen</option><option value="winter-meals">Winter meals program</option></select></div><div class="grid gap-5 @min-[640px]:grid-cols-2" data-slot="form.row"><label class="block" data-slot="form.field"><span class="mb-1.5 block font-semibold" data-slot="form.label">Name</span><input autoComplete="name" class="block w-full border border-field bg-surface px-4 py-3 text-base text-ink focus:border-accent focus:outline-none aria-invalid:border-danger" data-slot="form.input" name="name"/></label><label class="block" data-slot="form.field"><span class="mb-1.5 block font-semibold" data-slot="form.label">Email for your receipt</span><input type="email" autoComplete="email" class="block w-full border border-field bg-surface px-4 py-3 text-base text-ink focus:border-accent focus:outline-none aria-invalid:border-danger" data-slot="form.input" name="email"/></label></div><label class="block" data-slot="form.field"><span class="mb-1.5 block font-semibold" data-slot="form.label">Message<span class="ml-1 font-normal" data-slot="form.optional">(optional)</span></span><textarea name="message" maxLength="500" class="block w-full border border-field bg-surface px-4 py-3 text-base text-ink focus:border-accent focus:outline-none aria-invalid:border-danger" data-slot="form.input" rows="3"></textarea></label><label class="flex items-center gap-3" data-slot="form.check"><input type="checkbox" class="size-5 accent-accent" data-slot="form.checkbox" name="anonymous"/>Don't show my name publicly</label><button type="submit" class="bg-accent px-6 py-3.5 font-semibold text-accent-ink disabled:opacity-60" data-slot="form.submit">Donate</button><p class="text-sm" data-slot="form.note">You'll finish on a secure payment page.</p></form></div></div></section></div></div></figure><figure class="preview"><figcaption>Giving to one fundraiser</figcaption><div class="frame-scroll"><div class="frame"><section data-block="donate" data-ground="light" data-tone="default" class="bg-bg text-ink" data-slot="tones.default section.root"><div class="mx-auto max-w-site px-4 py-16 @min-[640px]:px-6 @min-[640px]:py-20" data-slot="section.inner"><div class="max-w-2xl" data-slot="donate.wrap"><div class="mb-10 max-w-3xl" data-slot="heading.root"><h2 class="text-[clamp(28px,3.4cqw,40px)] font-bold leading-tight" data-slot="heading.title">Make a gift</h2></div><p class="mb-6 font-semibold" data-slot="donate.supporting">Supporting: New ovens for the kitchen</p><form class="space-y-6" data-slot="form.root" id="donate"><input type="hidden" name="fundraiser" value="new-ovens"/><fieldset><legend class="mb-3 font-semibold" data-slot="form.legend">Amount</legend><div class="flex flex-wrap gap-3" data-slot="form.amounts"><label class="cursor-pointer px-5 py-3 font-semibold ring-1 ring-field has-checked:bg-accent has-checked:text-accent-ink has-checked:ring-accent has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-accent" data-slot="form.amount"><input type="radio" class="sr-only" name="amount" value="25"/>$25</label><label class="cursor-pointer px-5 py-3 font-semibold ring-1 ring-field has-checked:bg-accent has-checked:text-accent-ink has-checked:ring-accent has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-accent" data-slot="form.amount"><input type="radio" class="sr-only" name="amount" checked="" value="50"/>$50</label><label class="cursor-pointer px-5 py-3 font-semibold ring-1 ring-field has-checked:bg-accent has-checked:text-accent-ink has-checked:ring-accent has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-accent" data-slot="form.amount"><input type="radio" class="sr-only" name="amount" value="100"/>$100</label><label class="cursor-pointer px-5 py-3 font-semibold ring-1 ring-field has-checked:bg-accent has-checked:text-accent-ink has-checked:ring-accent has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-accent" data-slot="form.amount"><input type="radio" class="sr-only" name="amount" value="custom"/>Other</label></div><p class="mt-2 text-sm" data-slot="form.hint">$5 to $25,000.</p></fieldset><div class="grid gap-5 @min-[640px]:grid-cols-2" data-slot="form.row"><label class="block" data-slot="form.field"><span class="mb-1.5 block font-semibold" data-slot="form.label">Name</span><input autoComplete="name" class="block w-full border border-field bg-surface px-4 py-3 text-base text-ink focus:border-accent focus:outline-none aria-invalid:border-danger" data-slot="form.input" name="name"/></label><label class="block" data-slot="form.field"><span class="mb-1.5 block font-semibold" data-slot="form.label">Email for your receipt</span><input type="email" autoComplete="email" class="block w-full border border-field bg-surface px-4 py-3 text-base text-ink focus:border-accent focus:outline-none aria-invalid:border-danger" data-slot="form.input" name="email"/></label></div><label class="block" data-slot="form.field"><span class="mb-1.5 block font-semibold" data-slot="form.label">Message<span class="ml-1 font-normal" data-slot="form.optional">(optional)</span></span><textarea name="message" maxLength="500" class="block w-full border border-field bg-surface px-4 py-3 text-base text-ink focus:border-accent focus:outline-none aria-invalid:border-danger" data-slot="form.input" rows="3"></textarea></label><label class="flex items-center gap-3" data-slot="form.check"><input type="checkbox" class="size-5 accent-accent" data-slot="form.checkbox" name="anonymous"/>Don't show my name publicly</label><label class="flex items-center gap-3" data-slot="form.check"><input type="checkbox" class="size-5 accent-accent" data-slot="form.checkbox" name="updates"/>Send me updates about this fundraiser</label><button type="submit" class="bg-accent px-6 py-3.5 font-semibold text-accent-ink disabled:opacity-60" data-slot="form.submit">Donate</button><p class="text-sm" data-slot="form.note">You'll finish on a secure payment page.</p></form></div></div></section></div></div></figure>
|
|
1495
|
+
<div class="spec">
|
|
1496
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Heading</td><td>Short text</td><td>Optional</td><td></td></tr><tr><td>Intro</td><td>Text</td><td>Optional</td><td></td></tr><tr><td>Gives to</td><td>One of the site's fundraisers</td><td>Optional</td><td>Suggested amounts come from Settings → Giving.</td></tr><tr><td>Button text</td><td>Short text</td><td>Required</td><td></td></tr></tbody></table></div></div>
|
|
1497
|
+
<div><h4>Theme slots</h4><ul class="slots"><li><code>tones.default</code></li><li><code>section.root</code></li><li><code>section.inner</code></li><li><code>donate.wrap</code></li><li><code>heading.root</code></li><li><code>heading.title</code></li><li><code>heading.intro</code></li><li><code>form.root</code></li><li><code>form.legend</code></li><li><code>form.amounts</code></li><li><code>form.amount</code></li><li><code>form.hint</code></li><li><code>form.label</code></li><li><code>form.input</code></li><li><code>form.row</code></li><li><code>form.field</code></li><li><code>form.optional</code></li><li><code>form.check</code></li><li><code>form.checkbox</code></li><li><code>form.submit</code></li><li><code>form.note</code></li><li><code>donate.supporting</code></li></ul></div>
|
|
1498
|
+
</div>
|
|
1499
|
+
</article><h2 class="group-title">Global</h2><article class="entry" id="block-sharedBlock">
|
|
1500
|
+
<header><h3>Global block</h3><p>A block edited once and shown on many pages.</p></header>
|
|
1501
|
+
<p class="no-preview">Nothing to design: it shows whichever block it points to, drawn as that block normally is.</p>
|
|
1502
|
+
<div class="spec">
|
|
1503
|
+
<div><h4>What editors fill in</h4><div class="table-wrap"><table class="fields"><thead><tr><th>Field</th><th>Kind</th><th>Required?</th><th>Options and notes</th></tr></thead><tbody><tr><td>Global block</td><td>One of the site's global blocks</td><td>Required</td><td>Edit it under Global blocks.</td></tr></tbody></table></div></div>
|
|
1504
|
+
|
|
1505
|
+
</div>
|
|
1506
|
+
</article><h2 class="group-title">Custom</h2><article class="entry" id="block-custom">
|
|
1507
|
+
<header><h3>Custom block</h3><p>One of this site's own blocks.</p></header>
|
|
1508
|
+
<p class="no-preview">Nothing to show here: a custom block is one a single site has made for itself, with its own fields and design. Build them from the same headings, buttons and grounds.</p>
|
|
1509
|
+
<div class="spec">
|
|
1510
|
+
|
|
1511
|
+
|
|
1512
|
+
</div>
|
|
1513
|
+
</article>
|
|
1514
|
+
</main>
|
|
1515
|
+
</div>
|
|
1516
|
+
<div id="slot-tip" hidden></div>
|
|
1517
|
+
<script>
|
|
1518
|
+
(function () {
|
|
1519
|
+
var root = document.documentElement;
|
|
1520
|
+
var buttons = document.querySelectorAll(".widths button");
|
|
1521
|
+
buttons.forEach(function (button) {
|
|
1522
|
+
button.addEventListener("click", function () {
|
|
1523
|
+
choose(button);
|
|
1524
|
+
});
|
|
1525
|
+
});
|
|
1526
|
+
// Desktop keeps its columns however narrow the window, scrolling sideways inside the preview. The others never exceed it.
|
|
1527
|
+
function choose(button) {
|
|
1528
|
+
var width = button.getAttribute("data-width");
|
|
1529
|
+
buttons.forEach(function (b) { b.setAttribute("aria-pressed", String(b === button)); });
|
|
1530
|
+
root.style.setProperty("--frame-width", width === "desktop" ? "max(100%, 1024px)" : "min(100%, " + width + "px)");
|
|
1531
|
+
}
|
|
1532
|
+
var room = document.querySelector("main").clientWidth;
|
|
1533
|
+
choose(buttons[room >= 900 ? 0 : room >= 700 ? 1 : 2]);
|
|
1534
|
+
|
|
1535
|
+
// The samples look like a live site, but nothing in them goes anywhere.
|
|
1536
|
+
document.querySelectorAll(".frame").forEach(function (frame) {
|
|
1537
|
+
frame.addEventListener("click", function (e) { if (e.target.closest && e.target.closest("a")) e.preventDefault(); });
|
|
1538
|
+
frame.addEventListener("submit", function (e) { e.preventDefault(); });
|
|
1539
|
+
});
|
|
1540
|
+
|
|
1541
|
+
var jump = document.getElementById("jump");
|
|
1542
|
+
jump.addEventListener("click", function (e) { if (e.target.tagName === "A") jump.open = false; });
|
|
1543
|
+
document.addEventListener("click", function (e) { if (!jump.contains(e.target)) jump.open = false; });
|
|
1544
|
+
|
|
1545
|
+
var tip = document.getElementById("slot-tip");
|
|
1546
|
+
var toggle = document.getElementById("show-slots");
|
|
1547
|
+
var current = null;
|
|
1548
|
+
function clear() {
|
|
1549
|
+
if (current) current.classList.remove("slot-hover");
|
|
1550
|
+
current = null;
|
|
1551
|
+
tip.hidden = true;
|
|
1552
|
+
}
|
|
1553
|
+
toggle.addEventListener("change", function () {
|
|
1554
|
+
document.body.classList.toggle("showing-slots", toggle.checked);
|
|
1555
|
+
if (!toggle.checked) clear();
|
|
1556
|
+
});
|
|
1557
|
+
document.addEventListener("mousemove", function (e) {
|
|
1558
|
+
if (!toggle.checked) return;
|
|
1559
|
+
var el = e.target.closest ? e.target.closest(".frame [data-slot]") : null;
|
|
1560
|
+
if (!el) return clear();
|
|
1561
|
+
if (el !== current) {
|
|
1562
|
+
if (current) current.classList.remove("slot-hover");
|
|
1563
|
+
current = el;
|
|
1564
|
+
el.classList.add("slot-hover");
|
|
1565
|
+
tip.textContent = el.getAttribute("data-slot").split(" ").join(" + ");
|
|
1566
|
+
}
|
|
1567
|
+
tip.hidden = false;
|
|
1568
|
+
tip.style.left = Math.min(e.clientX + 12, window.innerWidth - tip.offsetWidth - 12) + "px";
|
|
1569
|
+
tip.style.top = Math.max(e.clientY - 30, 4) + "px";
|
|
1570
|
+
});
|
|
1571
|
+
})();
|
|
1572
|
+
</script>
|
|
1573
|
+
</body>
|
|
1574
|
+
</html>
|