@canopy-iiif/app 0.10.15 → 0.10.17

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 (16) hide show
  1. package/lib/build/iiif.js +4 -0
  2. package/lib/build/mdx.js +18 -0
  3. package/lib/build/pages.js +20 -2
  4. package/lib/common.js +33 -2
  5. package/lib/search/search.js +12 -2
  6. package/package.json +1 -1
  7. package/ui/dist/index.mjs +17 -3
  8. package/ui/dist/index.mjs.map +2 -2
  9. package/ui/dist/server.mjs +17 -3
  10. package/ui/dist/server.mjs.map +2 -2
  11. package/ui/styles/base/_heading.scss +7 -0
  12. package/ui/styles/base/_markdown.scss +18 -0
  13. package/ui/styles/base/_utilities.scss +4 -0
  14. package/ui/styles/components/_work.scss +36 -0
  15. package/ui/styles/components/index.scss +1 -0
  16. package/ui/styles/index.css +124 -66
package/ui/styles/base/_heading.scss CHANGED
@@ -18,6 +18,13 @@
18
18
  margin: 1.618rem 0 1rem;
19
19
  font-weight: 300;
20
20
  }
21
+
22
+ .canopy-lead {
23
+ font-size: 1.382rem;
24
+ color: var(--color-gray-700);
25
+ margin: 0.5rem 0 2rem 0;
26
+ line-height: 1.4;
27
+ }
21
28
  }
22
29
 
23
30
  @utility font-display {
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/base/_utilities.scss CHANGED
@@ -1,3 +1,7 @@
1
1
  @utility max-w-content {
2
2
  max-width: 1080px;
3
3
  }
4
+
5
+ @utility max-w-wide {
6
+ max-width: 1300px;
7
+ }
package/ui/styles/components/_work.scss ADDED
@@ -0,0 +1,36 @@
1
+ @layer components {
2
+ body.canopy-type-work {
3
+ main {
4
+ h1 {
5
+ font-size: 2rem;
6
+ line-height: 1.1;
7
+ margin: 1.618rem 0;
8
+ }
9
+
10
+ dl {
11
+ padding: 0;
12
+ }
13
+
14
+ dl > div {
15
+ display: grid;
16
+ gap: 0.2rem;
17
+ padding: 0.85rem 0;
18
+ }
19
+
20
+ dt {
21
+ font-size: 0.7222rem;
22
+ text-transform: uppercase;
23
+ margin: 0;
24
+ font-weight: 400;
25
+ color: var(--color-gray-700);
26
+ }
27
+
28
+ dd {
29
+ margin: 0;
30
+ color: var(--color-gray-900);
31
+ font-size: 1rem;
32
+ line-height: 1.45;
33
+ }
34
+ }
35
+ }
36
+ }
package/ui/styles/components/index.scss CHANGED
@@ -8,3 +8,4 @@
8
8
  @use "./iiif";
9
9
  @use "./search";
10
10
  @use "./sub-navigation";
11
+ @use "./work";
package/ui/styles/index.css CHANGED
@@ -1,74 +1,74 @@
1
1
  /* canopy-theme */
2
2
  @layer properties {
3
3
  :root {
4
- --color-accent-50: #121211;
5
- --color-accent-100: #24231f;
6
- --color-accent-200: #2d2b26;
7
- --color-accent-300: #444039;
8
- --color-accent-400: #544f46;
9
- --color-accent-500: #696256;
10
- --color-accent-600: #978365;
11
- --color-accent-700: #a39073;
12
- --color-accent-800: #cbb99f;
13
- --color-accent-900: #eee9e3;
14
- --color-accent-default: #a39073;
15
- --color-gray-50: #111110;
16
- --color-gray-100: #222221;
17
- --color-gray-200: #2a2a28;
18
- --color-gray-300: #3b3a37;
19
- --color-gray-400: #494844;
20
- --color-gray-500: #62605b;
21
- --color-gray-600: #6f6d66;
22
- --color-gray-700: #7c7b74;
23
- --color-gray-800: #b5b3ad;
24
- --color-gray-900: #f5f5f4;
25
- --color-gray-default: #f5f5f4;
26
- --color-gray-muted: #6f6d66;
27
- --colors-accent: #a39073 !important;
28
- --colors-accentAlt: #cbb99f !important;
29
- --colors-accentMuted: #544f46 !important;
30
- --colors-primary: #f5f5f4 !important;
31
- --colors-primaryAlt: #f5f5f4 !important;
32
- --colors-primaryMuted: #f5f5f4 !important;
33
- --colors-secondary: #111110 !important;
34
- --colors-secondaryAlt: #111110 !important;
35
- --colors-secondaryMuted: #111110 !important;
36
- color-scheme: dark;
4
+ --color-accent-50: #fdfdfe;
5
+ --color-accent-100: #edf2fe;
6
+ --color-accent-200: #e1e9ff;
7
+ --color-accent-300: #c1d0ff;
8
+ --color-accent-400: #abbdf9;
9
+ --color-accent-500: #8da4ef;
10
+ --color-accent-600: #3e63dd;
11
+ --color-accent-700: #3358d4;
12
+ --color-accent-800: #3a5bc7;
13
+ --color-accent-900: #172245;
14
+ --color-accent-default: #3358d4;
15
+ --color-gray-50: #fcfcfd;
16
+ --color-gray-100: #f0f0f3;
17
+ --color-gray-200: #e8e8ec;
18
+ --color-gray-300: #d9d9e0;
19
+ --color-gray-400: #cdced6;
20
+ --color-gray-500: #b9bbc6;
21
+ --color-gray-600: #8b8d98;
22
+ --color-gray-700: #80838d;
23
+ --color-gray-800: #60646c;
24
+ --color-gray-900: #111316;
25
+ --color-gray-default: #111316;
26
+ --color-gray-muted: #8b8d98;
27
+ --colors-accent: #3358d4 !important;
28
+ --colors-accentAlt: #3a5bc7 !important;
29
+ --colors-accentMuted: #abbdf9 !important;
30
+ --colors-primary: #111316 !important;
31
+ --colors-primaryAlt: #111316 !important;
32
+ --colors-primaryMuted: #111316 !important;
33
+ --colors-secondary: #fcfcfd !important;
34
+ --colors-secondaryAlt: #fcfcfd !important;
35
+ --colors-secondaryMuted: #fcfcfd !important;
36
+ color-scheme: light;
37
37
  }
38
38
  :host {
39
- --color-accent-50: #121211;
40
- --color-accent-100: #24231f;
41
- --color-accent-200: #2d2b26;
42
- --color-accent-300: #444039;
43
- --color-accent-400: #544f46;
44
- --color-accent-500: #696256;
45
- --color-accent-600: #978365;
46
- --color-accent-700: #a39073;
47
- --color-accent-800: #cbb99f;
48
- --color-accent-900: #eee9e3;
49
- --color-accent-default: #a39073;
50
- --color-gray-50: #111110;
51
- --color-gray-100: #222221;
52
- --color-gray-200: #2a2a28;
53
- --color-gray-300: #3b3a37;
54
- --color-gray-400: #494844;
55
- --color-gray-500: #62605b;
56
- --color-gray-600: #6f6d66;
57
- --color-gray-700: #7c7b74;
58
- --color-gray-800: #b5b3ad;
59
- --color-gray-900: #f5f5f4;
60
- --color-gray-default: #f5f5f4;
61
- --color-gray-muted: #6f6d66;
62
- --colors-accent: #a39073 !important;
63
- --colors-accentAlt: #cbb99f !important;
64
- --colors-accentMuted: #544f46 !important;
65
- --colors-primary: #f5f5f4 !important;
66
- --colors-primaryAlt: #f5f5f4 !important;
67
- --colors-primaryMuted: #f5f5f4 !important;
68
- --colors-secondary: #111110 !important;
69
- --colors-secondaryAlt: #111110 !important;
70
- --colors-secondaryMuted: #111110 !important;
71
- color-scheme: dark;
39
+ --color-accent-50: #fdfdfe;
40
+ --color-accent-100: #edf2fe;
41
+ --color-accent-200: #e1e9ff;
42
+ --color-accent-300: #c1d0ff;
43
+ --color-accent-400: #abbdf9;
44
+ --color-accent-500: #8da4ef;
45
+ --color-accent-600: #3e63dd;
46
+ --color-accent-700: #3358d4;
47
+ --color-accent-800: #3a5bc7;
48
+ --color-accent-900: #172245;
49
+ --color-accent-default: #3358d4;
50
+ --color-gray-50: #fcfcfd;
51
+ --color-gray-100: #f0f0f3;
52
+ --color-gray-200: #e8e8ec;
53
+ --color-gray-300: #d9d9e0;
54
+ --color-gray-400: #cdced6;
55
+ --color-gray-500: #b9bbc6;
56
+ --color-gray-600: #8b8d98;
57
+ --color-gray-700: #80838d;
58
+ --color-gray-800: #60646c;
59
+ --color-gray-900: #111316;
60
+ --color-gray-default: #111316;
61
+ --color-gray-muted: #8b8d98;
62
+ --colors-accent: #3358d4 !important;
63
+ --colors-accentAlt: #3a5bc7 !important;
64
+ --colors-accentMuted: #abbdf9 !important;
65
+ --colors-primary: #111316 !important;
66
+ --colors-primaryAlt: #111316 !important;
67
+ --colors-primaryMuted: #111316 !important;
68
+ --colors-secondary: #fcfcfd !important;
69
+ --colors-secondaryAlt: #fcfcfd !important;
70
+ --colors-secondaryMuted: #fcfcfd !important;
71
+ color-scheme: light;
72
72
  }
73
73
  }
74
74
  /* canopy-theme:end */
@@ -130,6 +130,12 @@
130
130
  margin: 1.618rem 0 1rem;
131
131
  font-weight: 300;
132
132
  }
133
+ .canopy-lead {
134
+ font-size: 1.382rem;
135
+ color: var(--color-gray-700);
136
+ margin: 0.5rem 0 2rem 0;
137
+ line-height: 1.4;
138
+ }
133
139
  }
134
140
  @utility font-display {
135
141
  font-family: var(--font-serif);
@@ -174,9 +180,33 @@
174
180
  color: var(--color-gray-900);
175
181
  }
176
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
+
177
204
  @utility max-w-content {
178
205
  max-width: 1080px;
179
206
  }
207
+ @utility max-w-wide {
208
+ max-width: 1300px;
209
+ }
180
210
  @layer components {
181
211
  .canopy-button {
182
212
  display: inline-flex;
@@ -1710,6 +1740,34 @@
1710
1740
  display: none;
1711
1741
  }
1712
1742
 
1743
+ @layer components {
1744
+ body.canopy-type-work main h1 {
1745
+ font-size: 2rem;
1746
+ line-height: 1.1;
1747
+ margin: 1.618rem 0;
1748
+ }
1749
+ body.canopy-type-work main dl {
1750
+ padding: 0;
1751
+ }
1752
+ body.canopy-type-work main dl > div {
1753
+ display: grid;
1754
+ gap: 0.2rem;
1755
+ padding: 0.85rem 0;
1756
+ }
1757
+ body.canopy-type-work main dt {
1758
+ font-size: 0.7222rem;
1759
+ text-transform: uppercase;
1760
+ margin: 0;
1761
+ font-weight: 400;
1762
+ color: var(--color-gray-700);
1763
+ }
1764
+ body.canopy-type-work main dd {
1765
+ margin: 0;
1766
+ color: var(--color-gray-900);
1767
+ font-size: 1rem;
1768
+ line-height: 1.45;
1769
+ }
1770
+ }
1713
1771
  /**
1714
1772
  * Define source files for utility classes
1715
1773
  */