@canopy-iiif/app 0.12.4 → 0.12.5

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.
@@ -0,0 +1,272 @@
1
+ .canopy-timeline {
2
+ font-size: 1rem;
3
+ line-height: 1.5;
4
+ color: var(--color-gray-800);
5
+ display: flex;
6
+ flex-direction: column;
7
+ gap: 1rem;
8
+ margin: 2.618rem 0;
9
+ }
10
+
11
+ .canopy-timeline__title {
12
+ margin: 0;
13
+ font-size: 1rem;
14
+ font-weight: 600;
15
+ }
16
+
17
+ .canopy-timeline__description {
18
+ margin: 0;
19
+ font-size: 1rem;
20
+ color: var(--color-gray-700);
21
+ }
22
+
23
+ .canopy-timeline__range {
24
+ margin: 0;
25
+ font-size: 1rem;
26
+ text-transform: uppercase;
27
+ letter-spacing: 0.2em;
28
+ color: var(--color-gray-600);
29
+ }
30
+
31
+ .canopy-timeline__body {
32
+ position: relative;
33
+ }
34
+
35
+ .canopy-timeline__list {
36
+ position: relative;
37
+ min-height: 400px;
38
+ }
39
+
40
+ .canopy-timeline__spine {
41
+ position: absolute;
42
+ top: 0;
43
+ bottom: 0;
44
+ left: 50%;
45
+ transform: translateX(-50%);
46
+ width: 1rem;
47
+ background: var(--color-accent-300);
48
+ z-index: 0;
49
+ }
50
+
51
+ .canopy-timeline__step {
52
+ position: absolute;
53
+ left: calc(50% - 0.5rem);
54
+ display: flex;
55
+ gap: 0.35rem;
56
+ pointer-events: none;
57
+ z-index: 1;
58
+ }
59
+
60
+ .canopy-timeline__step-line {
61
+ width: 1rem;
62
+ height: 0.125rem;
63
+ background: var(--color-gray-50);
64
+ }
65
+
66
+ .canopy-timeline__step-label {
67
+ font-size: 0.8333rem;
68
+ font-weight: 600;
69
+ color: var(--color-gray-900);
70
+ transform: translateX(0.5rem);
71
+ margin-top: -0.618rem;
72
+ }
73
+
74
+ .canopy-timeline__point-wrapper {
75
+ position: absolute;
76
+ width: 50%;
77
+ display: flex;
78
+ align-items: center;
79
+ }
80
+
81
+ .canopy-timeline__point-wrapper--left {
82
+ right: 50%;
83
+ justify-content: flex-end;
84
+ padding-right: 0.125rem;
85
+ text-align: right;
86
+ }
87
+
88
+ .canopy-timeline__point-wrapper--right {
89
+ left: 50%;
90
+ justify-content: flex-start;
91
+ padding-left: 0.125rem;
92
+ text-align: left;
93
+ }
94
+
95
+ .canopy-timeline__point,
96
+ .canopy-timeline__group {
97
+ width: min(100%, 28rem);
98
+ border-radius: 1.25rem;
99
+ border: 1px solid var(--color-gray-200);
100
+ background: var(--color-gray-50);
101
+ padding: 1rem 1.25rem;
102
+ box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
103
+ transition:
104
+ border-color 150ms ease,
105
+ box-shadow 150ms ease;
106
+ display: flex;
107
+ flex-direction: column;
108
+ gap: 0.75rem;
109
+ }
110
+
111
+ .canopy-timeline__point.is-active,
112
+ .canopy-timeline__group.is-active {
113
+ border-color: var(--color-accent-400);
114
+ box-shadow:
115
+ 0 12px 22px rgba(15, 23, 42, 0.15),
116
+ 0 0 0 2px color-mix(in srgb, var(--color-accent-300) 45%, transparent);
117
+ }
118
+
119
+ .canopy-timeline__point.is-highlighted {
120
+ border-color: var(--color-accent-600);
121
+ }
122
+
123
+ .canopy-timeline__point-date,
124
+ .canopy-timeline__group-point-date,
125
+ .canopy-timeline__group-count {
126
+ font-size: 1rem;
127
+ text-transform: uppercase;
128
+ letter-spacing: 0.18em;
129
+ color: var(--color-gray-600);
130
+ font-weight: 600;
131
+ }
132
+
133
+ .canopy-timeline__point-title,
134
+ .canopy-timeline__group-point-title {
135
+ display: block;
136
+ font-size: 1rem;
137
+ font-weight: 600;
138
+ color: var(--color-gray-900);
139
+ margin-top: 0.25rem;
140
+ }
141
+
142
+ .canopy-timeline__point-summary,
143
+ .canopy-timeline__group-range {
144
+ font-size: 1rem;
145
+ color: var(--color-gray-700);
146
+ margin: 0.25rem 0 0;
147
+ }
148
+
149
+ .canopy-timeline__connector {
150
+ display: inline-flex;
151
+ align-items: center;
152
+ flex-shrink: 0;
153
+ }
154
+
155
+ .canopy-timeline__connector-line {
156
+ width: clamp(2.618rem, 6vw, 2.618rem);
157
+ height: 0.125rem;
158
+ border-radius: 999px;
159
+ background: var(--color-accent-700);
160
+ }
161
+
162
+ .canopy-timeline__connector-dot {
163
+ width: 0.618rem;
164
+ height: 0.618rem;
165
+ border-radius: 50%;
166
+ background: var(--color-accent-700);
167
+ border: 2px solid var(--color-accent-700);
168
+ }
169
+
170
+ .canopy-timeline__connector-dot.is-active {
171
+ width: 1rem;
172
+ height: 1rem;
173
+ background: var(--color-accent-700);
174
+ border-color: var(--color-accent-700);
175
+ }
176
+
177
+ .canopy-timeline__resources {
178
+ margin-top: 1rem;
179
+ }
180
+
181
+ .canopy-timeline__resources-list {
182
+ list-style: none;
183
+ margin: 0;
184
+ padding: 0;
185
+ display: flex;
186
+ flex-direction: column;
187
+ gap: 0.75rem;
188
+ }
189
+
190
+ .canopy-teaser-card {
191
+ width: 100%;
192
+ }
193
+
194
+ .canopy-timeline__group-header {
195
+ display: flex;
196
+ justify-content: space-between;
197
+ gap: 0.75rem;
198
+ align-items: center;
199
+ }
200
+
201
+ .canopy-timeline__group-summary {
202
+ display: flex;
203
+ flex-direction: column;
204
+ gap: 0.2rem;
205
+ }
206
+
207
+ .canopy-timeline__group-range {
208
+ font-size: 1rem;
209
+ color: var(--color-gray-700);
210
+ }
211
+
212
+ .canopy-timeline__group-toggle {
213
+ font-size: 1rem;
214
+ background: transparent;
215
+ border: none;
216
+ color: var(--color-accent-default);
217
+ font-weight: 600;
218
+ cursor: pointer;
219
+ }
220
+
221
+ .canopy-timeline__group-points {
222
+ margin-top: 0.75rem;
223
+ display: flex;
224
+ flex-direction: column;
225
+ gap: 0.5rem;
226
+ }
227
+
228
+ .canopy-timeline__group-point {
229
+ width: 100%;
230
+ border-radius: 0.85rem;
231
+ border: 1px solid var(--color-gray-200);
232
+ background: color-mix(in srgb, var(--color-gray-50) 70%, #fff);
233
+ padding: 0.75rem 1rem;
234
+ text-align: left;
235
+ cursor: pointer;
236
+ }
237
+
238
+ .canopy-timeline__group-point.is-active {
239
+ border-color: var(--color-accent-400);
240
+ }
241
+
242
+ @media (max-width: 900px) {
243
+ .canopy-timeline__point-wrapper {
244
+ position: static;
245
+ width: 100%;
246
+ padding: 0 !important;
247
+ margin-bottom: 1rem;
248
+ }
249
+
250
+ .canopy-timeline__list {
251
+ min-height: auto;
252
+ }
253
+
254
+ .canopy-timeline__spine {
255
+ left: 0.5rem;
256
+ transform: none;
257
+ width: 0.35rem;
258
+ }
259
+
260
+ .canopy-timeline__connector {
261
+ display: none;
262
+ }
263
+
264
+ .canopy-timeline__point,
265
+ .canopy-timeline__group {
266
+ width: 100%;
267
+ }
268
+ }
269
+ .canopy-timeline__point-body {
270
+ display: flex;
271
+ flex-direction: column;
272
+ }
@@ -13,3 +13,4 @@
13
13
  @use "./sub-navigation";
14
14
  @use "./diagram";
15
15
  @use "./work";
16
+ @use "./timeline";
@@ -2235,6 +2235,271 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
2235
2235
  line-height: 1.45;
2236
2236
  }
2237
2237
  }
2238
+ .canopy-timeline {
2239
+ font-size: 1rem;
2240
+ line-height: 1.5;
2241
+ color: var(--color-gray-800);
2242
+ display: flex;
2243
+ flex-direction: column;
2244
+ gap: 1rem;
2245
+ margin: 2.618rem 0;
2246
+ }
2247
+
2248
+ .canopy-timeline__title {
2249
+ margin: 0;
2250
+ font-size: 1rem;
2251
+ font-weight: 600;
2252
+ }
2253
+
2254
+ .canopy-timeline__description {
2255
+ margin: 0;
2256
+ font-size: 1rem;
2257
+ color: var(--color-gray-700);
2258
+ }
2259
+
2260
+ .canopy-timeline__range {
2261
+ margin: 0;
2262
+ font-size: 1rem;
2263
+ text-transform: uppercase;
2264
+ letter-spacing: 0.2em;
2265
+ color: var(--color-gray-600);
2266
+ }
2267
+
2268
+ .canopy-timeline__body {
2269
+ position: relative;
2270
+ }
2271
+
2272
+ .canopy-timeline__list {
2273
+ position: relative;
2274
+ min-height: 400px;
2275
+ }
2276
+
2277
+ .canopy-timeline__spine {
2278
+ position: absolute;
2279
+ top: 0;
2280
+ bottom: 0;
2281
+ left: 50%;
2282
+ transform: translateX(-50%);
2283
+ width: 1rem;
2284
+ background: var(--color-accent-300);
2285
+ z-index: 0;
2286
+ }
2287
+
2288
+ .canopy-timeline__step {
2289
+ position: absolute;
2290
+ left: calc(50% - 0.5rem);
2291
+ display: flex;
2292
+ gap: 0.35rem;
2293
+ pointer-events: none;
2294
+ z-index: 1;
2295
+ }
2296
+
2297
+ .canopy-timeline__step-line {
2298
+ width: 1rem;
2299
+ height: 0.125rem;
2300
+ background: var(--color-gray-50);
2301
+ }
2302
+
2303
+ .canopy-timeline__step-label {
2304
+ font-size: 0.8333rem;
2305
+ font-weight: 600;
2306
+ color: var(--color-gray-900);
2307
+ transform: translateX(0.5rem);
2308
+ margin-top: -0.618rem;
2309
+ }
2310
+
2311
+ .canopy-timeline__point-wrapper {
2312
+ position: absolute;
2313
+ width: 50%;
2314
+ display: flex;
2315
+ align-items: center;
2316
+ }
2317
+
2318
+ .canopy-timeline__point-wrapper--left {
2319
+ right: 50%;
2320
+ justify-content: flex-end;
2321
+ padding-right: 0.125rem;
2322
+ text-align: right;
2323
+ }
2324
+
2325
+ .canopy-timeline__point-wrapper--right {
2326
+ left: 50%;
2327
+ justify-content: flex-start;
2328
+ padding-left: 0.125rem;
2329
+ text-align: left;
2330
+ }
2331
+
2332
+ .canopy-timeline__point,
2333
+ .canopy-timeline__group {
2334
+ width: min(100%, 28rem);
2335
+ border-radius: 1.25rem;
2336
+ border: 1px solid var(--color-gray-200);
2337
+ background: var(--color-gray-50);
2338
+ padding: 1rem 1.25rem;
2339
+ box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
2340
+ transition: border-color 150ms ease, box-shadow 150ms ease;
2341
+ display: flex;
2342
+ flex-direction: column;
2343
+ gap: 0.75rem;
2344
+ }
2345
+
2346
+ .canopy-timeline__point.is-active,
2347
+ .canopy-timeline__group.is-active {
2348
+ border-color: var(--color-accent-400);
2349
+ box-shadow: 0 12px 22px rgba(15, 23, 42, 0.15), 0 0 0 2px color-mix(in srgb, var(--color-accent-300) 45%, transparent);
2350
+ }
2351
+
2352
+ .canopy-timeline__point.is-highlighted {
2353
+ border-color: var(--color-accent-600);
2354
+ }
2355
+
2356
+ .canopy-timeline__point-date,
2357
+ .canopy-timeline__group-point-date,
2358
+ .canopy-timeline__group-count {
2359
+ font-size: 1rem;
2360
+ text-transform: uppercase;
2361
+ letter-spacing: 0.18em;
2362
+ color: var(--color-gray-600);
2363
+ font-weight: 600;
2364
+ }
2365
+
2366
+ .canopy-timeline__point-title,
2367
+ .canopy-timeline__group-point-title {
2368
+ display: block;
2369
+ font-size: 1rem;
2370
+ font-weight: 600;
2371
+ color: var(--color-gray-900);
2372
+ margin-top: 0.25rem;
2373
+ }
2374
+
2375
+ .canopy-timeline__point-summary,
2376
+ .canopy-timeline__group-range {
2377
+ font-size: 1rem;
2378
+ color: var(--color-gray-700);
2379
+ margin: 0.25rem 0 0;
2380
+ }
2381
+
2382
+ .canopy-timeline__connector {
2383
+ display: inline-flex;
2384
+ align-items: center;
2385
+ flex-shrink: 0;
2386
+ }
2387
+
2388
+ .canopy-timeline__connector-line {
2389
+ width: clamp(2.618rem, 6vw, 2.618rem);
2390
+ height: 0.125rem;
2391
+ border-radius: 999px;
2392
+ background: var(--color-accent-700);
2393
+ }
2394
+
2395
+ .canopy-timeline__connector-dot {
2396
+ width: 0.618rem;
2397
+ height: 0.618rem;
2398
+ border-radius: 50%;
2399
+ background: var(--color-accent-700);
2400
+ border: 2px solid var(--color-accent-700);
2401
+ }
2402
+
2403
+ .canopy-timeline__connector-dot.is-active {
2404
+ width: 1rem;
2405
+ height: 1rem;
2406
+ background: var(--color-accent-700);
2407
+ border-color: var(--color-accent-700);
2408
+ }
2409
+
2410
+ .canopy-timeline__resources {
2411
+ margin-top: 1rem;
2412
+ }
2413
+
2414
+ .canopy-timeline__resources-list {
2415
+ list-style: none;
2416
+ margin: 0;
2417
+ padding: 0;
2418
+ display: flex;
2419
+ flex-direction: column;
2420
+ gap: 0.75rem;
2421
+ }
2422
+
2423
+ .canopy-teaser-card {
2424
+ width: 100%;
2425
+ }
2426
+
2427
+ .canopy-timeline__group-header {
2428
+ display: flex;
2429
+ justify-content: space-between;
2430
+ gap: 0.75rem;
2431
+ align-items: center;
2432
+ }
2433
+
2434
+ .canopy-timeline__group-summary {
2435
+ display: flex;
2436
+ flex-direction: column;
2437
+ gap: 0.2rem;
2438
+ }
2439
+
2440
+ .canopy-timeline__group-range {
2441
+ font-size: 1rem;
2442
+ color: var(--color-gray-700);
2443
+ }
2444
+
2445
+ .canopy-timeline__group-toggle {
2446
+ font-size: 1rem;
2447
+ background: transparent;
2448
+ border: none;
2449
+ color: var(--color-accent-default);
2450
+ font-weight: 600;
2451
+ cursor: pointer;
2452
+ }
2453
+
2454
+ .canopy-timeline__group-points {
2455
+ margin-top: 0.75rem;
2456
+ display: flex;
2457
+ flex-direction: column;
2458
+ gap: 0.5rem;
2459
+ }
2460
+
2461
+ .canopy-timeline__group-point {
2462
+ width: 100%;
2463
+ border-radius: 0.85rem;
2464
+ border: 1px solid var(--color-gray-200);
2465
+ background: color-mix(in srgb, var(--color-gray-50) 70%, #fff);
2466
+ padding: 0.75rem 1rem;
2467
+ text-align: left;
2468
+ cursor: pointer;
2469
+ }
2470
+
2471
+ .canopy-timeline__group-point.is-active {
2472
+ border-color: var(--color-accent-400);
2473
+ }
2474
+
2475
+ @media (max-width: 900px) {
2476
+ .canopy-timeline__point-wrapper {
2477
+ position: static;
2478
+ width: 100%;
2479
+ padding: 0 !important;
2480
+ margin-bottom: 1rem;
2481
+ }
2482
+ .canopy-timeline__list {
2483
+ min-height: auto;
2484
+ }
2485
+ .canopy-timeline__spine {
2486
+ left: 0.5rem;
2487
+ transform: none;
2488
+ width: 0.35rem;
2489
+ }
2490
+ .canopy-timeline__connector {
2491
+ display: none;
2492
+ }
2493
+ .canopy-timeline__point,
2494
+ .canopy-timeline__group {
2495
+ width: 100%;
2496
+ }
2497
+ }
2498
+ .canopy-timeline__point-body {
2499
+ display: flex;
2500
+ flex-direction: column;
2501
+ }
2502
+
2238
2503
  /**
2239
2504
  * Define source files for utility classes
2240
2505
  */