Adds .link-gallery--splash-first variant

2 files changed, 84 insertions, 34 deletions

diff --git a/scss/modules/_link-gallery.scss b/scss/modules/_link-gallery.scss
index a7b7090..0f0c187 100644
--- a/scss/modules/_link-gallery.scss
+++ b/scss/modules/_link-gallery.scss
@@ -1,19 +1,37 @@
 .link-gallery {
-  display: grid;
-  grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
-  gap: var(--grid-gutter-width);
   padding-block: var(--spacing-block-md);
+
   --gallery-item-column-span: 1;
   --gallery-row-image-height: 12rem;
   --gallery-row-title-height: fit-content;
-  text-align: center;
 
-  li {
-    list-style-type: none;
-    grid-column: span var(--gallery-item-column-span);
+  &:not(.link-gallery--splash-first) {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
+    gap: var(--grid-gutter-width);
+
+    li {
+      list-style-type: none;
+      grid-column: span var(--gallery-item-column-span);
+
+      :is(&.link-gallery__container, & .link-gallery__container) {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: var(--gallery-row-image-height) var(--gallery-row-title-height);
+        row-gap: var(--spacing-block-sm);
+      }
+
+      .link-gallery__title {
+        width: 100%;
+        height: min-content;
+        text-align: center;
+        margin-inline: var(--spacing-inline-xs);
+      }
+    }
   }
 
   img {
+    display: block;
     max-width: 50%;
     max-height: 100%;
     height: fit-content;
@@ -22,22 +40,33 @@
   }
 }
 
-.link-gallery__container {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: var(--gallery-row-image-height) var(--gallery-row-title-height);
-  row-gap: var(--spacing-block-sm);
-}
-
 .link-gallery--furthsettins img {
   box-sizing: border-box;
   border-radius: 50%;
   border: solid var(--border-width) var(--text-color);
 }
 
-.link-gallery__title {
-  width: 100%;
-  height: min-content;
-  text-align: center;
-  margin-inline: var(--spacing-inline-xs);
+.link-gallery--splash-first {
+  .link-gallery__container {
+    display: block;
+    width: fit-content;
+  }
+
+  li:first-of-type {
+    list-style-type: none;
+
+    :is(&.link-gallery__container, & .link-gallery__container) {
+      width: 100%;
+    }
+
+    .link-gallery__title {
+      text-align: center;
+    }
+  }
+
+  li + li {
+    margin-block-start: var(--spacing-block-lg);
+    margin-inline-start: 1em;
+  }
 }
+
diff --git a/scss/modules/_link-gallery.xs.scss b/scss/modules/_link-gallery.xs.scss
index 9bfc8d6..a8f48ac 100644
--- a/scss/modules/_link-gallery.xs.scss
+++ b/scss/modules/_link-gallery.xs.scss
@@ -1,25 +1,46 @@
 .link-gallery {
-  grid-auto-rows: calc(
-    var(--gallery-row-image-height) +
-    var(--spacing-block-sm) +
-    var(--gallery-row-title-height)
-  );
   --gallery-item-column-span: 2;
   --gallery-row-title-height: 11ex;
-  text-align: center;
+
+  &:not(.link-gallery--splash-first) {
+    grid-auto-rows: calc(
+      var(--gallery-row-image-height) +
+      var(--spacing-block-sm) +
+      var(--gallery-row-title-height)
+    );
+
+    .link-gallery__title {
+      width: 100%;
+      height: 9.9ex;
+      height: 3lh;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+  }
 
   img {
     max-width: 100%;
   }
 }
 
-.link-gallery__title {
-  width: 100%;
-  height: 9.9ex;
-  height: 3lh;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+.link-gallery--splash-first li:first-of-type {
+  :is(&.link-gallery__container, & .link-gallery__container) {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
+    gap: var(--grid-gutter-width);
+  }
+
+  img {
+    grid-column: span 2;
+  }
+
+  .link-gallery__title {
+    grid-column: span calc(var(--grid-prose-column-count) - 2);
+    align-self: center;
+    text-align: start;
+  }
 }
+