@janga/norna 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/LICENSE +674 -0
  2. package/README.md +109 -0
  3. package/astro.config.mjs +17 -0
  4. package/bin/norna.mjs +170 -0
  5. package/docs/README.md +48 -0
  6. package/docs/command-organization.md +402 -0
  7. package/docs/commands.md +152 -0
  8. package/docs/configuration.md +376 -0
  9. package/docs/content.md +384 -0
  10. package/docs/engine-development.md +164 -0
  11. package/docs/getting-started.md +96 -0
  12. package/docs/images-and-metadata.md +88 -0
  13. package/docs/local-development.md +61 -0
  14. package/docs/publishing.md +81 -0
  15. package/docs/site-examples-structure-note.md +105 -0
  16. package/docs/site-structure.md +81 -0
  17. package/fixtures/basic/site/.norna/generated-images.json +1 -0
  18. package/fixtures/basic/site/config.mjs +59 -0
  19. package/fixtures/basic/site/content.md +17 -0
  20. package/fixtures/basic/site/images/work/.gitkeep +1 -0
  21. package/fixtures/basic/site/public/robots.txt +2 -0
  22. package/fixtures/basic/site/theme.md +7 -0
  23. package/package.json +90 -0
  24. package/scripts/build-site.mjs +16 -0
  25. package/scripts/check-config.mjs +37 -0
  26. package/scripts/deploy-site.mjs +389 -0
  27. package/scripts/dev-local.mjs +313 -0
  28. package/scripts/doctor.mjs +38 -0
  29. package/scripts/engine-version.mjs +137 -0
  30. package/scripts/generate-images.mjs +369 -0
  31. package/scripts/init-site.mjs +249 -0
  32. package/scripts/lib/astro-command.mjs +34 -0
  33. package/scripts/lib/ci-lockfile.mjs +34 -0
  34. package/scripts/lib/image-dimensions.mjs +78 -0
  35. package/scripts/lib/presentation.mjs +72 -0
  36. package/scripts/lib/project-config.mjs +322 -0
  37. package/scripts/lib/run-command.mjs +21 -0
  38. package/scripts/lib/site-content.mjs +392 -0
  39. package/scripts/lib/site-paths.mjs +127 -0
  40. package/scripts/lib/typography.mjs +166 -0
  41. package/scripts/release.mjs +77 -0
  42. package/scripts/show-typography.mjs +210 -0
  43. package/scripts/sync-content-sections.mjs +610 -0
  44. package/scripts/sync-site-public.mjs +42 -0
  45. package/scripts/test-ci-lockfile.mjs +65 -0
  46. package/scripts/test-content-check.mjs +364 -0
  47. package/scripts/test-engine-commands.mjs +128 -0
  48. package/scripts/test-navigation-preview.mjs +108 -0
  49. package/scripts/test-navigation.mjs +116 -0
  50. package/scripts/test-package-check.mjs +394 -0
  51. package/scripts/test-site-public.mjs +85 -0
  52. package/scripts/test-temporary-visibility.mjs +99 -0
  53. package/scripts/update-engine.mjs +127 -0
  54. package/scripts/watch-pages-deploy.mjs +430 -0
  55. package/src/components/GalleryGrid.astro +221 -0
  56. package/src/components/SiteNavigation.astro +410 -0
  57. package/src/components/SitePage.astro +69 -0
  58. package/src/components/SiteSection.astro +174 -0
  59. package/src/content.config.ts +171 -0
  60. package/src/layouts/BaseLayout.astro +90 -0
  61. package/src/lib/generatedImages.ts +63 -0
  62. package/src/lib/sectionContent.ts +125 -0
  63. package/src/lib/sitePages.ts +80 -0
  64. package/src/lib/sitePublicAssets.ts +39 -0
  65. package/src/lib/visibility.ts +35 -0
  66. package/src/pages/[slug].astro +31 -0
  67. package/src/pages/index.astro +16 -0
  68. package/src/styles/global.css +872 -0
  69. package/starters/basic/.github/workflows/deploy.yml +65 -0
  70. package/starters/basic/README.md +55 -0
  71. package/starters/basic/package.json +35 -0
  72. package/starters/basic/site/config.mjs +60 -0
  73. package/starters/basic/site/content.md +21 -0
  74. package/starters/basic/site/images/work/.gitkeep +1 -0
  75. package/starters/basic/site/public/robots.txt +2 -0
  76. package/starters/basic/site/theme.md +53 -0
  77. package/tsconfig.json +5 -0
@@ -0,0 +1,872 @@
1
+ *,
2
+ *::before,
3
+ *::after {
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ :root {
8
+ --color-page: #000;
9
+ --color-surface: #101010;
10
+ --color-text: #f7f4ee;
11
+ --color-muted: #aaa49a;
12
+ --color-soft: #302f2c;
13
+ --color-accent: #d8d2c8;
14
+ --color-border: rgb(255 255 255 / 14%);
15
+ --color-nav-background: rgb(0 0 0 / 90%);
16
+ --color-nav-separator: rgb(255 255 255 / 28%);
17
+ --font-sans: Arial, 'Helvetica Neue', Helvetica, sans-serif;
18
+ --font-serif: Georgia, 'Times New Roman', serif;
19
+ --page-width: 1180px;
20
+ --text-width: 680px;
21
+ --gallery-width: 900px;
22
+ --gallery-max-available-width-desktop: 100%;
23
+ --gallery-max-available-width-mobile: 100%;
24
+ --gallery-max-available-width: var(--gallery-max-available-width-desktop);
25
+ --gallery-layout-width: min(var(--gallery-width), var(--gallery-max-available-width));
26
+ --gallery-max-image-height-desktop: 74svh;
27
+ --gallery-max-image-height-mobile: 68svh;
28
+ --gallery-max-image-height: var(--gallery-max-image-height-desktop);
29
+ --nav-top-safety-inset: 0px;
30
+
31
+ /* Avstand fran sticky navigationsrad till forsta sektionsrubriken. */
32
+ --space-nav-to-first-section: clamp(1.875rem, 3vw, 2.75rem);
33
+
34
+ /* Avstand fran sektionsrubrik till sektionens forsta textstycke. */
35
+ --space-section-title-to-body: clamp(0.5625rem, 1.25vw, 0.75rem);
36
+
37
+ /* Avstand fran sektionens lopande text till efterfoljande galleri. */
38
+ --space-section-body-to-gallery: clamp(1.25rem, 2.5vw, 2rem);
39
+
40
+ /* Avstand mellan enskilda bilder/verk inom samma galleri. */
41
+ --space-gallery-item: clamp(1.5rem, 3.5vw, 2.75rem);
42
+
43
+ /* Avstand fran sista galleriobjektet eller textblocket till nasta sektion. */
44
+ --space-section-to-section: clamp(2.55rem, 4.2vw, 3.9rem);
45
+
46
+ --content-gutter-desktop: clamp(1.25rem, 4vw, 3rem);
47
+ --content-gutter-mobile: 1rem;
48
+ --content-gutter: var(--content-gutter-desktop);
49
+ --site-top-anchor-offset: 4.5rem;
50
+ color-scheme: dark;
51
+ scroll-behavior: smooth;
52
+ scroll-padding-top: var(--site-top-anchor-offset);
53
+ }
54
+
55
+ html {
56
+ min-height: 100%;
57
+ background: var(--color-page);
58
+ }
59
+
60
+ body {
61
+ min-height: 100vh;
62
+ min-height: 100svh;
63
+ margin: 0;
64
+ isolation: isolate;
65
+ background: var(--color-page);
66
+ color: var(--color-text);
67
+ font-family: var(--font-sans);
68
+ -webkit-font-smoothing: antialiased;
69
+ -moz-osx-font-smoothing: grayscale;
70
+ }
71
+
72
+ img {
73
+ display: block;
74
+ height: auto;
75
+ max-width: 100%;
76
+ }
77
+
78
+ a {
79
+ color: var(--color-accent);
80
+ transition: color 0.18s ease, opacity 0.18s ease;
81
+ }
82
+
83
+ ::selection {
84
+ background: var(--color-text);
85
+ color: var(--color-page);
86
+ }
87
+
88
+ .skip-link {
89
+ position: fixed;
90
+ top: 0.75rem;
91
+ left: 0.75rem;
92
+ z-index: 100;
93
+ transform: translateY(-200%);
94
+ background: var(--color-text);
95
+ color: var(--color-surface);
96
+ padding: 0.75rem 1rem;
97
+ font-weight: 700;
98
+ text-decoration: none;
99
+ }
100
+
101
+ .skip-link:focus {
102
+ transform: translateY(0);
103
+ }
104
+
105
+ .site-top {
106
+ position: sticky;
107
+ top: 0;
108
+ z-index: 10;
109
+ padding-top: var(--nav-top-safety-inset);
110
+ padding-top: max(env(safe-area-inset-top, 0px), var(--nav-top-safety-inset));
111
+ border-bottom: 1px solid var(--color-border);
112
+ background-color: var(--site-top-background-color, var(--color-nav-background));
113
+ color: var(--site-top-text-color, var(--color-text));
114
+ backdrop-filter: blur(16px);
115
+ transition: background-color 0.18s ease, color 0.18s ease;
116
+ }
117
+
118
+ .site-nav-row {
119
+ display: flex;
120
+ align-items: center;
121
+ justify-content: space-between;
122
+ gap: 1rem;
123
+ width: min(calc(100% - (var(--content-gutter) * 2)), var(--page-width));
124
+ margin: 0 auto;
125
+ padding: 0.8rem 0 0.7rem;
126
+ }
127
+
128
+ .site-brand,
129
+ .site-nav a,
130
+ .mobile-nav-menu summary,
131
+ .mobile-nav-panel a,
132
+ .page-nav a {
133
+ color: currentColor;
134
+ text-decoration: none;
135
+ }
136
+
137
+ .site-brand {
138
+ flex: 0 0 auto;
139
+ font-size: 0.82rem;
140
+ font-weight: 700;
141
+ letter-spacing: 0.08em;
142
+ line-height: 1.1;
143
+ text-transform: uppercase;
144
+ }
145
+
146
+ .site-nav ul,
147
+ .mobile-nav-panel ul,
148
+ .page-nav ul {
149
+ margin: 0;
150
+ padding: 0;
151
+ list-style: none;
152
+ }
153
+
154
+ .site-nav ul {
155
+ display: flex;
156
+ flex-wrap: wrap;
157
+ justify-content: flex-end;
158
+ gap: 0.35rem clamp(0.9rem, 2.6vw, 2rem);
159
+ }
160
+
161
+ .site-nav a,
162
+ .mobile-nav-panel a {
163
+ display: block;
164
+ font-size: 0.78rem;
165
+ font-weight: 500;
166
+ letter-spacing: 0.08em;
167
+ line-height: 1.2;
168
+ opacity: 0.72;
169
+ text-transform: uppercase;
170
+ }
171
+
172
+ .site-nav a:hover,
173
+ .site-nav a[aria-current='page'],
174
+ .mobile-nav-panel a:hover,
175
+ .mobile-nav-panel a[aria-current='page'] {
176
+ opacity: 1;
177
+ }
178
+
179
+ .site-nav a[aria-current='page'] {
180
+ text-decoration: underline;
181
+ text-decoration-thickness: 1px;
182
+ text-underline-offset: 0.35em;
183
+ }
184
+
185
+ .mobile-nav-menu {
186
+ display: none;
187
+ }
188
+
189
+ .page-nav {
190
+ border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
191
+ }
192
+
193
+ .page-nav ul {
194
+ display: flex;
195
+ flex-wrap: wrap;
196
+ justify-content: center;
197
+ gap: 0 clamp(1.4rem, 4vw, 3.25rem);
198
+ }
199
+
200
+ .page-nav li {
201
+ position: relative;
202
+ }
203
+
204
+ .page-nav li + li::before {
205
+ position: absolute;
206
+ top: 50%;
207
+ left: calc(clamp(1.4rem, 4vw, 3.25rem) / -2 - 0.1rem);
208
+ transform: translateY(-50%);
209
+ color: currentColor;
210
+ content: "/";
211
+ font-size: 0.75rem;
212
+ opacity: 0.28;
213
+ }
214
+
215
+ .page-nav a {
216
+ display: block;
217
+ position: relative;
218
+ padding: 1.05rem 0 0.95rem;
219
+ font-size: 0.76rem;
220
+ font-weight: 500;
221
+ letter-spacing: 0.12em;
222
+ line-height: 1;
223
+ opacity: 0.76;
224
+ text-decoration: none;
225
+ text-transform: uppercase;
226
+ }
227
+
228
+ .page-nav a::after {
229
+ position: absolute;
230
+ right: 0;
231
+ bottom: 0.62rem;
232
+ left: 0;
233
+ height: 1px;
234
+ transform: scaleX(0);
235
+ background: currentColor;
236
+ content: "";
237
+ opacity: 0;
238
+ transition: opacity 0.18s ease, transform 0.18s ease;
239
+ }
240
+
241
+ .page-nav a:hover,
242
+ .page-nav a[aria-current='true'],
243
+ .mobile-page-nav a[aria-current='true'] {
244
+ opacity: 1;
245
+ }
246
+
247
+ .page-nav a[aria-current='true']::after {
248
+ transform: scaleX(1);
249
+ opacity: 0.75;
250
+ }
251
+
252
+ @media (hover: hover) and (pointer: fine) {
253
+ :root {
254
+ --nav-top-safety-inset: 0.625rem;
255
+ }
256
+ }
257
+
258
+ .site-content {
259
+ position: relative;
260
+ z-index: 2;
261
+ width: min(calc(100% - (var(--content-gutter) * 2)), var(--page-width));
262
+ margin: 0 auto;
263
+ padding: 0;
264
+ }
265
+
266
+ .site-footer {
267
+ position: relative;
268
+ isolation: isolate;
269
+ z-index: 2;
270
+ width: min(calc(100% - (var(--content-gutter) * 2)), var(--page-width));
271
+ margin: 0 auto;
272
+ padding: 0 0 2.5rem;
273
+ background-color: var(--site-footer-background-color, var(--color-page));
274
+ color: var(--site-footer-text-color, var(--color-muted));
275
+ font-size: 0.75rem;
276
+ line-height: 1.5;
277
+ text-align: center;
278
+ }
279
+
280
+ .site-footer::before {
281
+ position: absolute;
282
+ z-index: -1;
283
+ inset: 0 calc(50% - 50vw);
284
+ background-color: var(--site-footer-background-color, var(--color-page));
285
+ content: "";
286
+ pointer-events: none;
287
+ }
288
+
289
+ .site-footer p {
290
+ margin: 0;
291
+ }
292
+
293
+ .site-footer span {
294
+ display: block;
295
+ }
296
+
297
+ .site-section {
298
+ position: relative;
299
+ isolation: isolate;
300
+ background-color: var(--section-background-color, transparent);
301
+ padding: var(--space-nav-to-first-section) 0 0;
302
+ }
303
+
304
+ .site-section::before {
305
+ position: absolute;
306
+ z-index: -1;
307
+ inset: 0 calc(50% - 50vw);
308
+ background-color: var(--section-background-color, transparent);
309
+ content: "";
310
+ pointer-events: none;
311
+ }
312
+
313
+ .site-section + .site-section {
314
+ margin-top: 0;
315
+ padding-top: var(--space-section-to-section);
316
+ }
317
+
318
+ .site-section:last-child {
319
+ padding-bottom: var(--space-section-to-section);
320
+ }
321
+
322
+ .section-card {
323
+ background: transparent;
324
+ color: var(--section-text-color, var(--color-text));
325
+ }
326
+
327
+ .section-header {
328
+ width: min(100%, var(--section-heading-width-desktop, 760px));
329
+ margin: 0 auto;
330
+ padding: 0 0 var(--section-heading-spacing, var(--space-section-title-to-body));
331
+ text-align: var(--section-heading-align-desktop, center);
332
+ }
333
+
334
+ h1,
335
+ h2,
336
+ p,
337
+ ul {
338
+ margin-top: 0;
339
+ }
340
+
341
+ h1,
342
+ h2 {
343
+ margin-bottom: 0;
344
+ color: inherit;
345
+ font-size: var(--section-heading-font-size-desktop, clamp(1.4rem, 3.1vw, 3.2rem));
346
+ font-weight: 400;
347
+ letter-spacing: 0;
348
+ line-height: var(--section-heading-line-height, 1.04);
349
+ text-transform: uppercase;
350
+ overflow-wrap: anywhere;
351
+ }
352
+
353
+ .site-section-primary h1 {
354
+ font-size: var(--section-heading-font-size-desktop, clamp(1.65rem, 4.6vw, 5.65rem));
355
+ font-weight: 700;
356
+ }
357
+
358
+ .section-body {
359
+ width: 100%;
360
+ margin: 0 auto;
361
+ color: inherit;
362
+ font-family: var(--font-sans);
363
+ font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
364
+ }
365
+
366
+ .section-markdown {
367
+ width: min(100%, var(--section-body-width-desktop, var(--text-width)));
368
+ margin: 0 auto var(--space-section-body-to-gallery);
369
+ font-size: var(--section-body-font-size-desktop, clamp(1rem, 0.96rem + 0.18vw, 1.125rem));
370
+ line-height: var(--section-body-line-height, 1.78);
371
+ text-align: var(--section-body-align-desktop, center);
372
+ }
373
+
374
+ .section-markdown p {
375
+ margin: 0 0 var(--section-body-paragraph-spacing, 1em);
376
+ }
377
+
378
+ .section-markdown .inline-style {
379
+ color: var(--inline-style-color);
380
+ }
381
+
382
+ .section-body-text-only .section-markdown {
383
+ margin-bottom: 0;
384
+ }
385
+
386
+ .section-markdown > :last-child,
387
+ .gallery-meta :last-child {
388
+ margin-bottom: 0;
389
+ }
390
+
391
+ .section-markdown h3 {
392
+ margin: 2.75rem 0 0.9rem;
393
+ border-top: 1px solid var(--color-soft);
394
+ padding-top: 1.75rem;
395
+ font-family: var(--font-sans);
396
+ font-size: 0.82rem;
397
+ letter-spacing: 0.14em;
398
+ line-height: 1.35;
399
+ text-transform: uppercase;
400
+ }
401
+
402
+ .section-markdown h4 {
403
+ margin: 0 0 0.85rem;
404
+ color: inherit;
405
+ font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.08rem);
406
+ font-weight: 400;
407
+ letter-spacing: 0.02em;
408
+ line-height: 1.5;
409
+ }
410
+
411
+ .section-markdown ul,
412
+ .section-markdown ol {
413
+ display: inline-block;
414
+ margin-right: auto;
415
+ margin-left: auto;
416
+ padding-left: 1.2rem;
417
+ text-align: left;
418
+ }
419
+
420
+ .section-markdown li + li {
421
+ margin-top: 0.35rem;
422
+ }
423
+
424
+ .gallery {
425
+ display: grid;
426
+ gap: var(--space-gallery-item);
427
+ margin-top: 0;
428
+ }
429
+
430
+ .gallery-item {
431
+ display: grid;
432
+ gap: 0.7rem;
433
+ align-content: start;
434
+ margin: 0;
435
+ }
436
+
437
+ .gallery-image-frame {
438
+ display: grid;
439
+ width: min(100%, var(--gallery-layout-width));
440
+ margin: 0 auto;
441
+ background: transparent;
442
+ place-items: center;
443
+ }
444
+
445
+ .gallery-image {
446
+ display: block;
447
+ width: auto;
448
+ margin: 0 auto;
449
+ background: transparent;
450
+ height: auto;
451
+ max-width: 100%;
452
+ max-height: var(--gallery-max-image-height);
453
+ object-fit: contain;
454
+ }
455
+
456
+ .gallery-image.gallery-image-landscape {
457
+ width: 100%;
458
+ max-height: none;
459
+ }
460
+
461
+ .gallery-carousel {
462
+ position: relative;
463
+ outline: none;
464
+ }
465
+
466
+ .gallery-carousel:focus-visible {
467
+ outline: 2px solid currentColor;
468
+ outline-offset: 0.5rem;
469
+ }
470
+
471
+ .gallery-carousel-slide {
472
+ flex: 0 0 100%;
473
+ min-width: 0;
474
+ margin: 0;
475
+ }
476
+
477
+ .gallery-carousel-stage {
478
+ position: relative;
479
+ display: grid;
480
+ width: min(100%, var(--gallery-layout-width));
481
+ max-height: var(--gallery-max-image-height);
482
+ margin: 0 auto;
483
+ aspect-ratio: var(--gallery-carousel-aspect-ratio, auto);
484
+ }
485
+
486
+ .gallery-carousel-viewport {
487
+ height: 100%;
488
+ }
489
+
490
+ .gallery-carousel-image-frame {
491
+ display: grid;
492
+ width: 100%;
493
+ height: 100%;
494
+ place-items: center;
495
+ }
496
+
497
+ .gallery-carousel[data-carousel-ready='true'] .gallery-carousel-viewport {
498
+ overflow: hidden;
499
+ }
500
+
501
+ .gallery-carousel[data-carousel-ready='true'] .gallery-carousel-slides {
502
+ display: flex;
503
+ height: 100%;
504
+ touch-action: pan-y pinch-zoom;
505
+ }
506
+
507
+ .gallery-carousel[data-carousel-ready='true'] .gallery-carousel-slide {
508
+ display: grid;
509
+ height: 100%;
510
+ align-content: start;
511
+ }
512
+
513
+ .gallery-carousel-image-frame .gallery-image.gallery-image-landscape {
514
+ width: 100%;
515
+ height: auto;
516
+ max-width: 100%;
517
+ max-height: 100%;
518
+ }
519
+
520
+ .gallery-carousel-image-frame .gallery-image:not(.gallery-image-landscape) {
521
+ width: auto;
522
+ height: 100%;
523
+ max-width: 100%;
524
+ max-height: 100%;
525
+ }
526
+
527
+ .gallery-carousel-button,
528
+ .gallery-carousel-position {
529
+ display: none;
530
+ }
531
+
532
+ .gallery-carousel[data-carousel-ready='true'] .gallery-carousel-button,
533
+ .gallery-carousel[data-carousel-ready='true'] .gallery-carousel-position {
534
+ display: grid;
535
+ }
536
+
537
+ .gallery-carousel-button {
538
+ position: absolute;
539
+ top: 50%;
540
+ z-index: 2;
541
+ width: 2.625rem;
542
+ height: 2.625rem;
543
+ padding: 0;
544
+ place-items: center;
545
+ border: 1px solid currentColor;
546
+ border-radius: 999px;
547
+ background: var(--section-background-color, var(--color-page));
548
+ box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.12);
549
+ color: inherit;
550
+ cursor: pointer;
551
+ font: inherit;
552
+ font-size: 2rem;
553
+ line-height: 1;
554
+ opacity: 0.88;
555
+ transform: translateY(-50%);
556
+ }
557
+
558
+ .gallery-carousel-button:hover:not(:disabled),
559
+ .gallery-carousel-button:focus-visible:not(:disabled) {
560
+ background: currentColor;
561
+ color: var(--section-background-color, var(--color-page));
562
+ opacity: 1;
563
+ }
564
+
565
+ .gallery-carousel-button:disabled {
566
+ cursor: default;
567
+ opacity: 0;
568
+ pointer-events: none;
569
+ }
570
+
571
+ .gallery-carousel-button-previous {
572
+ left: 0.75rem;
573
+ }
574
+
575
+ .gallery-carousel-button-next {
576
+ right: 0.75rem;
577
+ }
578
+
579
+ .gallery-carousel-position {
580
+ position: absolute;
581
+ right: 0.75rem;
582
+ bottom: 0.75rem;
583
+ z-index: 2;
584
+ min-width: 3.25rem;
585
+ min-height: 1.75rem;
586
+ place-items: center;
587
+ border: 1px solid currentColor;
588
+ background: var(--section-background-color, var(--color-page));
589
+ box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.12);
590
+ font-size: 0.85rem;
591
+ line-height: 1;
592
+ text-align: center;
593
+ }
594
+
595
+ .gallery-carousel-captions {
596
+ width: min(100%, var(--gallery-layout-width));
597
+ margin: 0 auto;
598
+ }
599
+
600
+ .gallery-carousel-caption {
601
+ margin-bottom: 0;
602
+ }
603
+
604
+ .gallery-carousel[data-carousel-ready='true'] .gallery-carousel-captions {
605
+ display: grid;
606
+ }
607
+
608
+ .gallery-carousel[data-carousel-ready='true'] .gallery-carousel-caption {
609
+ grid-area: 1 / 1;
610
+ visibility: hidden;
611
+ pointer-events: none;
612
+ }
613
+
614
+ .gallery-carousel[data-carousel-ready='true'] .gallery-carousel-caption.is-active {
615
+ visibility: visible;
616
+ pointer-events: auto;
617
+ }
618
+
619
+ .gallery-meta {
620
+ width: min(100%, var(--gallery-layout-width));
621
+ margin: var(--section-caption-spacing, 0.5em) auto 0;
622
+ font-size: var(--section-caption-font-size-desktop, 0.95rem);
623
+ text-align: var(--section-caption-align-desktop, center);
624
+ }
625
+
626
+ .gallery-details {
627
+ display: flex;
628
+ flex-wrap: wrap;
629
+ align-items: baseline;
630
+ justify-content: var(--section-caption-justify-desktop, center);
631
+ gap: 0.5rem;
632
+ margin-bottom: 0;
633
+ color: inherit;
634
+ font-size: inherit;
635
+ font-family: var(--font-sans);
636
+ letter-spacing: 0;
637
+ line-height: var(--section-caption-line-height, 1.5);
638
+ }
639
+
640
+ @media (max-width: 700px) {
641
+ :root {
642
+ --space-nav-to-first-section: 1.375rem;
643
+ --space-section-title-to-body: 0.4375rem;
644
+ --space-section-body-to-gallery: 1.25rem;
645
+ --space-gallery-item: 2.75rem;
646
+ --space-section-to-section: 2.25rem;
647
+ --content-gutter: var(--content-gutter-mobile);
648
+ --gallery-max-available-width: var(--gallery-max-available-width-mobile);
649
+ --gallery-max-image-height: var(--gallery-max-image-height-mobile);
650
+ --site-top-anchor-offset: 6.25rem;
651
+ }
652
+
653
+ .site-nav-row {
654
+ width: min(calc(100% - (var(--content-gutter) * 2)), var(--page-width));
655
+ padding: 0.75rem 0;
656
+ }
657
+
658
+ .site-brand {
659
+ max-width: min(70vw, 26rem);
660
+ font-size: 0.76rem;
661
+ overflow-wrap: anywhere;
662
+ }
663
+
664
+ .site-nav,
665
+ .site-top-has-site-nav .page-nav {
666
+ display: none;
667
+ }
668
+
669
+ .page-nav ul {
670
+ justify-content: center;
671
+ gap: 0 1.55rem;
672
+ padding: 0 1rem;
673
+ text-align: center;
674
+ }
675
+
676
+ .page-nav li + li::before {
677
+ left: -0.95rem;
678
+ }
679
+
680
+ .page-nav a {
681
+ padding: 0.95rem 0 0.85rem;
682
+ font-size: 0.72rem;
683
+ white-space: nowrap;
684
+ }
685
+
686
+ .mobile-nav-menu {
687
+ display: block;
688
+ position: relative;
689
+ flex: 0 0 auto;
690
+ }
691
+
692
+ .mobile-nav-menu summary {
693
+ display: flex;
694
+ align-items: center;
695
+ gap: 0.42rem;
696
+ border: 1px solid currentColor;
697
+ padding: 0.5rem 0.7rem 0.44rem;
698
+ font-size: 0.72rem;
699
+ font-weight: 700;
700
+ letter-spacing: 0.1em;
701
+ line-height: 1;
702
+ list-style: none;
703
+ opacity: 0.9;
704
+ text-transform: uppercase;
705
+ }
706
+
707
+ .mobile-nav-menu summary::after {
708
+ content: "▾";
709
+ font-size: 0.82em;
710
+ line-height: 1;
711
+ opacity: 0.78;
712
+ }
713
+
714
+ .mobile-nav-menu[open] summary::after {
715
+ transform: rotate(180deg);
716
+ }
717
+
718
+ .mobile-nav-menu summary::-webkit-details-marker {
719
+ display: none;
720
+ }
721
+
722
+ .mobile-nav-panel {
723
+ position: absolute;
724
+ top: calc(100% + 0.75rem);
725
+ right: 0;
726
+ display: grid;
727
+ gap: 1.75rem;
728
+ width: min(82vw, 22rem);
729
+ border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
730
+ padding: 1rem;
731
+ background: var(--site-top-background-color, var(--color-nav-background));
732
+ box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.28);
733
+ color: var(--site-top-text-color, var(--color-text));
734
+ }
735
+
736
+ .mobile-nav-panel h2 {
737
+ margin: 0 0 0.75rem;
738
+ font-size: 0.68rem;
739
+ font-weight: 700;
740
+ letter-spacing: 0.14em;
741
+ line-height: 1;
742
+ text-transform: uppercase;
743
+ }
744
+
745
+ .mobile-page-nav {
746
+ border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
747
+ padding-top: 1.05rem;
748
+ }
749
+
750
+ .mobile-nav-panel ul {
751
+ display: grid;
752
+ gap: 0.65rem;
753
+ }
754
+
755
+ .mobile-nav-panel a {
756
+ font-size: 0.82rem;
757
+ letter-spacing: 0.06em;
758
+ }
759
+
760
+ .mobile-page-nav a[aria-current='true'] {
761
+ text-decoration: underline;
762
+ text-decoration-thickness: 1px;
763
+ text-underline-offset: 0.35em;
764
+ }
765
+
766
+ .site-content {
767
+ width: min(calc(100% - (var(--content-gutter) * 2)), var(--page-width));
768
+ }
769
+
770
+ .site-footer {
771
+ width: min(calc(100% - 2rem), 34rem);
772
+ }
773
+
774
+ .site-section + .site-section {
775
+ margin-top: 0;
776
+ }
777
+
778
+ .section-body {
779
+ width: 100%;
780
+ line-height: 1.72;
781
+ }
782
+
783
+ h1,
784
+ h2 {
785
+ font-size: var(
786
+ --section-heading-font-size-mobile,
787
+ var(--section-heading-font-size-desktop, clamp(1.4rem, 3.1vw, 3.2rem))
788
+ );
789
+ }
790
+
791
+ .site-section-primary h1 {
792
+ font-size: var(
793
+ --section-heading-font-size-mobile,
794
+ var(--section-heading-font-size-desktop, clamp(1.9rem, 8vw, 3.2rem))
795
+ );
796
+ }
797
+
798
+ .section-header {
799
+ width: min(100%, var(--section-heading-width-mobile, var(--section-heading-width-desktop, 760px)));
800
+ text-align: var(--section-heading-align-mobile, var(--section-heading-align-desktop, center));
801
+ }
802
+
803
+ .section-markdown {
804
+ width: min(100%, var(--section-body-width-mobile, var(--section-body-width-desktop, var(--text-width))));
805
+ font-size: var(
806
+ --section-body-font-size-mobile,
807
+ var(--section-body-font-size-desktop, clamp(1rem, 0.96rem + 0.18vw, 1.125rem))
808
+ );
809
+ text-align: var(--section-body-align-mobile, var(--section-body-align-desktop, left));
810
+ }
811
+
812
+ .gallery-meta {
813
+ font-size: var(--section-caption-font-size-mobile, var(--section-caption-font-size-desktop, 0.95rem));
814
+ text-align: var(--section-caption-align-mobile, var(--section-caption-align-desktop, center));
815
+ }
816
+
817
+ .gallery-details {
818
+ justify-content: var(--section-caption-justify-mobile, var(--section-caption-justify-desktop, center));
819
+ }
820
+
821
+ .section-markdown h3 {
822
+ margin-top: 2.25rem;
823
+ padding-top: 1.35rem;
824
+ }
825
+
826
+ .section-markdown h4 {
827
+ text-align: center;
828
+ }
829
+
830
+ .section-markdown ul,
831
+ .section-markdown ol {
832
+ display: block;
833
+ }
834
+
835
+ .gallery-item img {
836
+ max-height: var(--gallery-max-image-height);
837
+ }
838
+
839
+ .gallery-carousel-stage {
840
+ aspect-ratio: auto;
841
+ }
842
+
843
+ .gallery-carousel-viewport {
844
+ width: 100%;
845
+ height: auto;
846
+ aspect-ratio: var(--gallery-carousel-aspect-ratio, auto);
847
+ }
848
+
849
+ .gallery-carousel[data-carousel-ready='true'] .gallery-carousel-button {
850
+ display: none;
851
+ }
852
+
853
+ .gallery-carousel-position {
854
+ position: absolute;
855
+ right: 0.5rem;
856
+ bottom: 0.5rem;
857
+ min-width: 3rem;
858
+ min-height: 1.5rem;
859
+ box-shadow: 0 0.2rem 0.75rem rgb(0 0 0 / 0.1);
860
+ font-size: 0.78rem;
861
+ opacity: 0.88;
862
+ }
863
+
864
+ .gallery {
865
+ gap: var(--space-gallery-item);
866
+ }
867
+
868
+ .gallery-details {
869
+ padding: 0 0.25rem;
870
+ font-size: 1rem;
871
+ }
872
+ }