Initial gallery macro

8 files changed, 72 insertions, 18 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 {
diff --git a/assets/css/objects/_icon.scss b/assets/css/objects/_icon.scss
index f80f422..53f6f78 100644
--- a/assets/css/objects/_icon.scss
+++ b/assets/css/objects/_icon.scss
@@ -20,7 +20,7 @@
 
         @include modifier('snow') {
             position:       fixed;
-            z-index:        9999;
+            z-index:        1000;
             top:            -1.2em;
             width:          1em;
             height:         1em;
diff --git a/assets/css/style.scss b/assets/css/style.scss
index db2d4cb..45b733d 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -17,6 +17,7 @@
 @import 'components/footer';
 @import 'components/card';
 @import 'components/note';
+@import 'components/gallery';
 
 @import 'layouts/card-list';
 
diff --git a/content/projects/drawings/2021-refsheet/index.md b/content/projects/drawings/2021-refsheet/index.md
index 2163fac..696abe5 100644
--- a/content/projects/drawings/2021-refsheet/index.md
+++ b/content/projects/drawings/2021-refsheet/index.md
@@ -4,8 +4,8 @@ date:      2021-10-06
 thumbnail: png
 ---
 
+::: gallery
 ![](bottom.png)
-
 ![](bottom_cofe.png)
-
 ![](side.png)
+:::
diff --git a/filters/macros.lua b/filters/macros.lua
index 9e9d954..dc04cfd 100644
--- a/filters/macros.lua
+++ b/filters/macros.lua
@@ -1,7 +1,39 @@
+function note(el)
+    el.classes = pandoc.List()
+    el.classes:insert("c-note")
+    return el
+end
+
+function gallery(el)
+    el.classes = pandoc.List()
+    el.classes:insert("c-gallery")
+
+    local cur = pandoc.Div(pandoc.List(), { class = "c-gallery__current" })
+    local imageList = pandoc.Div(pandoc.List(), { class = "c-gallery__items" })
+
+    pandoc.walk_block(el, {
+        Image = function(iel)
+            iel.classes = pandoc.List()
+            iel.classes:insert("c-gallery__img")
+
+            local lel = pandoc.Link(iel, iel.src)
+            lel.classes = pandoc.List()
+            lel.classes:insert("c-gallery__item")
+
+            imageList.content:insert(lel)
+        end,
+    })
+
+    el.content = { cur, imageList }
+
+    return el
+end
+
 function Div(el)
     if el.classes:includes("note") then
-        el.classes = pandoc.List()
-        el.classes:insert("c-note")
+        el = note(el)
+    elseif el.classes:includes("gallery") then
+        el = gallery(el)
     end
 
     return el
diff --git a/templates/base.html b/templates/base.html
index 252069a..22ff913 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -69,8 +69,6 @@ ${layouts/categorized_list()}
 ${layouts/list()}
         $elseif(layout.is_redirect)$
 ${layouts/redirect()}
-        $elseif(layout.is_gallery)$
-${layouts/gallery()}
         $else$
 ${layouts/page()}
         $endif$
diff --git a/templates/layouts/gallery.html b/templates/layouts/gallery.html
deleted file mode 100644
index 46c47a6..0000000
--- a/templates/layouts/gallery.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<article class="s-body s-colored-links s-headlines $if(intro)$s-intro$endif$">
-    $if(date)$
-        <div class="s-body__meta">
-            $date.long$
-        </div>
-    $endif$
-
-    <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
-
-$body$
-</article>