summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--assets/css/_base.scss12
-rw-r--r--assets/css/components/_figure.scss21
-rw-r--r--assets/css/style.scss1
-rw-r--r--content/art/drawings/2022-ava-shading/index.md8
-rwxr-xr-x[-rw-r--r--]content/art/drawings/2022-ava-shading/pic.pngbin601222 -> 473946 bytes
-rwxr-xr-xcontent/art/drawings/2022-ava-shading/thumbnail.pngbin0 -> 165693 bytes
-rw-r--r--content/main.js16
-rw-r--r--content/notebook/index.md2
-rw-r--r--filters/macros.lua7
-rw-r--r--yarn.lock2
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 {
25 display: block; 25 display: block;
26 max-width: 100%; 26 max-width: 100%;
27} 27}
28
29figure {
30 margin: fn.dim(--paragraph --margin-top) 0 0;
31 padding: 0;
32
33 img {
34 display: block;
35 max-width: 100%;
36 max-height: 70vh;
37 object-fit: contain;
38 }
39}
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 @@
1@use 'iro-sass/src/index' as iro;
2@use 'iro-design/src/functions' as fn;
3@use 'iro-design/src/mixins' as mx;
4@use '../functions' as fn2;
5
6@include iro.props-namespace('figure') {
7 @include iro.bem-component(iro.props-namespace()) {
8 margin: fn.global-dim(--paragraph --margin-top) 0 0;
9 padding: 0;
10
11 @include iro.bem-elem('link') {
12 display: block;
13 }
14
15 @include iro.bem-elem('image') {
16 display: block;
17 max-width: 100%;
18 max-height: 70vh;
19 }
20 }
21}
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 @@
21@use 'components/header'; 21@use 'components/header';
22@use 'components/hnav'; 22@use 'components/hnav';
23@use 'components/card'; 23@use 'components/card';
24@use 'components/figure';
24 25
25@use 'iro-design/src/scopes/blockquotes' as iro-blockquotes; 26@use 'iro-design/src/scopes/blockquotes' as iro-blockquotes;
26@use 'iro-design/src/scopes/code' as iro-code; 27@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 @@
1--- 1---
2title: Avatar with shading 2title: Autumn Fox
3date: 2021-12-27 3date: 2022-02-25
4thumbnail: png 4thumbnail: png
5unlisted: true
6--- 5---
7 6
7First attempt at cel shading.
8It's actually incomplete, but I felt like I had hit a roadblock with the shading and wanted to try again with another drawing.
9
8::: figure 10::: figure
9![](pic.png) 11![](pic.png)
10::: 12:::
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
Binary files differ
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
Binary files differ
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 @@
22(() => { 22(() => {
23 let currentIndex = 0; 23 let currentIndex = 0;
24 let visible = false; 24 let visible = false;
25 let mouseDown = false;
25 26
26 const mainEl = document.querySelector("main"); 27 const mainEl = document.querySelector("main");
27 const lightboxContainerEl = document.querySelector(".js-lightbox"); 28 const lightboxContainerEl = document.querySelector(".js-lightbox");
@@ -90,6 +91,21 @@
90 return thumbnailButtonEl; 91 return thumbnailButtonEl;
91 }); 92 });
92 93
94 document.addEventListener('mousedown', (e) => {
95 if (visible) {
96 mouseDown = !lightboxEl.contains(e.target) || lightboxEl === e.target;
97 }
98 });
99
100 document.addEventListener('click', (e) => {
101 if (visible && mouseDown) {
102 mouseDown = false;
103 e.preventDefault();
104 e.stopPropagation();
105 hide();
106 }
107 }, { capture: true });
108
93 window.addEventListener("keydown", e => { 109 window.addEventListener("keydown", e => {
94 if (e.defaultPrevented || !visible) { 110 if (e.defaultPrevented || !visible) {
95 return; 111 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
6list_flatten: true 6list_flatten: true
7feed: true 7feed: true
8--- 8---
9
10Essays, 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)
10 pandoc.walk_block(el, { Image = function(iel) images:insert(iel) end }) 10 pandoc.walk_block(el, { Image = function(iel) images:insert(iel) end })
11 11
12 return pandoc.RawBlock("html", 12 return pandoc.RawBlock("html",
13 "<figure><a href=\"" .. images[1].src .. "\"><img src=\"" .. images[1].src .. "\" title=\"" .. 13 "<figure class=\"c-figure\">\
14 images[1].title .. "\" /></a></figure>") 14 <a class=\"c-figure__link\" href=\"" .. images[1].src .. "\">\
15 <img class=\"c-figure__image\" src=\"" .. images[1].src .. "\" title=\"" .. images[1].title .. "\" />\
16 </a>\
17 </figure>")
15end 18end
16 19
17function Div(el) 20function 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:
1280 1280
1281"iro-design@git+https://git.vulpes.one/git/iro-design.git": 1281"iro-design@git+https://git.vulpes.one/git/iro-design.git":
1282 version "1.0.0" 1282 version "1.0.0"
1283 resolved "git+https://git.vulpes.one/git/iro-design.git#e62df622527bcd9e3ee45d3efd9a06b553d41b82" 1283 resolved "git+https://git.vulpes.one/git/iro-design.git#fb32c0014dd4f74b37b179fdc596badf2f055bd4"
1284 dependencies: 1284 dependencies:
1285 "@oddbird/blend" "^0.2.3" 1285 "@oddbird/blend" "^0.2.3"
1286 include-media "^1.4.9" 1286 include-media "^1.4.9"