22 files changed, 262 insertions, 81 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 9619862..393aae3 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -169,6 +169,22 @@ p {
     margin: ($line-height * 1rem) 0 0;
 }
 
+figure {
+    display:          flex;
+    flex-direction:   column;
+    align-items:      center;
+    margin:           ($line-height * 1rem) 0 0;
+    padding:          0;
+    background-color: prop(--colors --bg-hi);
+
+    img {
+        display:    block;
+        max-width:  100%;
+        max-height: 70vh;
+        object-fit: contain;
+    }
+}
+
 :link,
 :visited {
     color: prop(--colors --link --default);
diff --git a/assets/css/components/_gallery.scss b/assets/css/components/_gallery.scss
deleted file mode 100644
index 651d873..0000000
--- a/assets/css/components/_gallery.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@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/_lightbox.scss b/assets/css/components/_lightbox.scss
new file mode 100644
index 0000000..ece2b4b
--- /dev/null
+++ b/assets/css/components/_lightbox.scss
@@ -0,0 +1,93 @@
+@include namespace('lightbox') {
+    @include store((
+        --colors: (
+            --bg: prop(--colors --bg-hi, $global: true),
+            --button: (
+                --idle:  prop(--colors --fg-hi, $global: true),
+                --hover: prop(--colors --fg-lo, $global: true),
+            )
+        ),
+        --dims: (
+            --col-width: 17em
+        )
+    ));
+
+    @include component(namespace()) {
+        display:         flex;
+        visibility:      hidden;
+        position:        fixed;
+        z-index:         5000;
+        top:             0;
+        left:            0;
+        box-sizing:      border-box;
+        align-items:     center;
+        justify-content: center;
+        width:           100%;
+        height:          100%;
+        padding:         2em calc(3em + 1rem);
+        transition:      opacity .2s, visibility .2s;
+        opacity:         0;
+
+        @include element('bg') {
+            position:         absolute;
+            z-index:          -10;
+            top:              0;
+            left:             0;
+            width:            100%;
+            height:           100%;
+            opacity:          .95;
+            background-color: prop(--colors --bg);
+        }
+
+        @include is('shown') {
+            visibility: visible;
+            transition: opacity .2s, visibility 0 .2s;
+            opacity:    1;
+        }
+
+        @include element('img') {
+            max-width:  100%;
+            max-height: 100%;
+        }
+
+        @include element('close', 'prev', 'next') {
+            margin:           0;
+            transition:       color .2s;
+            border:           0;
+            background-color: transparent;
+            color:            currentColor;
+
+            &:hover {
+                color: prop(--colors --button --hover);
+            }
+        }
+
+        @include element('close') {
+            position:  absolute;
+            top:       0;
+            right:     0;
+            padding:   1rem;
+            font-size: 1.5em;
+        }
+
+        @include element('prev', 'next') {
+            position:  absolute;
+            top:       50%;
+            padding:   .5rem;
+            transform: translate(0, -50%);
+            font-size: 3em;
+
+            > * {
+                stroke-width: .75px;
+            }
+        }
+
+        @include element('prev') {
+            left: 0;
+        }
+
+        @include element('next') {
+            right: 0;
+        }
+    }
+}
diff --git a/assets/css/objects/_icon.scss b/assets/css/objects/_icon.scss
index 53f6f78..7c5d03a 100644
--- a/assets/css/objects/_icon.scss
+++ b/assets/css/objects/_icon.scss
@@ -7,8 +7,8 @@
     
     @include object(namespace()) {
         display:         block;
-        width:           iro-px-to-rem(16px);
-        height:          iro-px-to-rem(16px);
+        width:           1em;
+        height:          1em;
         stroke-width:    1.5px;
         stroke-linecap:  round;
         stroke-linejoin: round;
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 45b733d..bbdf2af 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -17,7 +17,7 @@
 @import 'components/footer';
 @import 'components/card';
 @import 'components/note';
-@import 'components/gallery';
+@import 'components/lightbox';
 
 @import 'layouts/card-list';
 
diff --git a/content/lightbox.js b/content/lightbox.js
new file mode 100644
index 0000000..e57d37c
--- /dev/null
+++ b/content/lightbox.js
@@ -0,0 +1,41 @@
+(() => {
+    let currentIndex = 0;
+    const mainEl = document.querySelector("main");
+    const lightboxEl = document.querySelector(".c-lightbox");
+    const lightboxBgEl = document.querySelector(".c-lightbox__bg");
+    const lightboxCloseEl = document.querySelector(".c-lightbox__close");
+    const lightboxPrevEl = document.querySelector(".c-lightbox__prev");
+    const lightboxNextEl = document.querySelector(".c-lightbox__next");
+    const lightboxImgEl = document.querySelector(".c-lightbox__img");
+    const figureEls = Array.from(mainEl.querySelectorAll("figure")).map(el => el.querySelector("a"));
+
+    const show = () => {
+        lightboxEl.classList.add("is-shown");
+    }
+
+    const hide = () => {
+        lightboxEl.classList.remove("is-shown");
+    }
+
+    const setIndex = (i) => {
+        currentIndex = i;
+        lightboxImgEl.src = figureEls[i].href;
+    };
+
+    lightboxBgEl.addEventListener("click", hide);
+    lightboxCloseEl.addEventListener("click", hide);
+    lightboxPrevEl.addEventListener("click", () => {
+        setIndex(currentIndex === 0 ? figureEls.length - 1 : currentIndex - 1);
+    });
+    lightboxNextEl.addEventListener("click", () => {
+        setIndex(currentIndex === figureEls.length - 1 ? 0 : currentIndex + 1);
+    });
+    
+    figureEls.forEach((figureEl, i) => {
+        figureEl.addEventListener("click", e => {
+            e.preventDefault();
+            show();
+            setIndex(i);
+        })
+    });
+})();
diff --git a/content/projects/doodles/2021-lazy-firefox/index.md b/content/projects/doodles/2021-lazy-firefox/index.md
index f97a139..876065b 100644
--- a/content/projects/doodles/2021-lazy-firefox/index.md
+++ b/content/projects/doodles/2021-lazy-firefox/index.md
@@ -4,6 +4,10 @@ date:      2021-10-16
 thumbnail: png
 ---
 
+::: figure
 ![](firefox_lazy.png)
+:::
 
+::: figure
 ![](firefox_lazy_transparent.png)
+:::
diff --git a/content/projects/drawings/2021-cute-ava/index.md b/content/projects/drawings/2021-cute-ava/index.md
index 43171a9..d61fef8 100644
--- a/content/projects/drawings/2021-cute-ava/index.md
+++ b/content/projects/drawings/2021-cute-ava/index.md
@@ -4,4 +4,6 @@ date:      2021-03-01
 thumbnail: png
 ---
 
+::: figure
 ![](ava.png)
+:::
diff --git a/content/projects/drawings/2021-eeveelutions/index.md b/content/projects/drawings/2021-eeveelutions/index.md
index b169ee0..eed478b 100644
--- a/content/projects/drawings/2021-eeveelutions/index.md
+++ b/content/projects/drawings/2021-eeveelutions/index.md
@@ -4,8 +4,14 @@ date:      2021-08-19
 thumbnail: png
 ---
 
+::: figure
 ![](eevee.png)
+:::
 
+::: figure
 ![](flareon.png)
+:::
 
+::: figure
 ![](flareon_wink.png)
+:::
diff --git a/content/projects/drawings/2021-lycanroc-ava/index.md b/content/projects/drawings/2021-lycanroc-ava/index.md
index 275df4d..45a5261 100644
--- a/content/projects/drawings/2021-lycanroc-ava/index.md
+++ b/content/projects/drawings/2021-lycanroc-ava/index.md
@@ -4,4 +4,6 @@ date:      2021-10-19
 thumbnail: png
 ---
 
+::: figure
 ![](ava.png)
+:::
diff --git a/content/projects/drawings/2021-refsheet/index.md b/content/projects/drawings/2021-refsheet/index.md
index 696abe5..2680f2c 100644
--- a/content/projects/drawings/2021-refsheet/index.md
+++ b/content/projects/drawings/2021-refsheet/index.md
@@ -4,8 +4,14 @@ date:      2021-10-06
 thumbnail: png
 ---
 
-::: gallery
+::: figure
 ![](bottom.png)
+:::
+
+::: figure
 ![](bottom_cofe.png)
+:::
+
+::: figure
 ![](side.png)
 :::
diff --git a/content/projects/drawings/2021-spooky-ava-1/index.md b/content/projects/drawings/2021-spooky-ava-1/index.md
index 5099dcc..da5c88e 100644
--- a/content/projects/drawings/2021-spooky-ava-1/index.md
+++ b/content/projects/drawings/2021-spooky-ava-1/index.md
@@ -4,4 +4,6 @@ date:      2021-10-07
 thumbnail: png
 ---
 
+::: figure
 ![](ava.png)
+:::
diff --git a/content/projects/drawings/2021-spooky-ava-2/index.md b/content/projects/drawings/2021-spooky-ava-2/index.md
index 84064db..23c9e46 100644
--- a/content/projects/drawings/2021-spooky-ava-2/index.md
+++ b/content/projects/drawings/2021-spooky-ava-2/index.md
@@ -4,4 +4,6 @@ date:      2021-10-14
 thumbnail: png
 ---
 
+::: figure
 ![](ava.png)
+:::
diff --git a/content/projects/drawings/2022-ava-shading/index.md b/content/projects/drawings/2022-ava-shading/index.md
index 7ae09f9..e3c4a10 100644
--- a/content/projects/drawings/2022-ava-shading/index.md
+++ b/content/projects/drawings/2022-ava-shading/index.md
@@ -5,4 +5,6 @@ thumbnail: png
 unlisted:  true
 ---
 
+::: figure
 ![](pic.png)
+:::
diff --git a/content/projects/emojis/blobfox/index.md b/content/projects/emojis/blobfox/index.md
index 22c4a93..a79e0de 100644
--- a/content/projects/emojis/blobfox/index.md
+++ b/content/projects/emojis/blobfox/index.md
@@ -4,7 +4,9 @@ date:      2020-09-04
 thumbnail: jpg
 ---
 
+::: figure
 ![](screenshot.png)
+:::
 
 **Latest release:** v1.6 (%last_update.yyyy_mm_dd%)  
 **Download:** [regular version](blobfox.zip), [flipped version](blobfox_flip.zip)
diff --git a/content/projects/emojis/bunhd/index.md b/content/projects/emojis/bunhd/index.md
index 4181b75..eb3b648 100644
--- a/content/projects/emojis/bunhd/index.md
+++ b/content/projects/emojis/bunhd/index.md
@@ -4,7 +4,9 @@ date:      2019-09-30
 thumbnail: png
 ---
 
+::: figure
 ![](screenshot.png)
+:::
 
 **Latest release:** v1.2.1 (%last_update.yyyy_mm_dd%)  
 **Download:** [regular version](bunhd.zip), [flipped version](bunhd_flip.zip)
diff --git a/content/projects/emojis/vlpn/index.md b/content/projects/emojis/vlpn/index.md
index 9cec213..dcd6c8b 100644
--- a/content/projects/emojis/vlpn/index.md
+++ b/content/projects/emojis/vlpn/index.md
@@ -4,7 +4,9 @@ date:      2021-07-23
 thumbnail: png
 ---
 
+::: figure
 ![](preview.png)
+:::
 
 **Latest release:** v1.1 (%last_update.yyyy_mm_dd%)  
 **[Download](vlpn.zip)**
diff --git a/content/script.js b/content/script.js
deleted file mode 100644
index fd275b6..0000000
--- a/content/script.js
+++ /dev/null
@@ -1,28 +0,0 @@
-function createSnowFlake() {
-    setTimeout(() => createSnowFlake(), 50 / Math.log10(window.innerWidth / 1000 + 1));
-
-    if (document.hidden) {
-        return;
-    }
-
-        const snowFlake = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    const snowFlakeInner = document.createElementNS("http://www.w3.org/2000/svg", "use");
-    const aniDuration = (Math.random() * 3 + 2) * 1000;
-
-    snowFlakeInner.setAttribute("href", "/symbols.svg#icon-asterisk");
-
-    snowFlake.classList.add("o-icon", "o-icon--snow");
-    snowFlake.setAttribute("aria-hidden", "true");
-
-        snowFlake.style.fontSize = Math.random() * 0.5 + 0.7 + 'em';
-        snowFlake.style.left = Math.random() * 100 + '%';
-        snowFlake.style.animationDuration = aniDuration + 'ms';
-        snowFlake.style.opacity = Math.random();
-
-    setTimeout(() => snowFlake.remove(), aniDuration);
-
-    snowFlake.appendChild(snowFlakeInner);
-        document.body.appendChild(snowFlake);
-}
-
-createSnowFlake();
diff --git a/content/snow.js b/content/snow.js
new file mode 100644
index 0000000..5913d1e
--- /dev/null
+++ b/content/snow.js
@@ -0,0 +1,30 @@
+(() => {
+    function createSnowFlake() {
+        setTimeout(() => createSnowFlake(), 50 / Math.log10(window.innerWidth / 1000 + 1));
+
+        if (document.hidden) {
+            return;
+        }
+
+        const snowFlake = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        const snowFlakeInner = document.createElementNS("http://www.w3.org/2000/svg", "use");
+        const aniDuration = (Math.random() * 3 + 2) * 1000;
+
+        snowFlakeInner.setAttribute("href", "/symbols.svg#icon-asterisk");
+
+        snowFlake.classList.add("o-icon", "o-icon--snow");
+        snowFlake.setAttribute("aria-hidden", "true");
+
+        snowFlake.style.fontSize = Math.random() * 0.5 + 0.7 + 'em';
+        snowFlake.style.left = Math.random() * 100 + '%';
+        snowFlake.style.animationDuration = aniDuration + 'ms';
+        snowFlake.style.opacity = Math.random();
+
+        setTimeout(() => snowFlake.remove(), aniDuration);
+
+        snowFlake.appendChild(snowFlakeInner);
+        document.body.appendChild(snowFlake);
+    }
+
+    createSnowFlake();
+})();
diff --git a/content/symbols.svg b/content/symbols.svg
index 97992fc..51bc5af 100644
--- a/content/symbols.svg
+++ b/content/symbols.svg
@@ -85,5 +85,17 @@
             d="m7.75 12.85-0.45662 0.45281c-1.2692 1.2692-3.327 1.2692-4.5962 0s-1.2692-3.327 0-4.5962l2-2c1.2692-1.2692 3.327-1.2692 4.5962 0"
             fill="none" stroke="currentColor" />
       </symbol>
+
+      <symbol id="icon-x" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path d="m4 4 8 8m-8 0 8-8" fill="none" stroke="currentColor" />
+      </symbol>
+
+      <symbol id="icon-chevron-left" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path d="M 10.25,12.25 6,8 10.25,3.75" fill="none" stroke="currentColor" />
+      </symbol>
+
+      <symbol id="icon-chevron-right" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path d="m5.75 12.25 4.25-4.25-4.25-4.25" fill="none" stroke="currentColor" />
+      </symbol>
    </defs>
 </svg>
diff --git a/filters/macros.lua b/filters/macros.lua
index dc04cfd..2864bef 100644
--- a/filters/macros.lua
+++ b/filters/macros.lua
@@ -4,36 +4,21 @@ function note(el)
     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")
+function figure(el)
+    local images = pandoc.List()
 
-            local lel = pandoc.Link(iel, iel.src)
-            lel.classes = pandoc.List()
-            lel.classes:insert("c-gallery__item")
+    pandoc.walk_block(el, { Image = function(iel) images:insert(iel) end })
 
-            imageList.content:insert(lel)
-        end,
-    })
-
-    el.content = { cur, imageList }
-
-    return el
+    return pandoc.RawBlock("html",
+        "<figure><a href=\"" .. images[1].src .. "\"><img src=\"" .. images[1].src .. "\" title=\"" ..
+            images[1].title .. "\" /></a></figure>")
 end
 
 function Div(el)
     if el.classes:includes("note") then
         el = note(el)
-    elseif el.classes:includes("gallery") then
-        el = gallery(el)
+    elseif el.classes:includes("figure") then
+        el = figure(el)
     end
 
     return el
diff --git a/templates/base.html b/templates/base.html
index 22ff913..0690ee1 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -81,7 +81,32 @@ ${layouts/page()}
         </div>
     </footer>
 
-    <script src="/script.js"></script>
+    <div class="c-lightbox">
+        <div class="c-lightbox__bg"></div>
+
+        <button class="c-lightbox__close">
+            <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
+                <use href="/symbols.svg#icon-x"></use>
+            </svg>
+        </button>
+
+        <button class="c-lightbox__prev">
+            <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
+                <use href="/symbols.svg#icon-chevron-left"></use>
+            </svg>
+        </button>
+
+        <button class="c-lightbox__next">
+            <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
+                <use href="/symbols.svg#icon-chevron-right"></use>
+            </svg>
+        </button>
+
+        <img class="c-lightbox__img" />
+    </div>
+
+    <script src="/lightbox.js"></script>
+    <script src="/snow.js"></script>
 </body>
 
 </html>