From 312015e8f74ca1738e7160e5d66cad9dcb07c6fd Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 29 Dec 2021 15:51:49 +0100
Subject: Initial gallery macro

---
 assets/css/components/_gallery.scss | 25 +++++++++++++++++++++++++
 assets/css/components/_header.scss  |  9 +++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 assets/css/components/_gallery.scss

(limited to 'assets/css/components')

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 {
-- 
cgit v1.2.3-54-g00ecf