@canopy-iiif/app 0.10.19 → 0.10.21

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 (12) hide show
  1. package/lib/build/mdx.js +16 -0
  2. package/lib/build/search-index.js +5 -0
  3. package/lib/build/search.js +2 -0
  4. package/lib/search/search-app.jsx +74 -13
  5. package/lib/search/search.js +164 -15
  6. package/package.json +1 -1
  7. package/ui/dist/index.mjs +217 -70
  8. package/ui/dist/index.mjs.map +3 -3
  9. package/ui/styles/components/_article-card.scss +51 -0
  10. package/ui/styles/components/_card.scss +0 -33
  11. package/ui/styles/components/index.scss +1 -0
  12. package/ui/styles/index.css +50 -33
package/ui/styles/index.css CHANGED
@@ -276,7 +276,7 @@ section[data-footnotes] ul li,
276
276
  }
277
277
  }
278
278
  /* Canopy Card component styles */
279
- .canopy-card, .canopy-annotation-card {
279
+ .canopy-card {
280
280
  display: block;
281
281
  text-decoration: none;
282
282
  color: inherit;
@@ -286,17 +286,17 @@ section[data-footnotes] ul li,
286
286
  transition: all 150ms cubic-bezier(0.22, 1, 0.36, 1);
287
287
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.05);
288
288
  }
289
- .canopy-card figure, .canopy-annotation-card figure {
289
+ .canopy-card figure {
290
290
  margin: 0;
291
291
  }
292
- .canopy-card .canopy-card-media, .canopy-annotation-card .canopy-card-media {
292
+ .canopy-card .canopy-card-media {
293
293
  position: relative;
294
294
  width: 100%;
295
295
  padding-bottom: var(--canopy-card-padding);
296
296
  background-color: rgb(229, 231, 235); /* slate-200 */
297
297
  overflow: hidden;
298
298
  }
299
- .canopy-card .canopy-card-media > img, .canopy-annotation-card .canopy-card-media > img {
299
+ .canopy-card .canopy-card-media > img {
300
300
  position: absolute;
301
301
  inset: 0;
302
302
  width: 100%;
@@ -312,58 +312,75 @@ section[data-footnotes] ul li,
312
312
  color: var(--color-gray-600);
313
313
  font-size: 83.333%;
314
314
  }
315
- .canopy-card[data-image-loaded=true] .canopy-card-media > img, [data-image-loaded=true].canopy-annotation-card .canopy-card-media > img {
315
+ .canopy-card[data-image-loaded=true] .canopy-card-media > img {
316
316
  opacity: 1;
317
317
  }
318
- .canopy-card .canopy-card-image, .canopy-annotation-card .canopy-card-image {
318
+ .canopy-card .canopy-card-image {
319
319
  display: block;
320
320
  width: 100%;
321
321
  height: auto;
322
322
  opacity: 0;
323
323
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
324
324
  }
325
- .canopy-card[data-image-loaded=true] .canopy-card-image, [data-image-loaded=true].canopy-annotation-card .canopy-card-image {
325
+ .canopy-card[data-image-loaded=true] .canopy-card-image {
326
326
  opacity: 1;
327
327
  }
328
- .canopy-card figcaption, .canopy-annotation-card figcaption {
328
+ .canopy-card figcaption {
329
329
  padding: 1rem;
330
330
  }
331
- .canopy-card figcaption > span:first-child, .canopy-annotation-card figcaption > span:first-child {
331
+ .canopy-card figcaption > span:first-child {
332
332
  display: block;
333
333
  }
334
- .canopy-card figcaption > span + span, .canopy-annotation-card figcaption > span + span {
334
+ .canopy-card figcaption > span + span {
335
335
  display: block;
336
336
  }
337
- .canopy-card:hover, .canopy-annotation-card:hover, .canopy-card:focus, .canopy-annotation-card:focus {
337
+ .canopy-card:hover, .canopy-card:focus {
338
338
  color: var(--color-accent-default);
339
339
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.07);
340
340
  }
341
341
 
342
- .canopy-annotation-card {
343
- padding: 1rem;
342
+ .canopy-article-card {
343
+ display: block;
344
+ text-decoration: none;
345
+ padding: 1rem 0 0.618rem;
344
346
  }
345
- .canopy-annotation-card mark {
346
- color: var(--color-gray-900);
347
- background-color: var(--color-accent-300);
348
- padding: 0.1rem 0.25rem;
349
- border-radius: 0.25rem;
350
- margin: 0 -0.25rem;
351
- }
352
- .canopy-annotation-card mark mark::before,
353
- .canopy-annotation-card mark mark::after {
354
- clip-path: inset(100%);
355
- clip: rect(1px, 1px, 1px, 1px);
356
- height: 1px;
357
- overflow: hidden;
358
- position: absolute;
359
- white-space: nowrap;
360
- width: 1px;
347
+ .canopy-article-card article {
348
+ max-width: 65ch;
349
+ }
350
+ .canopy-article-card:hover h3, .canopy-article-card:focus h3 {
351
+ text-decoration: underline;
352
+ }
353
+ .canopy-article-card h3 {
354
+ margin: 0.1rem 0 0.3rem;
355
+ font-size: 1.125rem;
356
+ line-height: 1.35;
357
+ }
358
+ .canopy-article-card .canopy-article-card__url {
359
+ font-size: 0.8333rem;
360
+ color: var(--color-gray-700);
361
+ margin: 0;
362
+ text-transform: none;
361
363
  }
362
- .canopy-annotation-card mark mark::before {
363
- content: " [highlight start] ";
364
+ .canopy-article-card .canopy-article-card__snippet {
365
+ margin: 0.2rem 0 0;
366
+ color: var(--color-gray-default);
367
+ font-size: 0.9222rem;
364
368
  }
365
- .canopy-annotation-card mark mark::after {
366
- content: " [highlight end] ";
369
+ .canopy-article-card .canopy-article-card__meta {
370
+ margin: 0.4rem 0 0;
371
+ padding: 0;
372
+ list-style: none;
373
+ display: flex;
374
+ flex-wrap: wrap;
375
+ gap: 0.75rem;
376
+ font-size: 0.82rem;
377
+ color: #70757a;
378
+ }
379
+ .canopy-article-card mark {
380
+ background: #fff3bf;
381
+ color: inherit;
382
+ padding: 0.05rem 0.25rem;
383
+ border-radius: 0.2rem;
367
384
  }
368
385
 
369
386
  .canopy-layout {