@canopy-iiif/app 0.10.16 → 0.10.18

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 (14) hide show
  1. package/lib/build/build.js +2 -0
  2. package/lib/build/iiif.js +12 -1
  3. package/lib/build/mdx.js +18 -0
  4. package/lib/build/pages.js +20 -0
  5. package/lib/components/referenced.js +212 -0
  6. package/package.json +1 -1
  7. package/ui/dist/index.mjs +5 -3
  8. package/ui/dist/index.mjs.map +2 -2
  9. package/ui/dist/server.mjs +227 -29
  10. package/ui/dist/server.mjs.map +4 -4
  11. package/ui/styles/base/_markdown.scss +18 -0
  12. package/ui/styles/components/_referenced-items.scss +74 -0
  13. package/ui/styles/components/index.scss +1 -0
  14. package/ui/styles/index.css +96 -0
package/ui/styles/base/_markdown.scss CHANGED
@@ -41,3 +41,21 @@
41
41
  color: var(--color-gray-900);
42
42
  }
43
43
  }
44
+
45
+ section[data-footnotes],
46
+ .footnotes {
47
+ margin-top: 2.618rem;
48
+ padding-top: 2.168rem;
49
+ border-top: 1px solid var(--color-gray-200);
50
+
51
+ ol,
52
+ ul {
53
+ list-style: decimal;
54
+ padding-left: 1.618rem;
55
+
56
+ li {
57
+ list-style: decimal;
58
+ margin-bottom: 0.618rem;
59
+ }
60
+ }
61
+ }
package/ui/styles/components/_referenced-items.scss ADDED
@@ -0,0 +1,74 @@
1
+ .referenced-items {
2
+ margin: clamp(2rem, 6vw, 4rem) 0;
3
+ width: 100%;
4
+ }
5
+
6
+ .referenced-items__heading {
7
+ font-family: var(--font-serif);
8
+ font-size: clamp(1.5rem, 2vw, 1.9rem);
9
+ font-weight: 600;
10
+ letter-spacing: -0.02em;
11
+ margin-bottom: 1.5rem;
12
+ }
13
+
14
+ .referenced-items__grid {
15
+ display: grid;
16
+ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
17
+ gap: clamp(1rem, 2vw, 1.75rem);
18
+ }
19
+
20
+ .referenced-items__item {
21
+ display: flex;
22
+ flex-direction: column;
23
+ }
24
+
25
+ .referenced-items__card {
26
+ height: 100%;
27
+ }
28
+
29
+ .referenced-items--empty {
30
+ border-top: 1px solid var(--color-gray-200);
31
+ padding: 1.5rem 0;
32
+ color: var(--color-gray-600);
33
+ font-style: italic;
34
+ }
35
+
36
+ .references {
37
+ margin: 0;
38
+ padding: 0;
39
+ }
40
+
41
+ .references__group {
42
+ display: grid;
43
+ gap: 0.2rem;
44
+ padding: 0.85rem 0;
45
+ }
46
+
47
+ .references dt {
48
+ font-size: 0.7222rem;
49
+ text-transform: uppercase;
50
+ margin: 0;
51
+ font-weight: 400;
52
+ color: var(--color-gray-700);
53
+ }
54
+
55
+ .references__item {
56
+ margin: 0;
57
+ color: var(--color-gray-900);
58
+ font-size: 1rem;
59
+ line-height: 1.45;
60
+ }
61
+
62
+ .references__item a {
63
+ color: var(--color-accent-default);
64
+ text-decoration: none;
65
+ }
66
+
67
+ .references__item a:hover {
68
+ text-decoration: underline;
69
+ }
70
+
71
+ .references__empty {
72
+ color: var(--color-gray-600);
73
+ font-style: italic;
74
+ }
package/ui/styles/components/index.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @use "./buttons";
2
2
  @use "./card";
3
3
  @use "./layout";
4
+ @use "./referenced-items";
4
5
  @use "./header";
5
6
  @use "./footer";
6
7
  @use "./modal";
package/ui/styles/index.css CHANGED
@@ -180,6 +180,27 @@
180
180
  color: var(--color-gray-900);
181
181
  }
182
182
 
183
+ section[data-footnotes],
184
+ .footnotes {
185
+ margin-top: 2.618rem;
186
+ padding-top: 2.168rem;
187
+ border-top: 1px solid var(--color-gray-200);
188
+ }
189
+ section[data-footnotes] ol,
190
+ section[data-footnotes] ul,
191
+ .footnotes ol,
192
+ .footnotes ul {
193
+ list-style: decimal;
194
+ padding-left: 1.618rem;
195
+ }
196
+ section[data-footnotes] ol li,
197
+ section[data-footnotes] ul li,
198
+ .footnotes ol li,
199
+ .footnotes ul li {
200
+ list-style: decimal;
201
+ margin-bottom: 0.618rem;
202
+ }
203
+
183
204
  @utility max-w-content {
184
205
  max-width: 1080px;
185
206
  }
@@ -409,6 +430,81 @@
409
430
  grid-template-columns: var(--canopy-layout-sidebar-width) minmax(0, 1fr) var(--canopy-layout-content-nav-width);
410
431
  }
411
432
  }
433
+ .referenced-items {
434
+ margin: clamp(2rem, 6vw, 4rem) 0;
435
+ width: 100%;
436
+ }
437
+
438
+ .referenced-items__heading {
439
+ font-family: var(--font-serif);
440
+ font-size: clamp(1.5rem, 2vw, 1.9rem);
441
+ font-weight: 600;
442
+ letter-spacing: -0.02em;
443
+ margin-bottom: 1.5rem;
444
+ }
445
+
446
+ .referenced-items__grid {
447
+ display: grid;
448
+ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
449
+ gap: clamp(1rem, 2vw, 1.75rem);
450
+ }
451
+
452
+ .referenced-items__item {
453
+ display: flex;
454
+ flex-direction: column;
455
+ }
456
+
457
+ .referenced-items__card {
458
+ height: 100%;
459
+ }
460
+
461
+ .referenced-items--empty {
462
+ border-top: 1px solid var(--color-gray-200);
463
+ padding: 1.5rem 0;
464
+ color: var(--color-gray-600);
465
+ font-style: italic;
466
+ }
467
+
468
+ .references {
469
+ margin: 0;
470
+ padding: 0;
471
+ }
472
+
473
+ .references__group {
474
+ display: grid;
475
+ gap: 0.2rem;
476
+ padding: 0.85rem 0;
477
+ }
478
+
479
+ .references dt {
480
+ font-size: 0.7222rem;
481
+ text-transform: uppercase;
482
+ margin: 0;
483
+ font-weight: 400;
484
+ color: var(--color-gray-700);
485
+ }
486
+
487
+ .references__item {
488
+ margin: 0;
489
+ color: var(--color-gray-900);
490
+ font-size: 1rem;
491
+ line-height: 1.45;
492
+ }
493
+
494
+ .references__item a {
495
+ color: var(--color-accent-default);
496
+ text-decoration: none;
497
+ }
498
+
499
+ .references__item a:hover {
500
+ text-decoration: underline;
501
+ }
502
+
503
+ .references__empty {
504
+ color: var(--color-gray-600);
505
+ font-style: italic;
506
+ }
507
+
412
508
  @layer components {
413
509
  .canopy-header {
414
510
  position: relative;