10 files changed, 51 insertions, 18 deletions

diff --git a/assets/css/_base.scss b/assets/css/_base.scss
index 93db12f..f06dc4a 100644
--- a/assets/css/_base.scss
+++ b/assets/css/_base.scss
@@ -25,15 +25,3 @@ img {
     display:   block;
     max-width: 100%;
 }
-
-figure {
-    margin:  fn.dim(--paragraph --margin-top) 0 0;
-    padding: 0;
-
-    img {
-        display:    block;
-        max-width:  100%;
-        max-height: 70vh;
-        object-fit: contain;
-    }
-}
diff --git a/assets/css/components/_figure.scss b/assets/css/components/_figure.scss
new file mode 100644
index 0000000..78e13c0
--- /dev/null
+++ b/assets/css/components/_figure.scss
@@ -0,0 +1,21 @@
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+@use 'iro-design/src/mixins' as mx;
+@use '../functions' as fn2;
+
+@include iro.props-namespace('figure') {
+    @include iro.bem-component(iro.props-namespace()) {
+        margin:  fn.global-dim(--paragraph --margin-top) 0 0;
+        padding: 0;
+
+        @include iro.bem-elem('link') {
+            display: block;
+        }
+
+        @include iro.bem-elem('image') {
+            display:    block;
+            max-width:  100%;
+            max-height: 70vh;
+        }
+    }
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index b525e7b..9ec6483 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -21,6 +21,7 @@
 @use 'components/header';
 @use 'components/hnav';
 @use 'components/card';
+@use 'components/figure';
 
 @use 'iro-design/src/scopes/blockquotes' as iro-blockquotes;
 @use 'iro-design/src/scopes/code' as iro-code;
diff --git a/content/art/drawings/2022-ava-shading/index.md b/content/art/drawings/2022-ava-shading/index.md
index e3c4a10..9dcea6a 100644
--- a/content/art/drawings/2022-ava-shading/index.md
+++ b/content/art/drawings/2022-ava-shading/index.md
@@ -1,10 +1,12 @@
 ---
-title:     Avatar with shading
-date:      2021-12-27
+title:     Autumn Fox
+date:      2022-02-25
 thumbnail: png
-unlisted:  true
 ---
 
+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/art/drawings/2022-ava-shading/pic.png b/content/art/drawings/2022-ava-shading/pic.png
index 5e7dcec..0689364 100644..100755
--- a/content/art/drawings/2022-ava-shading/pic.png
+++ b/content/art/drawings/2022-ava-shading/pic.png
diff --git a/content/art/drawings/2022-ava-shading/thumbnail.png b/content/art/drawings/2022-ava-shading/thumbnail.png
new file mode 100755
index 0000000..dc39092
--- /dev/null
+++ b/content/art/drawings/2022-ava-shading/thumbnail.png
diff --git a/content/main.js b/content/main.js
index 3257c39..760d40a 100644
--- a/content/main.js
+++ b/content/main.js
@@ -22,6 +22,7 @@
 (() => {
     let currentIndex = 0;
     let visible = false;
+    let mouseDown = false;
 
     const mainEl = document.querySelector("main");
     const lightboxContainerEl = document.querySelector(".js-lightbox");
@@ -90,6 +91,21 @@
         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;
diff --git a/content/notebook/index.md b/content/notebook/index.md
index b1e2d2a..2cebe5c 100644
--- a/content/notebook/index.md
+++ b/content/notebook/index.md
@@ -6,3 +6,5 @@ list_order:   date_desc
 list_flatten: true
 feed:         true
 ---
+
+Essays, notes, blogs, thoughts... all kinds of textual content.
diff --git a/filters/macros.lua b/filters/macros.lua
index 2864bef..36cc459 100644
--- a/filters/macros.lua
+++ b/filters/macros.lua
@@ -10,8 +10,11 @@ function figure(el)
     pandoc.walk_block(el, { Image = function(iel) images:insert(iel) end })
 
     return pandoc.RawBlock("html",
-        "<figure><a href=\"" .. images[1].src .. "\"><img src=\"" .. images[1].src .. "\" title=\"" ..
-            images[1].title .. "\" /></a></figure>")
+        "<figure class=\"c-figure\">\
+            <a class=\"c-figure__link\" href=\"" .. images[1].src .. "\">\
+                <img class=\"c-figure__image\" src=\"" .. images[1].src .. "\" title=\"" .. images[1].title .. "\" />\
+            </a>\
+        </figure>")
 end
 
 function Div(el)
diff --git a/yarn.lock b/yarn.lock
index f60fb4e..a7bbd43 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1280,7 +1280,7 @@ internal-slot@^1.0.3:
 
 "iro-design@git+https://git.vulpes.one/git/iro-design.git":
   version "1.0.0"
-  resolved "git+https://git.vulpes.one/git/iro-design.git#e62df622527bcd9e3ee45d3efd9a06b553d41b82"
+  resolved "git+https://git.vulpes.one/git/iro-design.git#fb32c0014dd4f74b37b179fdc596badf2f055bd4"
   dependencies:
     "@oddbird/blend" "^0.2.3"
     include-media "^1.4.9"