Initial gallery macro

2 files changed, 34 insertions, 0 deletions

diff --git a/assets/css/components/_gallery.scss b/assets/css/components/_gallery.scss
new file mode 100644
index 0000000..651d873
--- /dev/null
+++ b/assets/css/components/_gallery.scss
@@ -0,0 +1,25 @@
+@include namespace('gallery') {
+    @include store((
+        --dims: (
+            --col-width: 17em
+        )
+    ));
+
+    @include component(namespace()) {
+        margin-top: $line-height * 1rem;
+
+        @include element('items') {
+            display:               grid;
+            grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
+            gap:                   20px;
+        }
+
+        @include element('item') {
+            display: block;
+        }
+
+        @include element('img') {
+            display: block;
+        }
+    }
+}
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index 56d09cd..60f4e05 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -70,10 +70,19 @@
             height: prop(--dims --icon);
         }
 
+        @include modifier('fixed') {
+            position: fixed;
+        }
+
         @include media('>=lg') {
             position:      sticky;
+            z-index:       100;
             top:           0;
             margin-bottom: calc(-.75 * #{prop(--dims --height)});
+
+            @include modifier('fixed') {
+                position: fixed;
+            }
         }
 
         @media print {