Added page type for art pieces

10 files changed, 178 insertions, 175 deletions

diff --git a/content/art/doodles/2021-lazy-firefox/index.md b/content/art/doodles/2021-lazy-firefox/index.md
index 987dabe..f57f184 100644
--- a/content/art/doodles/2021-lazy-firefox/index.md
+++ b/content/art/doodles/2021-lazy-firefox/index.md
@@ -3,6 +3,7 @@ schema_type: VisualArtwork
 title:       Lazy Firefox
 date:        2021-10-16
 thumbnail:   png
+layout:      exhibit
 ---
 
 ::: figure
diff --git a/content/art/drawings/2021-cute-ava/index.md b/content/art/drawings/2021-cute-ava/index.md
index c2648ba..3f9304e 100644
--- a/content/art/drawings/2021-cute-ava/index.md
+++ b/content/art/drawings/2021-cute-ava/index.md
@@ -3,8 +3,8 @@ schema_type: VisualArtwork
 title:       Cute Avatar
 date:        2021-03-01
 thumbnail:   png
----
+layout:      exhibit
 
-::: figure
-![](ava.png)
-:::
+images:
+  - ava.png
+---
diff --git a/content/art/drawings/2021-eeveelutions/index.md b/content/art/drawings/2021-eeveelutions/index.md
index c291d74..3fa6b4c 100644
--- a/content/art/drawings/2021-eeveelutions/index.md
+++ b/content/art/drawings/2021-eeveelutions/index.md
@@ -3,16 +3,10 @@ schema_type: VisualArtwork
 title:       Eeveelutions
 date:        2021-08-19
 thumbnail:   png
----
-
-::: figure
-![](eevee.png)
-:::
+layout:      exhibit
 
-::: figure
-![](flareon.png)
-:::
-
-::: figure
-![](flareon_wink.png)
-:::
+images:
+  - eevee.png
+  - flareon.png
+  - flareon_wink.png
+---
diff --git a/content/art/drawings/2021-lycanroc-ava/index.md b/content/art/drawings/2021-lycanroc-ava/index.md
index 08c80e4..a23eb5e 100644
--- a/content/art/drawings/2021-lycanroc-ava/index.md
+++ b/content/art/drawings/2021-lycanroc-ava/index.md
@@ -3,8 +3,10 @@ schema_type: VisualArtwork
 title:       Lycanroc Avatar
 date:        2021-10-19
 thumbnail:   png
+layout:      exhibit
+
+images:
+  - ava.png
 ---
 
-::: figure
-![](ava.png)
-:::
+Avatar for [@feralbot@botsin.space](https://botsin.space/@feralbot), a bot that posts pictures of feral characters from [e926](https://e926.net/).
diff --git a/content/art/drawings/2021-refsheet/index.md b/content/art/drawings/2021-refsheet/index.md
index 8d85c86..d331217 100644
--- a/content/art/drawings/2021-refsheet/index.md
+++ b/content/art/drawings/2021-refsheet/index.md
@@ -3,16 +3,10 @@ schema_type: VisualArtwork
 title:       Reference Sheet Views
 date:        2021-10-06
 thumbnail:   png
----
-
-::: figure
-![](bottom.png)
-:::
+layout:      exhibit
 
-::: figure
-![](bottom_cofe.png)
-:::
-
-::: figure
-![](side.png)
-:::
+images:
+  - bottom.png
+  - bottom_cofe.png
+  - side.png
+---
diff --git a/content/art/drawings/2021-spooky-ava-1/index.md b/content/art/drawings/2021-spooky-ava-1/index.md
index 12cdd89..4d65b49 100644
--- a/content/art/drawings/2021-spooky-ava-1/index.md
+++ b/content/art/drawings/2021-spooky-ava-1/index.md
@@ -3,8 +3,8 @@ schema_type: VisualArtwork
 title:       \"Spooky\" Avatar
 date:        2021-10-07
 thumbnail:   png
----
+layout:      exhibit
 
-::: figure
-![](ava.png)
-:::
+images:
+  - ava.png
+---
diff --git a/content/art/drawings/2021-spooky-ava-2/index.md b/content/art/drawings/2021-spooky-ava-2/index.md
index 349d318..74a60ce 100644
--- a/content/art/drawings/2021-spooky-ava-2/index.md
+++ b/content/art/drawings/2021-spooky-ava-2/index.md
@@ -3,8 +3,8 @@ schema_type: VisualArtwork
 title:       Spooky Avatar
 date:        2021-10-14
 thumbnail:   png
----
+layout:      exhibit
 
-::: figure
-![](ava.png)
-:::
+images:
+  - ava.png
+---
diff --git a/content/art/drawings/2022-autumn-fox/index.md b/content/art/drawings/2022-autumn-fox/index.md
index 52eadd8..0384675 100644
--- a/content/art/drawings/2022-autumn-fox/index.md
+++ b/content/art/drawings/2022-autumn-fox/index.md
@@ -3,11 +3,11 @@ schema_type: VisualArtwork
 title:       Autumn Fox
 date:        2022-02-25
 thumbnail:   png
+layout:      exhibit
+
+images:
+  - pic.png
 ---
 
 First attempt at cel shading.
 It's actually incomplete, but I felt like I had hit a roadblock with the shading and wanted to try again with another drawing.
-
-::: figure
-![](pic.png)
-:::
diff --git a/content/lightbox.js b/content/lightbox.js
new file mode 100644
index 0000000..a415930
--- /dev/null
+++ b/content/lightbox.js
@@ -0,0 +1,141 @@
+(() => {
+    const mainEl = document.querySelector("main");
+    const lightboxContainerEl = document.querySelector(".js-lightbox");
+    const lightboxEl = lightboxContainerEl.querySelector(".o-lightbox");
+    const lightboxCloseEl = lightboxEl.querySelector(".o-lightbox__close-btn");
+    const lightboxPrevEl = lightboxEl.querySelector(".o-lightbox__prev-btn");
+    const lightboxNextEl = lightboxEl.querySelector(".o-lightbox__next-btn");
+    const lightboxImgEl = lightboxEl.querySelector(".o-lightbox__img");
+    const lightboxFooterEl = lightboxEl.querySelector(".o-lightbox__footer");
+    const figureEls = Array.from(mainEl.querySelectorAll(".js-lightbox__image"));
+
+    const closeable = lightboxContainerEl.classList.contains("js-lightbox--closeable");
+    let currentIndex = 0;
+    let visible = !lightboxContainerEl.classList.contains("u-d-none");
+    let mouseDown = false;
+
+    const show = () => {
+        visible = true;
+        lightboxContainerEl.classList.remove("u-d-none");
+    }
+
+    const hide = () => {
+        if (closeable) {
+            visible = false;
+            lightboxContainerEl.classList.add("u-d-none");
+        }
+    }
+
+    const setIndex = (i) => {
+        if (i < 0 || i >= thumbnailEls.length) {
+            return;
+        }
+        thumbnailEls[currentIndex].classList.remove("is-selected");
+        currentIndex = i;
+        lightboxImgEl.src = figureEls[i].firstElementChild.href;
+        thumbnailEls[i].classList.add("is-selected");
+    };
+
+    const prev = () => {
+        setIndex(currentIndex > 0 ? currentIndex - 1 : figureEls.length - 1);
+    };
+
+    const next = () => {
+        setIndex(currentIndex < figureEls.length - 1 ? currentIndex + 1 : 0);
+    };
+
+    lightboxCloseEl?.addEventListener("click", hide);
+    lightboxPrevEl.addEventListener("click", prev);
+    lightboxNextEl.addEventListener("click", next);
+    
+    const thumbnailEls = figureEls.map((figureEl, i) => {
+        const go = e => {
+            e.preventDefault();
+            show();
+            setIndex(i);
+        };
+
+        let anchorEl;
+        let imgEl;
+
+        if (figureEl.firstElementChild.tagName === "A") {
+            anchorEl = figureEl.firstElementChild;
+            imgEl = anchorEl.firstElementChild;
+        } else {
+            imgEl = figureEl.firstElementChild;
+            anchorEl = document.createElement("a");
+            anchorEl.href = imgEl.src;
+
+            figureEl.insertBefore(anchorEl, imgEl);
+            figureEl.removeChild(imgEl);
+            anchorEl.appendChild(imgEl);
+        }
+
+        anchorEl.addEventListener("click", go);
+
+        const thumbnailButtonEl = document.createElement("button");
+        const thumbnailImgEl = document.createElement("img");
+
+        thumbnailImgEl.classList.add("o-lightbox__thumbnail-img");
+        thumbnailImgEl.src = anchorEl.href;
+
+        thumbnailButtonEl.classList.add("o-lightbox__thumbnail");
+        thumbnailButtonEl.appendChild(thumbnailImgEl);
+        thumbnailButtonEl.addEventListener("click", go);
+
+        if (i === currentIndex) {
+            thumbnailButtonEl.classList.add("is-selected");
+        }
+
+        lightboxFooterEl.appendChild(thumbnailButtonEl);
+
+        return thumbnailButtonEl;
+    });
+
+    setIndex(0);
+
+    if (closeable) {
+        document.addEventListener('mousedown', (e) => {
+            if (visible) {
+                mouseDown = !lightboxEl.contains(e.target) || lightboxEl === e.target;
+            }
+        });
+
+        document.addEventListener('click', (e) => {
+            if (visible && mouseDown) {
+                mouseDown = false;
+                e.preventDefault();
+                e.stopPropagation();
+                hide();
+            }
+        }, { capture: true });
+    }
+
+    window.addEventListener("keydown", e => {
+        if (e.defaultPrevented || !visible) {
+            return;
+        }
+
+        switch (e.key) {
+            case "Left":
+            case "ArrowLeft":
+                prev();
+                break;
+
+            case "Right":
+            case "ArrowRight":
+                next();
+                break;
+
+            case "Esc":
+            case "Escape":
+                hide();
+                break;
+
+            default:
+                return;
+        }
+
+        e.preventDefault();
+    }, true);
+})();
diff --git a/content/main.js b/content/main.js
index c843947..7189312 100644
--- a/content/main.js
+++ b/content/main.js
@@ -1,4 +1,7 @@
 (() => {
+    document.body.classList.remove('t-no-js');
+    document.body.classList.add('t-js');
+
     const enableFocusIndicator = e => {
         if (e.key !== 'Tab') {
             return;
@@ -18,135 +21,3 @@
 
     document.addEventListener('keydown', enableFocusIndicator);
 })();
-
-(() => {
-    let currentIndex = 0;
-    let visible = false;
-    let mouseDown = false;
-
-    const mainEl = document.querySelector("main");
-    const lightboxContainerEl = document.querySelector(".js-lightbox");
-    const lightboxEl = lightboxContainerEl.querySelector(".o-lightbox");
-    const lightboxCloseEl = lightboxEl.querySelector(".o-lightbox__close-btn");
-    const lightboxPrevEl = lightboxEl.querySelector(".o-lightbox__prev-btn");
-    const lightboxNextEl = lightboxEl.querySelector(".o-lightbox__next-btn");
-    const lightboxImgEl = lightboxEl.querySelector(".o-lightbox__img");
-    const lightboxFooterEl = lightboxEl.querySelector(".o-lightbox__footer");
-    const figureEls = Array.from(mainEl.querySelectorAll("figure"));
-
-    const show = () => {
-        visible = true;
-        lightboxContainerEl.classList.remove("u-d-none");
-    }
-
-    const hide = () => {
-        visible = false;
-        lightboxContainerEl.classList.add("u-d-none");
-    }
-
-    const setIndex = (i) => {
-        thumbnailEls[currentIndex].classList.remove("is-selected");
-        currentIndex = i;
-        lightboxImgEl.src = figureEls[i].firstElementChild.href;
-        thumbnailEls[i].classList.add("is-selected");
-    };
-
-    const prev = () => {
-        setIndex(currentIndex > 0 ? currentIndex - 1 : figureEls.length - 1);
-    };
-
-    const next = () => {
-        setIndex(currentIndex < figureEls.length - 1 ? currentIndex + 1 : 0);
-    };
-
-    lightboxCloseEl.addEventListener("click", hide);
-    lightboxPrevEl.addEventListener("click", prev);
-    lightboxNextEl.addEventListener("click", next);
-    
-    const thumbnailEls = figureEls.map((figureEl, i) => {
-        const go = e => {
-            e.preventDefault();
-            show();
-            setIndex(i);
-        };
-
-        let anchorEl;
-        let imgEl;
-
-        if (figureEl.firstElementChild.tagName === "A") {
-            anchorEl = figureEl.firstElementChild;
-            imgEl = anchorEl.firstElementChild;
-        } else {
-            imgEl = figureEl.firstElementChild;
-            anchorEl = document.createElement("a");
-            anchorEl.href = imgEl.src;
-
-            figureEl.insertBefore(anchorEl, imgEl);
-            figureEl.removeChild(imgEl);
-            anchorEl.appendChild(imgEl);
-        }
-
-        anchorEl.addEventListener("click", go);
-
-        const thumbnailButtonEl = document.createElement("button");
-        const thumbnailImgEl = document.createElement("img");
-
-        thumbnailImgEl.classList.add("o-lightbox__thumbnail-img");
-        thumbnailImgEl.src = anchorEl.href;
-
-        thumbnailButtonEl.classList.add("o-lightbox__thumbnail");
-        thumbnailButtonEl.appendChild(thumbnailImgEl);
-        thumbnailButtonEl.addEventListener("click", go);
-
-        if (i === currentIndex) {
-            thumbnailButtonEl.classList.add("is-selected");
-        }
-
-        lightboxFooterEl.appendChild(thumbnailButtonEl);
-
-        return thumbnailButtonEl;
-    });
-
-    document.addEventListener('mousedown', (e) => {
-        if (visible) {
-            mouseDown = !lightboxEl.contains(e.target) || lightboxEl === e.target;
-        }
-    });
-
-    document.addEventListener('click', (e) => {
-        if (visible && mouseDown) {
-            mouseDown = false;
-            e.preventDefault();
-            e.stopPropagation();
-            hide();
-        }
-    }, { capture: true });
-
-    window.addEventListener("keydown", e => {
-        if (e.defaultPrevented || !visible) {
-            return;
-        }
-
-        switch (e.key) {
-            case "Left":
-            case "ArrowLeft":
-                prev();
-                break;
-
-            case "Right":
-            case "ArrowRight":
-                next();
-                break;
-
-            case "Esc":
-            case "Escape":
-                hide();
-                break;
-
-            default:
-                return;
-        }
-
-        e.preventDefault();
-    }, true);
-})();