@canopy-iiif/app 0.10.18 → 0.10.20

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 (10) hide show
  1. package/lib/search/search-app.jsx +74 -13
  2. package/lib/search/search.js +155 -15
  3. package/package.json +1 -1
  4. package/ui/dist/index.mjs +82 -49
  5. package/ui/dist/index.mjs.map +3 -3
  6. package/ui/styles/base/_markdown.scss +5 -6
  7. package/ui/styles/components/_article-card.scss +51 -0
  8. package/ui/styles/components/_card.scss +0 -33
  9. package/ui/styles/components/index.scss +1 -0
  10. package/ui/styles/index.css +55 -38
package/ui/styles/index.css CHANGED
@@ -143,6 +143,11 @@
143
143
  letter-spacing: -0.025em;
144
144
  font-variation-settings: "SOFT" 100, "WONK" 1;
145
145
  }
146
+ code {
147
+ font-family: var(--font-mono);
148
+ font-size: 0.922em;
149
+ }
150
+
146
151
  .markdown-table__frame {
147
152
  width: 100%;
148
153
  margin: 1.618rem 0 2.618rem;
@@ -174,11 +179,6 @@
174
179
  .markdown-table tbody tr:nth-child(even) {
175
180
  background-color: var(--color-gray-200);
176
181
  }
177
- .markdown-table code {
178
- font-family: var(--font-mono);
179
- font-size: 0.875rem;
180
- color: var(--color-gray-900);
181
- }
182
182
 
183
183
  section[data-footnotes],
184
184
  .footnotes {
@@ -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;
361
349
  }
362
- .canopy-annotation-card mark mark::before {
363
- content: " [highlight start] ";
350
+ .canopy-article-card:hover h3, .canopy-article-card:focus h3 {
351
+ text-decoration: underline;
364
352
  }
365
- .canopy-annotation-card mark mark::after {
366
- content: " [highlight end] ";
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;
363
+ }
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;
368
+ }
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 {