@canopy-iiif/app 1.11.1 → 1.11.2

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 (7) hide show
  1. package/lib/components/hero-slider-runtime.js +64 -46
  2. package/lib/components/slider-runtime-entry.js +0 -3
  3. package/package.json +1 -1
  4. package/ui/dist/server.mjs +59 -40
  5. package/ui/dist/server.mjs.map +2 -2
  6. package/ui/styles/components/_interstitial-hero.scss +23 -11
  7. package/ui/styles/index.css +22 -11
package/ui/styles/components/_interstitial-hero.scss CHANGED
@@ -12,9 +12,9 @@
12
12
  &--hero {
13
13
  --hero-height: 520px;
14
14
  --hero-bg-start: var(--color-gray-50);
15
- --hero-bg-mid: var(--color-accent-100);
15
+ --hero-bg-mid: var(--color-accent-50);
16
16
  --hero-bg-end: var(--color-accent-200);
17
- --hero-dot-bg: var(--color-accent-300);
17
+ --hero-dot-bg: var(--color-accent-400);
18
18
  --hero-dot-active-bg: var(--color-accent-default);
19
19
 
20
20
  background: linear-gradient(
@@ -64,8 +64,8 @@
64
64
  position: relative;
65
65
  min-height: var(--hero-height);
66
66
  display: flex;
67
- align-items: center;
68
- justify-content: center;
67
+ flex-direction: column;
68
+ align-items: stretch;
69
69
  padding: clamp(1.5rem, 4vw, 3rem);
70
70
  box-sizing: border-box;
71
71
  min-width: 0;
@@ -87,6 +87,7 @@
87
87
  .canopy-interstitial__pagination {
88
88
  position: static;
89
89
  transform: none;
90
+ width: 100%;
90
91
  justify-content: center;
91
92
  margin-top: 1.618rem;
92
93
  padding-bottom: 2px;
@@ -177,19 +178,30 @@
177
178
  overflow: hidden;
178
179
  }
179
180
 
180
- &__slider .swiper-wrapper {
181
+ &__slide-wrapper {
181
182
  display: flex;
182
- transition-property: transform;
183
183
  }
184
184
 
185
- &__slider .swiper-slide {
186
- width: 100%;
187
- flex-shrink: 0;
185
+ &__slide {
186
+ flex: 0 0 100%;
187
+ min-width: 0;
188
188
  display: flex;
189
189
  justify-content: center;
190
190
  align-items: stretch;
191
191
  }
192
192
 
193
+ &__sr-live {
194
+ position: absolute;
195
+ width: 1px;
196
+ height: 1px;
197
+ padding: 0;
198
+ margin: -1px;
199
+ overflow: hidden;
200
+ clip: rect(0, 0, 0, 0);
201
+ white-space: nowrap;
202
+ border: 0;
203
+ }
204
+
193
205
  &__slide-link {
194
206
  display: block;
195
207
  text-decoration: none;
@@ -365,7 +377,7 @@
365
377
  gap: 0.4rem;
366
378
  }
367
379
 
368
- &__pagination .swiper-pagination-bullet {
380
+ &__dot {
369
381
  display: inline-block;
370
382
  width: 0.45rem;
371
383
  height: 0.45rem;
@@ -376,7 +388,7 @@
376
388
  background-color 0.2s ease;
377
389
  }
378
390
 
379
- &__pagination .swiper-pagination-bullet-active {
391
+ &__dot--active {
380
392
  transform: scale(1.35);
381
393
  background-color: var(--hero-dot-active-bg);
382
394
  }
package/ui/styles/index.css CHANGED
@@ -1288,9 +1288,9 @@ section[data-footnotes] ul li,
1288
1288
  .canopy-interstitial--hero {
1289
1289
  --hero-height: 520px;
1290
1290
  --hero-bg-start: var(--color-gray-50);
1291
- --hero-bg-mid: var(--color-accent-100);
1291
+ --hero-bg-mid: var(--color-accent-50);
1292
1292
  --hero-bg-end: var(--color-accent-200);
1293
- --hero-dot-bg: var(--color-accent-300);
1293
+ --hero-dot-bg: var(--color-accent-400);
1294
1294
  --hero-dot-active-bg: var(--color-accent-default);
1295
1295
  background: linear-gradient(173deg, var(--hero-bg-start) 5rem, var(--hero-bg-mid) 61.8%, var(--hero-bg-end) 100%);
1296
1296
  min-height: var(--hero-height);
@@ -1330,8 +1330,8 @@ section[data-footnotes] ul li,
1330
1330
  position: relative;
1331
1331
  min-height: var(--hero-height);
1332
1332
  display: flex;
1333
- align-items: center;
1334
- justify-content: center;
1333
+ flex-direction: column;
1334
+ align-items: stretch;
1335
1335
  padding: clamp(1.5rem, 4vw, 3rem);
1336
1336
  box-sizing: border-box;
1337
1337
  min-width: 0;
@@ -1350,6 +1350,7 @@ section[data-footnotes] ul li,
1350
1350
  .canopy-interstitial--hero .canopy-interstitial__pagination {
1351
1351
  position: static;
1352
1352
  transform: none;
1353
+ width: 100%;
1353
1354
  justify-content: center;
1354
1355
  margin-top: 1.618rem;
1355
1356
  padding-bottom: 2px;
@@ -1423,17 +1424,27 @@ section[data-footnotes] ul li,
1423
1424
  min-height: var(--hero-height);
1424
1425
  overflow: hidden;
1425
1426
  }
1426
- .canopy-interstitial__slider .swiper-wrapper {
1427
+ .canopy-interstitial__slide-wrapper {
1427
1428
  display: flex;
1428
- transition-property: transform;
1429
1429
  }
1430
- .canopy-interstitial__slider .swiper-slide {
1431
- width: 100%;
1432
- flex-shrink: 0;
1430
+ .canopy-interstitial__slide {
1431
+ flex: 0 0 100%;
1432
+ min-width: 0;
1433
1433
  display: flex;
1434
1434
  justify-content: center;
1435
1435
  align-items: stretch;
1436
1436
  }
1437
+ .canopy-interstitial__sr-live {
1438
+ position: absolute;
1439
+ width: 1px;
1440
+ height: 1px;
1441
+ padding: 0;
1442
+ margin: -1px;
1443
+ overflow: hidden;
1444
+ clip: rect(0, 0, 0, 0);
1445
+ white-space: nowrap;
1446
+ border: 0;
1447
+ }
1437
1448
  .canopy-interstitial__slide-link {
1438
1449
  display: block;
1439
1450
  text-decoration: none;
@@ -1592,7 +1603,7 @@ section[data-footnotes] ul li,
1592
1603
  display: flex;
1593
1604
  gap: 0.4rem;
1594
1605
  }
1595
- .canopy-interstitial__pagination .swiper-pagination-bullet {
1606
+ .canopy-interstitial__dot {
1596
1607
  display: inline-block;
1597
1608
  width: 0.45rem;
1598
1609
  height: 0.45rem;
@@ -1600,7 +1611,7 @@ section[data-footnotes] ul li,
1600
1611
  opacity: 1;
1601
1612
  transition: transform 0.2s ease, background-color 0.2s ease;
1602
1613
  }
1603
- .canopy-interstitial__pagination .swiper-pagination-bullet-active {
1614
+ .canopy-interstitial__dot--active {
1604
1615
  transform: scale(1.35);
1605
1616
  background-color: var(--hero-dot-active-bg);
1606
1617
  }