@canopy-iiif/app 1.7.0 → 1.8.0

package/ui/styles/components/_gallery.scss

@@ -1,6 +1,7 @@
 .canopy-gallery {
   position: relative;
-  margin-block: clamp(1.5rem, 2vw, 3rem);
+  padding: 0;
+  margin: 0;
   --canopy-gallery-gap: 1.5rem;
   --canopy-gallery-min-column: 16rem;
   --canopy-gallery-radius: 1rem;
@@ -22,15 +23,16 @@
   }
 
   &__heading {
-    font-size: clamp(1.5rem, 2.5vw, 2rem);
-    line-height: 1.2;
     margin: 0;
+    padding: 0;
+    font-size: 2.618rem;
+    line-height: 1.2;
   }
 
   &__description {
-    margin: 0.5rem 0 0;
-    font-size: 1rem;
-    max-width: 65ch;
+    margin: 1rem 0 0;
+    font-size: 1.222rem;
+    max-width: unset;
     color: var(--color-gray-muted);
   }
 
@@ -41,6 +43,7 @@
       minmax(var(--canopy-gallery-min-column, 16rem), 1fr)
     );
     gap: var(--canopy-gallery-gap, 1.5rem);
+    padding: var(--canopy-gallery-gap, 1.5rem) 0;
   }
 
   &__item {
@@ -179,6 +182,11 @@
     }
   }
 
+  &__modal:not([data-canopy-gallery-active]) {
+    width: 0;
+    height: 0;
+  }
+
   &__modal-scrim {
     min-height: 100vh;
     display: block;
@@ -200,19 +208,23 @@
   }
 
   &__modal-header {
-    padding: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 3vw, 2.5rem);
-    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+    border: none;
+    padding-top: 3rem;
+    padding-bottom: 0;
+    padding-left: clamp(1.25rem, 3vw, 2.5rem);
+    padding-right: clamp(1.25rem, 3vw, 2.5rem);
     display: flex;
     gap: clamp(1rem, 2vw, 2rem);
   }
 
   &__modal-thumb {
     flex: 0 0 auto;
-    width: clamp(5rem, 12vw, 8rem);
-    aspect-ratio: 4 / 3;
+    width: 100px;
+    aspect-ratio: 1 / 1;
     border-radius: 0.5rem;
     overflow: hidden;
     background: var(--color-gray-100);
+    height: fit-content;
 
     img,
     picture,
@@ -239,14 +251,14 @@
   }
 
   &__modal-title {
-    margin: 0;
-    font-size: clamp(1.5rem, 3vw, 2rem);
+    margin: 0.618rem 0 0;
+    font-size: 1.618rem;
     line-height: 1.2;
   }
 
   &__modal-summary {
-    margin: 0.75rem 0 0;
-    font-size: 1rem;
+    margin: 0;
+    font-size: 1.2222rem;
     color: var(--color-gray-muted);
   }
 
@@ -348,3 +360,40 @@ body[data-canopy-gallery-locked="1"] {
     padding: 0;
   }
 }
+
+.canopy-gallery-item__content {
+  width: 100%;
+}
+
+.canopy-gallery-item__content_flex {
+  display: flex;
+  flex-direction: row;
+  gap: 2rem;
+
+  aside {
+    min-width: 400px;
+    padding-right: 2rem;
+  }
+
+  dl {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+
+  dt {
+    text-transform: uppercase;
+    color: var(--color-gray-muted);
+    margin: 0;
+    font-size: 0.7222rem;
+    font-weight: 400;
+    margin-top: 0.85rem;
+  }
+
+  dd {
+    color: var(--color-gray-900);
+    margin: 0;
+    font-size: 1rem;
+    line-height: 1.45;
+  }
+}

package/ui/styles/index.css

@@ -3008,7 +3008,8 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
 
 .canopy-gallery {
   position: relative;
-  margin-block: clamp(1.5rem, 2vw, 3rem);
+  padding: 0;
+  margin: 0;
   --canopy-gallery-gap: 1.5rem;
   --canopy-gallery-min-column: 16rem;
   --canopy-gallery-radius: 1rem;
@@ -3028,20 +3029,22 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   margin-bottom: clamp(1rem, 2vw, 1.5rem);
 }
 .canopy-gallery__heading {
-  font-size: clamp(1.5rem, 2.5vw, 2rem);
-  line-height: 1.2;
   margin: 0;
+  padding: 0;
+  font-size: 2.618rem;
+  line-height: 1.2;
 }
 .canopy-gallery__description {
-  margin: 0.5rem 0 0;
-  font-size: 1rem;
-  max-width: 65ch;
+  margin: 1rem 0 0;
+  font-size: 1.222rem;
+  max-width: unset;
   color: var(--color-gray-muted);
 }
 .canopy-gallery__grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(var(--canopy-gallery-min-column, 16rem), 1fr));
   gap: var(--canopy-gallery-gap, 1.5rem);
+  padding: var(--canopy-gallery-gap, 1.5rem) 0;
 }
 .canopy-gallery__item {
   position: relative;
@@ -3153,6 +3156,10 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   pointer-events: auto;
   visibility: visible;
 }
+.canopy-gallery__modal:not([data-canopy-gallery-active]) {
+  width: 0;
+  height: 0;
+}
 .canopy-gallery__modal-scrim {
   min-height: 100vh;
   display: block;
@@ -3172,18 +3179,22 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   box-shadow: none;
 }
 .canopy-gallery__modal-header {
-  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 3vw, 2.5rem);
-  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+  border: none;
+  padding-top: 3rem;
+  padding-bottom: 0;
+  padding-left: clamp(1.25rem, 3vw, 2.5rem);
+  padding-right: clamp(1.25rem, 3vw, 2.5rem);
   display: flex;
   gap: clamp(1rem, 2vw, 2rem);
 }
 .canopy-gallery__modal-thumb {
   flex: 0 0 auto;
-  width: clamp(5rem, 12vw, 8rem);
-  aspect-ratio: 4/3;
+  width: 100px;
+  aspect-ratio: 1/1;
   border-radius: 0.5rem;
   overflow: hidden;
   background: var(--color-gray-100);
+  height: fit-content;
 }
 .canopy-gallery__modal-thumb img,
 .canopy-gallery__modal-thumb picture,
@@ -3206,13 +3217,13 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
   margin: 0 0 0.5rem;
 }
 .canopy-gallery__modal-title {
-  margin: 0;
-  font-size: clamp(1.5rem, 3vw, 2rem);
+  margin: 0.618rem 0 0;
+  font-size: 1.618rem;
   line-height: 1.2;
 }
 .canopy-gallery__modal-summary {
-  margin: 0.75rem 0 0;
-  font-size: 1rem;
+  margin: 0;
+  font-size: 1.2222rem;
   color: var(--color-gray-muted);
 }
 .canopy-gallery__modal-body {
@@ -3296,6 +3307,39 @@ body[data-canopy-gallery-locked="1"] {
   padding: 0;
 }
 
+.canopy-gallery-item__content {
+  width: 100%;
+}
+
+.canopy-gallery-item__content_flex {
+  display: flex;
+  flex-direction: row;
+  gap: 2rem;
+}
+.canopy-gallery-item__content_flex aside {
+  min-width: 400px;
+  padding-right: 2rem;
+}
+.canopy-gallery-item__content_flex dl {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+.canopy-gallery-item__content_flex dt {
+  text-transform: uppercase;
+  color: var(--color-gray-muted);
+  margin: 0;
+  font-size: 0.7222rem;
+  font-weight: 400;
+  margin-top: 0.85rem;
+}
+.canopy-gallery-item__content_flex dd {
+  color: var(--color-gray-900);
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.45;
+}
+
 /**
  * Define source files for utility classes
  */