feat: o-media-spread

src/lib/_imports/_partials/img-fluid-with-srcset.hbs

@@ -0,0 +1,17 @@
+{{! Image using:
+    - `srcset` attribute (like Django CMS "Picture")
+    - Bootstrap's `.img-fluid` class
+}}
+<img
+    src="https://tacc.utexas.edu/media/filer_public_thumbnails/filer_public/01/e0/01e0ab8d-3af4-4fac-9817-cb375ae1a557/research-projects.jpg__800.0x530.0_q85_subject_location-500%2C336_subsampling-2.jpg"
+    srcset="
+    https://tacc.utexas.edu/media/filer_public_thumbnails/filer_public/01/e0/01e0ab8d-3af4-4fac-9817-cb375ae1a557/research-projects.jpg__576x576_q85_subsampling-2.jpg 576w,
+    https://tacc.utexas.edu/media/filer_public_thumbnails/filer_public/01/e0/01e0ab8d-3af4-4fac-9817-cb375ae1a557/research-projects.jpg__768x768_q85_subsampling-2.jpg 768w,
+    https://tacc.utexas.edu/media/filer_public_thumbnails/filer_public/01/e0/01e0ab8d-3af4-4fac-9817-cb375ae1a557/research-projects.jpg__800.0x530.0_q85_subject_location-500%2C336_subsampling-2.jpg 800.0w"
+    sizes="
+        (max-width: 576px) 576px,
+        (max-width: 768px) 768px,
+        800.0px
+    "
+    class="img-fluid"
+>

src/lib/_imports/objects/o-media-spread.css

@@ -0,0 +1,59 @@
+.o-media-spread {
+    display: grid;
+    container-type: inline-size;
+    gap: var(--global-space--grid-gap);
+}
+.o-media-spread > * {
+    width: 100%;
+}
+
+@container (min-width: 400px) {
+    .o-media-spread--2-cols {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .o-media-spread--2-cols > *:last-child:nth-child(2n - 1) {
+        grid-column: span 2;
+    }
+}
+@container (max-width: 399px) {
+    .o-media-spread--2-cols {
+        grid-template-columns: repeat(1, 1fr);
+    }
+    .o-media-spread--2-cols > *:last-child:nth-child(1n - 0) {
+        grid-column: span 1;
+    }
+}
+
+@container (min-width: 600px) {
+    .o-media-spread--3-cols {
+        grid-template-columns: repeat(3, 1fr);
+    }
+    .o-media-spread--3-cols > *:last-child:nth-child(3n - 2) {
+        grid-column: span 3;
+    }
+}
+@container (max-width: 599px) {
+    .o-media-spread--3-cols {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .o-media-spread--3-cols > *:last-child:nth-child(2n - 1) {
+        grid-column: span 1;
+    }
+}
+
+@container (min-width: 400px) {
+    .o-media-spread--4-cols {
+        grid-template-columns: repeat(4, 1fr);
+    }
+    .o-media-spread--4-cols > *:last-child:nth-child(4n - 3) {
+        grid-column: span 2;
+    }
+}
+@container (max-width: 399px) {
+    .o-media-spread--4-cols {
+        grid-template-columns: repeat(3, 1fr);
+    }
+    .o-media-spread--4-cols > *:last-child:nth-child(3n - 2) {
+        grid-column: span 1;
+    }
+}

src/lib/_imports/objects/o-media-spread/config.yml

@@ -0,0 +1,12 @@
+context:
+  shouldSkipPattern: false
+  📝 shouldSkipPattern: because core-styles.….css does not import this
+  supportStyles:
+    - ../../assets/objects/o-section.css
+  types:
+    - cols: 2
+      section: light
+    - cols: 3
+      section: dark
+    - cols: 4
+      section: light

src/lib/_imports/objects/o-media-spread/o-media-spread.hbs

@@ -0,0 +1,25 @@
+{{#types}}
+<section class="o-section o-section--style-{{this.section}}">
+  <h3>{{this.cols}} Columns</h3>
+  <div class="o-media-spread o-media-spread--{{this.cols}}-cols">
+    {{#if (eq this.cols "2")}}
+    {{> @img-fluid-with-srcset }}
+    {{> @img-fluid-with-srcset }}
+    {{> @img-fluid-with-srcset }}
+    {{/if}}
+    {{#if (eq this.cols "3")}}
+    {{> @img-fluid-with-srcset }}
+    {{> @img-fluid-with-srcset }}
+    {{> @img-fluid-with-srcset }}
+    {{> @img-fluid-with-srcset }}
+    {{/if}}
+    {{#if (eq this.cols "4")}}
+    {{> @img-fluid-with-srcset }}
+    {{> @img-fluid-with-srcset }}
+    {{> @img-fluid-with-srcset }}
+    {{> @img-fluid-with-srcset }}
+    {{> @img-fluid-with-srcset }}
+    {{/if}}
+  </div>
+</section>
+{{/types}}