@canopy-iiif/app 0.9.13 → 0.9.15
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/lib/build/build.js +1 -0
- package/lib/build/iiif.js +234 -12
- package/lib/build/mdx.js +13 -0
- package/lib/build/pages.js +17 -1
- package/lib/components/featured.js +6 -0
- package/lib/components/hero-slider-runtime.js +9 -2
- package/lib/iiif/thumbnail.js +262 -4
- package/package.json +2 -1
- package/ui/dist/index.mjs +294 -142
- package/ui/dist/index.mjs.map +4 -4
- package/ui/dist/server.mjs +356 -181
- package/ui/dist/server.mjs.map +4 -4
- package/ui/styles/base/_common.scss +32 -33
- package/ui/styles/base/_heading.scss +26 -11
- package/ui/styles/base/_markdown.scss +43 -0
- package/ui/styles/base/index.scss +1 -0
- package/ui/styles/components/_buttons.scss +54 -40
- package/ui/styles/components/_interstitial-hero.scss +13 -18
- package/ui/styles/components/header/_header.scss +10 -3
- package/ui/styles/components/header/_logo.scss +32 -33
- package/ui/styles/components/search/_form.scss +2 -6
- package/ui/styles/index.css +186 -144
- package/ui/theme.js +4 -4
|
@@ -1,43 +1,42 @@
|
|
|
1
|
-
|
|
2
|
-
body {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
main {
|
|
10
|
-
}
|
|
1
|
+
@layer base {
|
|
2
|
+
body {
|
|
3
|
+
margin: 0;
|
|
4
|
+
padding: 0;
|
|
5
|
+
background: var(--color-gray-50);
|
|
6
|
+
color: var(--color-gray-900);
|
|
7
|
+
}
|
|
11
8
|
|
|
12
|
-
p {
|
|
13
|
-
|
|
14
|
-
|
|
9
|
+
p {
|
|
10
|
+
line-height: 1.618;
|
|
11
|
+
margin-bottom: 1.618rem;
|
|
12
|
+
}
|
|
15
13
|
|
|
16
|
-
ol,
|
|
17
|
-
ul {
|
|
18
|
-
|
|
14
|
+
ol,
|
|
15
|
+
ul {
|
|
16
|
+
padding-left: 1.618rem;
|
|
19
17
|
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
li {
|
|
19
|
+
margin-bottom: 0.382rem;
|
|
20
|
+
}
|
|
22
21
|
}
|
|
23
|
-
}
|
|
24
22
|
|
|
25
|
-
a {
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
a {
|
|
24
|
+
text-decoration: none;
|
|
25
|
+
color: var(--color-brand-default);
|
|
28
26
|
|
|
29
|
-
|
|
30
|
-
|
|
27
|
+
&:hover {
|
|
28
|
+
text-decoration: underline;
|
|
29
|
+
}
|
|
31
30
|
}
|
|
32
|
-
}
|
|
33
31
|
|
|
34
|
-
input,
|
|
35
|
-
textarea,
|
|
36
|
-
select,
|
|
37
|
-
button {
|
|
38
|
-
|
|
39
|
-
}
|
|
32
|
+
input,
|
|
33
|
+
textarea,
|
|
34
|
+
select,
|
|
35
|
+
button {
|
|
36
|
+
font-family: inherit;
|
|
37
|
+
}
|
|
40
38
|
|
|
41
|
-
::selection {
|
|
42
|
-
|
|
39
|
+
::selection {
|
|
40
|
+
background-color: var(--color-brand-200);
|
|
41
|
+
}
|
|
43
42
|
}
|
|
@@ -1,15 +1,30 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
@layer base {
|
|
2
|
+
h1 {
|
|
3
|
+
font-size: 2.618rem;
|
|
4
|
+
line-height: 1.25;
|
|
5
|
+
margin: 0 0 1rem 0;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
h2 {
|
|
9
|
+
font-size: 1.618rem;
|
|
10
|
+
line-height: 1.25;
|
|
11
|
+
margin: 2.618rem 0 1rem;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
h3 {
|
|
15
|
+
font-size: 1.382rem;
|
|
16
|
+
line-height: 1.3;
|
|
17
|
+
letter-spacing: -0.0125em;
|
|
18
|
+
margin: 1.618rem 0 1rem;
|
|
19
|
+
font-weight: 300;
|
|
20
|
+
}
|
|
7
21
|
}
|
|
8
22
|
|
|
9
|
-
|
|
23
|
+
@utility font-display {
|
|
10
24
|
font-family: var(--font-serif);
|
|
11
|
-
font-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
25
|
+
font-weight: 600;
|
|
26
|
+
letter-spacing: -0.025em;
|
|
27
|
+
font-variation-settings:
|
|
28
|
+
"SOFT" 100,
|
|
29
|
+
"WONK" 1;
|
|
15
30
|
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
.markdown-table__frame {
|
|
2
|
+
width: 100%;
|
|
3
|
+
margin: 1.618rem 0 2.618rem;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.markdown-table {
|
|
7
|
+
width: 100%;
|
|
8
|
+
border-collapse: collapse;
|
|
9
|
+
margin: 0;
|
|
10
|
+
|
|
11
|
+
th,
|
|
12
|
+
td {
|
|
13
|
+
border: 1px solid var(--color-gray-400);
|
|
14
|
+
padding: 0.5rem 0.75rem;
|
|
15
|
+
text-align: left;
|
|
16
|
+
vertical-align: top;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
th {
|
|
20
|
+
font-size: 0.8333rem;
|
|
21
|
+
font-weight: 300;
|
|
22
|
+
letter-spacing: -0.0125em;
|
|
23
|
+
border-top: none;
|
|
24
|
+
border-left: none;
|
|
25
|
+
border-right: none;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
tbody {
|
|
29
|
+
box-shadow: 5px 5px 11px rgba(0, 0, 0, 0.05);
|
|
30
|
+
|
|
31
|
+
tr {
|
|
32
|
+
&:nth-child(even) {
|
|
33
|
+
background-color: var(--color-gray-200);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
code {
|
|
39
|
+
font-family: var(--font-mono);
|
|
40
|
+
font-size: 0.875rem;
|
|
41
|
+
color: var(--color-gray-900);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
@@ -1,50 +1,64 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
1
|
+
@layer components {
|
|
2
|
+
.canopy-button {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
gap: 0.35rem;
|
|
7
|
+
padding: 0.55rem 1.4rem;
|
|
8
|
+
border-radius: 9999px;
|
|
9
|
+
font-size: 0.9375rem;
|
|
10
|
+
font-weight: 600;
|
|
11
|
+
text-decoration: none;
|
|
12
|
+
transition:
|
|
13
|
+
background-color 0.2s ease,
|
|
14
|
+
color 0.2s ease,
|
|
15
|
+
border-color 0.2s ease,
|
|
16
|
+
box-shadow 0.2s ease;
|
|
16
17
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
color: var(--color-gray-50, #f9fafb);
|
|
20
|
-
box-shadow: 0 18px 32px -22px rgba(15, 23, 42, 0.55);
|
|
21
|
-
|
|
22
|
-
&:hover,
|
|
23
|
-
&:focus-visible {
|
|
24
|
-
background-color: var(--color-brand-700, #4338ca);
|
|
18
|
+
&--primary {
|
|
19
|
+
background-color: var(--color-brand-600, #4f46e5);
|
|
25
20
|
color: var(--color-gray-50, #f9fafb);
|
|
26
|
-
|
|
27
|
-
}
|
|
21
|
+
box-shadow: 0 18px 32px -22px rgba(15, 23, 42, 0.55);
|
|
28
22
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
transparent
|
|
36
|
-
);
|
|
37
|
-
background-color: transparent;
|
|
23
|
+
&:hover,
|
|
24
|
+
&:focus-visible {
|
|
25
|
+
background-color: var(--color-brand-700, #4338ca);
|
|
26
|
+
color: var(--color-gray-50, #f9fafb);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
38
29
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
30
|
+
&--secondary {
|
|
31
|
+
border: 1px solid
|
|
32
|
+
color-mix(in srgb, var(--color-gray-400, #94a3b8) 60%, transparent);
|
|
33
|
+
color: color-mix(
|
|
43
34
|
in srgb,
|
|
44
|
-
var(--color-
|
|
35
|
+
var(--color-gray-900, #0f172a) 92%,
|
|
45
36
|
transparent
|
|
46
37
|
);
|
|
47
|
-
color: var(--color-
|
|
38
|
+
background-color: var(--color-gray-50);
|
|
39
|
+
|
|
40
|
+
&:hover,
|
|
41
|
+
&:focus-visible {
|
|
42
|
+
border-color: color-mix(
|
|
43
|
+
in srgb,
|
|
44
|
+
var(--color-brand-400, #818cf8) 65%,
|
|
45
|
+
transparent
|
|
46
|
+
);
|
|
47
|
+
background-color: color-mix(
|
|
48
|
+
in srgb,
|
|
49
|
+
var(--color-brand-200, #c7d2fe) 25%,
|
|
50
|
+
transparent
|
|
51
|
+
);
|
|
52
|
+
color: var(--color-brand-700, #4338ca);
|
|
53
|
+
}
|
|
48
54
|
}
|
|
49
55
|
}
|
|
56
|
+
|
|
57
|
+
.canopy-button-group {
|
|
58
|
+
display: flex;
|
|
59
|
+
flex-wrap: wrap;
|
|
60
|
+
align-items: center;
|
|
61
|
+
gap: 0.75rem;
|
|
62
|
+
padding: 1rem 0;
|
|
63
|
+
}
|
|
50
64
|
}
|
|
@@ -3,18 +3,22 @@
|
|
|
3
3
|
width: 100%;
|
|
4
4
|
isolation: isolate;
|
|
5
5
|
margin-bottom: 2.618rem;
|
|
6
|
+
margin-top: -5rem;
|
|
7
|
+
z-index: 0;
|
|
8
|
+
padding-top: 4rem;
|
|
6
9
|
|
|
7
10
|
&--hero {
|
|
8
11
|
--hero-height: 520px;
|
|
9
|
-
--hero-bg-start: var(--color-
|
|
12
|
+
--hero-bg-start: var(--color-gray-50);
|
|
13
|
+
--hero-bg-mid: var(--color-brand-100);
|
|
10
14
|
--hero-bg-end: var(--color-brand-200);
|
|
11
|
-
--hero-caption-link: var(--color-brand-700);
|
|
12
15
|
--hero-dot-bg: var(--color-brand-300);
|
|
13
16
|
--hero-dot-active-bg: var(--color-brand-700);
|
|
14
17
|
|
|
15
18
|
background: linear-gradient(
|
|
16
|
-
|
|
17
|
-
var(--hero-bg-start)
|
|
19
|
+
173deg,
|
|
20
|
+
var(--hero-bg-start) 5rem,
|
|
21
|
+
var(--hero-bg-mid) 61.8%,
|
|
18
22
|
var(--hero-bg-end) 100%
|
|
19
23
|
);
|
|
20
24
|
min-height: var(--hero-height);
|
|
@@ -107,7 +111,7 @@
|
|
|
107
111
|
|
|
108
112
|
@media (min-width: 64rem) {
|
|
109
113
|
.canopy-interstitial__body .canopy-interstitial__headline {
|
|
110
|
-
font-size:
|
|
114
|
+
font-size: 2.618rem;
|
|
111
115
|
}
|
|
112
116
|
}
|
|
113
117
|
}
|
|
@@ -178,7 +182,7 @@
|
|
|
178
182
|
height: 100%;
|
|
179
183
|
flex: 1 1 auto;
|
|
180
184
|
overflow: hidden;
|
|
181
|
-
border-radius:
|
|
185
|
+
border-radius: 0.75rem;
|
|
182
186
|
}
|
|
183
187
|
|
|
184
188
|
&__media--static {
|
|
@@ -231,17 +235,12 @@
|
|
|
231
235
|
&__headline {
|
|
232
236
|
margin: 0;
|
|
233
237
|
font-size: 2rem;
|
|
234
|
-
font-weight: 600;
|
|
235
238
|
line-height: 1.08;
|
|
236
|
-
letter-spacing: -0.01em;
|
|
237
239
|
}
|
|
238
240
|
|
|
239
241
|
&__description {
|
|
240
242
|
margin: 0;
|
|
241
243
|
max-width: 42rem;
|
|
242
|
-
font-size: 1rem;
|
|
243
|
-
line-height: 1.7;
|
|
244
|
-
color: color-mix(in srgb, currentColor 82%, transparent);
|
|
245
244
|
}
|
|
246
245
|
|
|
247
246
|
&__actions {
|
|
@@ -254,19 +253,15 @@
|
|
|
254
253
|
&__caption {
|
|
255
254
|
position: absolute;
|
|
256
255
|
bottom: 1.75rem;
|
|
256
|
+
font-weight: 600;
|
|
257
257
|
right: 2rem;
|
|
258
258
|
z-index: 3;
|
|
259
|
-
font-size: 0.8333rem;
|
|
260
|
-
letter-spacing: 0.12em;
|
|
261
|
-
text-transform: uppercase;
|
|
262
|
-
color: var(--hero-caption-color);
|
|
263
259
|
}
|
|
264
260
|
|
|
265
261
|
&__caption--static {
|
|
266
262
|
position: static;
|
|
267
263
|
margin: 1.5rem auto 0;
|
|
268
264
|
text-align: center;
|
|
269
|
-
color: var(--hero-caption-color);
|
|
270
265
|
}
|
|
271
266
|
|
|
272
267
|
&__caption-link {
|
|
@@ -396,11 +391,11 @@
|
|
|
396
391
|
}
|
|
397
392
|
|
|
398
393
|
.canopy-interstitial__headline {
|
|
399
|
-
font-size:
|
|
394
|
+
font-size: 2.618rem;
|
|
400
395
|
}
|
|
401
396
|
|
|
402
397
|
.canopy-interstitial__description {
|
|
403
|
-
font-size:
|
|
398
|
+
font-size: 1rem;
|
|
404
399
|
}
|
|
405
400
|
}
|
|
406
401
|
|
|
@@ -5,7 +5,8 @@
|
|
|
5
5
|
align-items: center;
|
|
6
6
|
gap: 0.75rem;
|
|
7
7
|
padding: 0.75rem 1rem;
|
|
8
|
-
background:
|
|
8
|
+
background: trabsparent;
|
|
9
|
+
z-index: 1;
|
|
9
10
|
}
|
|
10
11
|
|
|
11
12
|
.canopy-header__brand {
|
|
@@ -26,7 +27,10 @@
|
|
|
26
27
|
border: 1px solid var(--color-gray-200, #e2e8f0);
|
|
27
28
|
background: rgba(255, 255, 255, 0.8);
|
|
28
29
|
color: var(--color-gray-800, #1f2937);
|
|
29
|
-
transition:
|
|
30
|
+
transition:
|
|
31
|
+
background 150ms ease,
|
|
32
|
+
color 150ms ease,
|
|
33
|
+
border-color 150ms ease;
|
|
30
34
|
}
|
|
31
35
|
|
|
32
36
|
.canopy-header__menu:hover,
|
|
@@ -76,7 +80,10 @@
|
|
|
76
80
|
border: 1px solid var(--color-gray-200, #e2e8f0);
|
|
77
81
|
background: rgba(255, 255, 255, 0.8);
|
|
78
82
|
color: var(--color-gray-800, #1f2937);
|
|
79
|
-
transition:
|
|
83
|
+
transition:
|
|
84
|
+
background 150ms ease,
|
|
85
|
+
color 150ms ease,
|
|
86
|
+
border-color 150ms ease;
|
|
80
87
|
}
|
|
81
88
|
|
|
82
89
|
.canopy-header__icon-button:hover,
|
|
@@ -1,44 +1,43 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
letter-spacing: -0.025em;
|
|
10
|
-
line-height: 1;
|
|
1
|
+
@layer components {
|
|
2
|
+
.canopy-logo {
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
gap: 0.618rem;
|
|
6
|
+
font-size: 1.382rem;
|
|
7
|
+
color: var(--color-gray-default) !important;
|
|
8
|
+
line-height: 1;
|
|
11
9
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
&:hover {
|
|
11
|
+
text-decoration: none;
|
|
12
|
+
}
|
|
15
13
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
svg {
|
|
15
|
+
height: 1.65rem;
|
|
16
|
+
display: block;
|
|
19
17
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
18
|
+
circle.canopy-logo-backlight {
|
|
19
|
+
fill: var(--color-brand-900);
|
|
20
|
+
color: var(--color-brand-900);
|
|
21
|
+
}
|
|
24
22
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
path.canopy-logo-overlay {
|
|
24
|
+
fill: var(--color-brand-default);
|
|
25
|
+
color: var(--color-brand-default);
|
|
26
|
+
}
|
|
28
27
|
}
|
|
29
28
|
}
|
|
30
|
-
}
|
|
31
29
|
|
|
32
|
-
html.dark
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
30
|
+
html.dark .canopy-logo {
|
|
31
|
+
svg {
|
|
32
|
+
circle.canopy-logo-backlight {
|
|
33
|
+
fill: var(--color-brand-200) !important;
|
|
34
|
+
color: var(--color-brand-200) !important;
|
|
35
|
+
}
|
|
38
36
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
37
|
+
path.canopy-logo-overlay {
|
|
38
|
+
fill: var(--color-brand-500) !important;
|
|
39
|
+
color: var(--color-brand-500) !important;
|
|
40
|
+
}
|
|
42
41
|
}
|
|
43
42
|
}
|
|
44
43
|
}
|
|
@@ -3,14 +3,10 @@
|
|
|
3
3
|
--search-form-label-padding-y: 0.625rem;
|
|
4
4
|
position: relative;
|
|
5
5
|
backdrop-filter: blur(12px);
|
|
6
|
-
background-color: color-mix(
|
|
7
|
-
in srgb,
|
|
8
|
-
var(--color-gray-100, #f0f0f3) 95%,
|
|
9
|
-
transparent
|
|
10
|
-
);
|
|
11
6
|
transition:
|
|
12
7
|
box-shadow var(--duration-fast, 150ms) ease,
|
|
13
8
|
background-color var(--duration-fast, 150ms) ease;
|
|
9
|
+
background-color: var(--color-gray-50);
|
|
14
10
|
cursor: text;
|
|
15
11
|
padding-right: 0.4rem;
|
|
16
12
|
|
|
@@ -80,7 +76,7 @@
|
|
|
80
76
|
display: flex;
|
|
81
77
|
align-items: center;
|
|
82
78
|
gap: 0.5rem;
|
|
83
|
-
border: 1px solid var(--color-gray-
|
|
79
|
+
border: 1px solid var(--color-gray-200, #cdced6);
|
|
84
80
|
border-radius: 0.75rem;
|
|
85
81
|
color: var(--color-gray-700, #60646c);
|
|
86
82
|
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
|