summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-06-18 00:04:21 +0200
committerVolpeon <git@volpeon.ink>2022-06-18 00:04:21 +0200
commit26c099aa807d8e67944f72be04a325f37da305d5 (patch)
treef7781f003b95979d6a2e1c39d9491c26589ec91a
parentMake some page elements wide (diff)
downloadvolpeon.ink-26c099aa807d8e67944f72be04a325f37da305d5.tar.gz
volpeon.ink-26c099aa807d8e67944f72be04a325f37da305d5.tar.bz2
volpeon.ink-26c099aa807d8e67944f72be04a325f37da305d5.zip
Added page type for art pieces
Diffstat
-rw-r--r--assets/css/_declare-vars.scss8
-rw-r--r--assets/css/components/_exhibit.scss38
-rw-r--r--assets/css/components/_header.scss38
-rw-r--r--assets/css/components/_main.scss15
-rw-r--r--assets/css/layouts/_card-list.scss4
-rw-r--r--assets/css/scopes/_body.scss10
-rw-r--r--assets/css/style.scss3
-rw-r--r--content/art/doodles/2021-lazy-firefox/index.md1
-rw-r--r--content/art/drawings/2021-cute-ava/index.md8
-rw-r--r--content/art/drawings/2021-eeveelutions/index.md18
-rw-r--r--content/art/drawings/2021-lycanroc-ava/index.md8
-rw-r--r--content/art/drawings/2021-refsheet/index.md18
-rw-r--r--content/art/drawings/2021-spooky-ava-1/index.md8
-rw-r--r--content/art/drawings/2021-spooky-ava-2/index.md8
-rw-r--r--content/art/drawings/2022-autumn-fox/index.md8
-rw-r--r--content/lightbox.js141
-rw-r--r--content/main.js135
-rw-r--r--filters/macros.lua2
-rw-r--r--templates/base.html30
-rw-r--r--templates/feed_entry.xml12
-rw-r--r--templates/layouts/categorized_list.html2
-rw-r--r--templates/layouts/exhibit.html66
-rw-r--r--templates/layouts/list.html2
-rw-r--r--templates/layouts/page.html34
-rw-r--r--templates/layouts/redirect.html4
-rw-r--r--templates/partials/gallery_card.html8
-rw-r--r--templates/partials/grid_card.html8
-rw-r--r--templates/partials/list_card.html12
-rw-r--r--yarn.lock2
29 files changed, 397 insertions, 254 deletions
diff --git a/assets/css/_declare-vars.scss b/assets/css/_declare-vars.scss
index 3422588..38aaa21 100644
--- a/assets/css/_declare-vars.scss
+++ b/assets/css/_declare-vars.scss
@@ -19,6 +19,10 @@
19 --1000: iro.fn-px-to-rem(60px), 19 --1000: iro.fn-px-to-rem(60px),
20 --1100: iro.fn-px-to-rem(70px), 20 --1100: iro.fn-px-to-rem(70px),
21 ), 21 ),
22
23 --header: (
24 --height: fn.dim(--size --800),
25 ),
22 ) 26 )
23), 'dims'); 27), 'dims');
24 28
@@ -40,6 +44,10 @@
40 --1000: iro.fn-px-to-rem(45px), 44 --1000: iro.fn-px-to-rem(45px),
41 --1100: iro.fn-px-to-rem(50px), 45 --1100: iro.fn-px-to-rem(50px),
42 ), 46 ),
47
48 --header: (
49 --height: fn.dim(--size --700),
50 ),
43 ) 51 )
44), 'sm'); 52), 'sm');
45 53
diff --git a/assets/css/components/_exhibit.scss b/assets/css/components/_exhibit.scss
new file mode 100644
index 0000000..96ed1ae
--- /dev/null
+++ b/assets/css/components/_exhibit.scss
@@ -0,0 +1,38 @@
1@use 'iro-sass/src/index' as iro;
2@use 'iro-design/src/functions' as fn;
3@use 'include-media/dist/include-media' as media;
4
5@include iro.props-namespace('exhibit') {
6 @include iro.props-store((
7 --dims: (
8 --height: 100vh,
9 )
10 ), 'dims');
11
12 @include iro.props-store((
13 --colors: (
14 --footer: (
15 --bg: fn.global-color(--bg-hi),
16 ),
17 )
18 ), 'colors');
19
20 @include iro.bem-component(iro.props-namespace()) {
21 display: grid;
22 grid-template-rows: 1fr auto;
23 grid-template-areas: 'content' 'footer';
24 box-sizing: border-box;
25 height: fn.dim(--height);
26
27 @include iro.bem-elem('content') {
28 grid-area: content;
29 height: auto;
30 overflow: hidden;
31 }
32
33 @include iro.bem-elem('footer') {
34 grid-area: footer;
35 background-color: fn.color(--footer --bg);
36 }
37 }
38}
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index ce216ee..c8b50f8 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -19,10 +19,10 @@
19 19
20 @include iro.props-store(( 20 @include iro.props-store((
21 --dims: ( 21 --dims: (
22 --height: 4rem, 22 --height: fn.global-dim(--header --height),
23 --icon: 1.5rem, 23 --icon: 1.5rem,
24 --pad-x: calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))), 24 --pad-x: calc(.5 * (fn.dim(--height, null) - fn.dim(--icon, null))),
25 --gap: 2px, 25 --gap: fn.global-dim(--size --25),
26 ) 26 )
27 ), 'dims'); 27 ), 'dims');
28 28
@@ -32,18 +32,14 @@
32 ) 32 )
33 ), 'colors-dark'); 33 ), 'colors-dark');
34 34
35 @include iro.props-store((
36 --dims: (
37 --height: 3.4rem,
38 )
39 ), 'sm');
40
41 @include iro.bem-component(iro.props-namespace()) { 35 @include iro.bem-component(iro.props-namespace()) {
42 display: flex; 36 display: flex;
43 width: 0; 37 position: absolute;
44 height: fn.dim(--height); 38 z-index: 100;
45 padding: fn.dim(--gap); 39 top: 0;
46 gap: fn.dim(--gap); 40 left: 0;
41 height: fn.dim(--height);
42 gap: fn.dim(--gap);
47 43
48 @include iro.bem-elem('item') { 44 @include iro.bem-elem('item') {
49 padding: 0 fn.dim(--pad-x); 45 padding: 0 fn.dim(--pad-x);
@@ -52,7 +48,6 @@
52 color: fn.color(--fg); 48 color: fn.color(--fg);
53 line-height: fn.dim(--height); 49 line-height: fn.dim(--height);
54 text-decoration: none; 50 text-decoration: none;
55 white-space: nowrap;
56 51
57 &:hover, 52 &:hover,
58 &:focus { 53 &:focus {
@@ -78,19 +73,8 @@
78 height: fn.dim(--icon); 73 height: fn.dim(--icon);
79 } 74 }
80 75
81 @include iro.bem-modifier('fixed') {
82 position: fixed;
83 }
84
85 @include media.media('>=lg') { 76 @include media.media('>=lg') {
86 position: sticky; 77 position: fixed;
87 z-index: 100;
88 top: 0;
89 margin-bottom: calc(-.75 * #{fn.dim(--height)});
90
91 @include iro.bem-modifier('fixed') {
92 position: fixed;
93 }
94 } 78 }
95 79
96 @media print { 80 @media print {
diff --git a/assets/css/components/_main.scss b/assets/css/components/_main.scss
new file mode 100644
index 0000000..f0a839e
--- /dev/null
+++ b/assets/css/components/_main.scss
@@ -0,0 +1,15 @@
1@use 'iro-sass/src/index' as iro;
2@use 'iro-design/src/functions' as fn;
3@use 'include-media/dist/include-media' as media;
4
5@include iro.props-namespace('main') {
6 @include iro.props-store((
7 --dims: (
8 --pad-top: fn.global-dim(--header --height),
9 )
10 ), 'dims');
11
12 @include iro.bem-component(iro.props-namespace()) {
13 margin-top: fn.dim(--pad-top);
14 }
15}
diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss
index 2d9d58f..92c89b7 100644
--- a/assets/css/layouts/_card-list.scss
+++ b/assets/css/layouts/_card-list.scss
@@ -9,7 +9,7 @@
9 --gap: fn.global-dim(--size --25), 9 --gap: fn.global-dim(--size --25),
10 --grid-2: ( 10 --grid-2: (
11 --gap: fn.global-dim(--size --75), 11 --gap: fn.global-dim(--size --75),
12 --col-width: fn.global-dim(--size --3400), 12 --col-width: fn.global-dim(--size --3200),
13 ), 13 ),
14 --grid-3: ( 14 --grid-3: (
15 --gap: fn.global-dim(--size --75), 15 --gap: fn.global-dim(--size --75),
@@ -17,7 +17,7 @@
17 ), 17 ),
18 --gallery-2: ( 18 --gallery-2: (
19 --gap: fn.global-dim(--size --200), 19 --gap: fn.global-dim(--size --200),
20 --col-width: fn.global-dim(--size --3400), 20 --col-width: fn.global-dim(--size --3200),
21 ), 21 ),
22 --gallery-3: ( 22 --gallery-3: (
23 --gap: fn.global-dim(--size --200), 23 --gap: fn.global-dim(--size --200),
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
new file mode 100644
index 0000000..1c76843
--- /dev/null
+++ b/assets/css/scopes/_body.scss
@@ -0,0 +1,10 @@
1@use 'iro-sass/src/index' as iro;
2@use 'iro-design/src/functions' as fn;
3
4@include iro.props-namespace('body') {
5 @include iro.bem-scope(iro.props-namespace()) {
6 > :first-child {
7 margin-top: 0;
8 }
9 }
10}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 3fce2f4..046210f 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -18,11 +18,13 @@
18@use 'iro-design/src/objects/alert' as iro-alert; 18@use 'iro-design/src/objects/alert' as iro-alert;
19@use 'iro-design/src/objects/lightbox' as iro-lightbox; 19@use 'iro-design/src/objects/lightbox' as iro-lightbox;
20 20
21@use 'components/main';
21@use 'components/footer'; 22@use 'components/footer';
22@use 'components/header'; 23@use 'components/header';
23@use 'components/hnav'; 24@use 'components/hnav';
24@use 'components/card'; 25@use 'components/card';
25@use 'components/figure'; 26@use 'components/figure';
27@use 'components/exhibit';
26 28
27@use 'iro-design/src/scopes/blockquotes' as iro-blockquotes; 29@use 'iro-design/src/scopes/blockquotes' as iro-blockquotes;
28@use 'iro-design/src/scopes/code' as iro-code; 30@use 'iro-design/src/scopes/code' as iro-code;
@@ -31,6 +33,7 @@
31@use 'iro-design/src/scopes/invisible-links' as iro-invisible-links; 33@use 'iro-design/src/scopes/invisible-links' as iro-invisible-links;
32@use 'iro-design/src/scopes/lists' as iro-lists; 34@use 'iro-design/src/scopes/lists' as iro-lists;
33@use 'iro-design/src/scopes/tables' as iro-tables; 35@use 'iro-design/src/scopes/tables' as iro-tables;
36@use 'scopes/body';
34@use 'scopes/small'; 37@use 'scopes/small';
35@use 'scopes/alerts'; 38@use 'scopes/alerts';
36 39
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
3title: Lazy Firefox 3title: Lazy Firefox
4date: 2021-10-16 4date: 2021-10-16
5thumbnail: png 5thumbnail: png
6layout: exhibit
6--- 7---
7 8
8::: figure 9::: 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
3title: Cute Avatar 3title: Cute Avatar
4date: 2021-03-01 4date: 2021-03-01
5thumbnail: png 5thumbnail: png
6--- 6layout: exhibit
7 7
8::: figure 8images:
9![](ava.png) 9 - ava.png
10::: 10---
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
3title: Eeveelutions 3title: Eeveelutions
4date: 2021-08-19 4date: 2021-08-19
5thumbnail: png 5thumbnail: png
6--- 6layout: exhibit
7
8::: figure
9![](eevee.png)
10:::
11 7
12::: figure 8images:
13![](flareon.png) 9 - eevee.png
14::: 10 - flareon.png
15 11 - flareon_wink.png
16::: figure 12---
17![](flareon_wink.png)
18:::
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
3title: Lycanroc Avatar 3title: Lycanroc Avatar
4date: 2021-10-19 4date: 2021-10-19
5thumbnail: png 5thumbnail: png
6layout: exhibit
7
8images:
9 - ava.png
6--- 10---
7 11
8::: figure 12Avatar for [@feralbot@botsin.space](https://botsin.space/@feralbot), a bot that posts pictures of feral characters from [e926](https://e926.net/).
9![](ava.png)
10:::
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
3title: Reference Sheet Views 3title: Reference Sheet Views
4date: 2021-10-06 4date: 2021-10-06
5thumbnail: png 5thumbnail: png
6--- 6layout: exhibit
7
8::: figure
9![](bottom.png)
10:::
11 7
12::: figure 8images:
13![](bottom_cofe.png) 9 - bottom.png
14::: 10 - bottom_cofe.png
15 11 - side.png
16::: figure 12---
17![](side.png)
18:::
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
3title: \"Spooky\" Avatar 3title: \"Spooky\" Avatar
4date: 2021-10-07 4date: 2021-10-07
5thumbnail: png 5thumbnail: png
6--- 6layout: exhibit
7 7
8::: figure 8images:
9![](ava.png) 9 - ava.png
10::: 10---
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
3title: Spooky Avatar 3title: Spooky Avatar
4date: 2021-10-14 4date: 2021-10-14
5thumbnail: png 5thumbnail: png
6--- 6layout: exhibit
7 7
8::: figure 8images:
9![](ava.png) 9 - ava.png
10::: 10---
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
3title: Autumn Fox 3title: Autumn Fox
4date: 2022-02-25 4date: 2022-02-25
5thumbnail: png 5thumbnail: png
6layout: exhibit
7
8images:
9 - pic.png
6--- 10---
7 11
8First attempt at cel shading. 12First attempt at cel shading.
9It's actually incomplete, but I felt like I had hit a roadblock with the shading and wanted to try again with another drawing. 13It's actually incomplete, but I felt like I had hit a roadblock with the shading and wanted to try again with another drawing.
10
11::: figure
12![](pic.png)
13:::
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 @@
1(() => {
2 const mainEl = document.querySelector("main");
3 const lightboxContainerEl = document.querySelector(".js-lightbox");
4 const lightboxEl = lightboxContainerEl.querySelector(".o-lightbox");
5 const lightboxCloseEl = lightboxEl.querySelector(".o-lightbox__close-btn");
6 const lightboxPrevEl = lightboxEl.querySelector(".o-lightbox__prev-btn");
7 const lightboxNextEl = lightboxEl.querySelector(".o-lightbox__next-btn");
8 const lightboxImgEl = lightboxEl.querySelector(".o-lightbox__img");
9 const lightboxFooterEl = lightboxEl.querySelector(".o-lightbox__footer");
10 const figureEls = Array.from(mainEl.querySelectorAll(".js-lightbox__image"));
11
12 const closeable = lightboxContainerEl.classList.contains("js-lightbox--closeable");
13 let currentIndex = 0;
14 let visible = !lightboxContainerEl.classList.contains("u-d-none");
15 let mouseDown = false;
16
17 const show = () => {
18 visible = true;
19 lightboxContainerEl.classList.remove("u-d-none");
20 }
21
22 const hide = () => {
23 if (closeable) {
24 visible = false;
25 lightboxContainerEl.classList.add("u-d-none");
26 }
27 }
28
29 const setIndex = (i) => {
30 if (i < 0 || i >= thumbnailEls.length) {
31 return;
32 }
33 thumbnailEls[currentIndex].classList.remove("is-selected");
34 currentIndex = i;
35 lightboxImgEl.src = figureEls[i].firstElementChild.href;
36 thumbnailEls[i].classList.add("is-selected");
37 };
38
39 const prev = () => {
40 setIndex(currentIndex > 0 ? currentIndex - 1 : figureEls.length - 1);
41 };
42
43 const next = () => {
44 setIndex(currentIndex < figureEls.length - 1 ? currentIndex + 1 : 0);
45 };
46
47 lightboxCloseEl?.addEventListener("click", hide);
48 lightboxPrevEl.addEventListener("click", prev);
49 lightboxNextEl.addEventListener("click", next);
50
51 const thumbnailEls = figureEls.map((figureEl, i) => {
52 const go = e => {
53 e.preventDefault();
54 show();
55 setIndex(i);
56 };
57
58 let anchorEl;
59 let imgEl;
60
61 if (figureEl.firstElementChild.tagName === "A") {
62 anchorEl = figureEl.firstElementChild;
63 imgEl = anchorEl.firstElementChild;
64 } else {
65 imgEl = figureEl.firstElementChild;
66 anchorEl = document.createElement("a");
67 anchorEl.href = imgEl.src;
68
69 figureEl.insertBefore(anchorEl, imgEl);
70 figureEl.removeChild(imgEl);
71 anchorEl.appendChild(imgEl);
72 }
73
74 anchorEl.addEventListener("click", go);
75
76 const thumbnailButtonEl = document.createElement("button");
77 const thumbnailImgEl = document.createElement("img");
78
79 thumbnailImgEl.classList.add("o-lightbox__thumbnail-img");
80 thumbnailImgEl.src = anchorEl.href;
81
82 thumbnailButtonEl.classList.add("o-lightbox__thumbnail");
83 thumbnailButtonEl.appendChild(thumbnailImgEl);
84 thumbnailButtonEl.addEventListener("click", go);
85
86 if (i === currentIndex) {
87 thumbnailButtonEl.classList.add("is-selected");
88 }
89
90 lightboxFooterEl.appendChild(thumbnailButtonEl);
91
92 return thumbnailButtonEl;
93 });
94
95 setIndex(0);
96
97 if (closeable) {
98 document.addEventListener('mousedown', (e) => {
99 if (visible) {
100 mouseDown = !lightboxEl.contains(e.target) || lightboxEl === e.target;
101 }
102 });
103
104 document.addEventListener('click', (e) => {
105 if (visible && mouseDown) {
106 mouseDown = false;
107 e.preventDefault();
108 e.stopPropagation();
109 hide();
110 }
111 }, { capture: true });
112 }
113
114 window.addEventListener("keydown", e => {
115 if (e.defaultPrevented || !visible) {
116 return;
117 }
118
119 switch (e.key) {
120 case "Left":
121 case "ArrowLeft":
122 prev();
123 break;
124
125 case "Right":
126 case "ArrowRight":
127 next();
128 break;
129
130 case "Esc":
131 case "Escape":
132 hide();
133 break;
134
135 default:
136 return;
137 }
138
139 e.preventDefault();
140 }, true);
141})();
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 @@
1(() => { 1(() => {
2 document.body.classList.remove('t-no-js');
3 document.body.classList.add('t-js');
4
2 const enableFocusIndicator = e => { 5 const enableFocusIndicator = e => {
3 if (e.key !== 'Tab') { 6 if (e.key !== 'Tab') {
4 return; 7 return;
@@ -18,135 +21,3 @@
18 21
19 document.addEventListener('keydown', enableFocusIndicator); 22 document.addEventListener('keydown', enableFocusIndicator);
20})(); 23})();
21
22(() => {
23 let currentIndex = 0;
24 let visible = false;
25 let mouseDown = false;
26
27 const mainEl = document.querySelector("main");
28 const lightboxContainerEl = document.querySelector(".js-lightbox");
29 const lightboxEl = lightboxContainerEl.querySelector(".o-lightbox");
30 const lightboxCloseEl = lightboxEl.querySelector(".o-lightbox__close-btn");
31 const lightboxPrevEl = lightboxEl.querySelector(".o-lightbox__prev-btn");
32 const lightboxNextEl = lightboxEl.querySelector(".o-lightbox__next-btn");
33 const lightboxImgEl = lightboxEl.querySelector(".o-lightbox__img");
34 const lightboxFooterEl = lightboxEl.querySelector(".o-lightbox__footer");
35 const figureEls = Array.from(mainEl.querySelectorAll("figure"));
36
37 const show = () => {
38 visible = true;
39 lightboxContainerEl.classList.remove("u-d-none");
40 }
41
42 const hide = () => {
43 visible = false;
44 lightboxContainerEl.classList.add("u-d-none");
45 }
46
47 const setIndex = (i) => {
48 thumbnailEls[currentIndex].classList.remove("is-selected");
49 currentIndex = i;
50 lightboxImgEl.src = figureEls[i].firstElementChild.href;
51 thumbnailEls[i].classList.add("is-selected");
52 };
53
54 const prev = () => {
55 setIndex(currentIndex > 0 ? currentIndex - 1 : figureEls.length - 1);
56 };
57
58 const next = () => {
59 setIndex(currentIndex < figureEls.length - 1 ? currentIndex + 1 : 0);
60 };
61
62 lightboxCloseEl.addEventListener("click", hide);
63 lightboxPrevEl.addEventListener("click", prev);
64 lightboxNextEl.addEventListener("click", next);
65
66 const thumbnailEls = figureEls.map((figureEl, i) => {
67 const go = e => {
68 e.preventDefault();
69 show();
70 setIndex(i);
71 };
72
73 let anchorEl;
74 let imgEl;
75
76 if (figureEl.firstElementChild.tagName === "A") {
77 anchorEl = figureEl.firstElementChild;
78 imgEl = anchorEl.firstElementChild;
79 } else {
80 imgEl = figureEl.firstElementChild;
81 anchorEl = document.createElement("a");
82 anchorEl.href = imgEl.src;
83
84 figureEl.insertBefore(anchorEl, imgEl);
85 figureEl.removeChild(imgEl);
86 anchorEl.appendChild(imgEl);
87 }
88
89 anchorEl.addEventListener("click", go);
90
91 const thumbnailButtonEl = document.createElement("button");
92 const thumbnailImgEl = document.createElement("img");
93
94 thumbnailImgEl.classList.add("o-lightbox__thumbnail-img");
95 thumbnailImgEl.src = anchorEl.href;
96
97 thumbnailButtonEl.classList.add("o-lightbox__thumbnail");
98 thumbnailButtonEl.appendChild(thumbnailImgEl);
99 thumbnailButtonEl.addEventListener("click", go);
100
101 if (i === currentIndex) {
102 thumbnailButtonEl.classList.add("is-selected");
103 }
104
105 lightboxFooterEl.appendChild(thumbnailButtonEl);
106
107 return thumbnailButtonEl;
108 });
109
110 document.addEventListener('mousedown', (e) => {
111 if (visible) {
112 mouseDown = !lightboxEl.contains(e.target) || lightboxEl === e.target;
113 }
114 });
115
116 document.addEventListener('click', (e) => {
117 if (visible && mouseDown) {
118 mouseDown = false;
119 e.preventDefault();
120 e.stopPropagation();
121 hide();
122 }
123 }, { capture: true });
124
125 window.addEventListener("keydown", e => {
126 if (e.defaultPrevented || !visible) {
127 return;
128 }
129
130 switch (e.key) {
131 case "Left":
132 case "ArrowLeft":
133 prev();
134 break;
135
136 case "Right":
137 case "ArrowRight":
138 next();
139 break;
140
141 case "Esc":
142 case "Escape":
143 hide();
144 break;
145
146 default:
147 return;
148 }
149
150 e.preventDefault();
151 }, true);
152})();
diff --git a/filters/macros.lua b/filters/macros.lua
index df08676..cb7975b 100644
--- a/filters/macros.lua
+++ b/filters/macros.lua
@@ -23,7 +23,7 @@ function figure(el)
23 pandoc.walk_block(el, { Image = function(iel) images:insert(iel) end }) 23 pandoc.walk_block(el, { Image = function(iel) images:insert(iel) end })
24 24
25 el = pandoc.RawBlock("html", 25 el = pandoc.RawBlock("html",
26 "<figure class=\"c-figure\">\ 26 "<figure class=\"c-figure js-lightbox__image\">\
27 <a class=\"c-figure__link\" href=\"" .. images[1].src .. "\">\ 27 <a class=\"c-figure__link\" href=\"" .. images[1].src .. "\">\
28 <img class=\"c-figure__image\" src=\"" .. images[1].src .. "\" title=\"" .. images[1].title .. "\" />\ 28 <img class=\"c-figure__image\" src=\"" .. images[1].src .. "\" title=\"" .. images[1].title .. "\" />\
29 </a>\ 29 </a>\
diff --git a/templates/base.html b/templates/base.html
index cfc40a4..4ffd690 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -52,7 +52,7 @@
52 <link rel="stylesheet" href="/style.css?$style_hash$" /> 52 <link rel="stylesheet" href="/style.css?$style_hash$" />
53</head> 53</head>
54 54
55<body itemscope itemtype="https://schema.org/WebPage"> 55<body itemscope itemtype="https://schema.org/WebPage" class="t-no-js">
56 <nav class="c-header" label="Mainmenu"> 56 <nav class="c-header" label="Mainmenu">
57 <a class="c-header__item c-header__item--icon" href="/" title="$site.title$" itemprop="isPartOf" itemscope itemtype="https://schema.org/WebSite" itemid="$site.url$"> 57 <a class="c-header__item c-header__item--icon" href="/" title="$site.title$" itemprop="isPartOf" itemscope itemtype="https://schema.org/WebSite" itemid="$site.url$">
58 <svg class="c-header__icon" width="1em" height="1em" aria-label="Logo"> 58 <svg class="c-header__icon" width="1em" height="1em" aria-label="Logo">
@@ -74,6 +74,8 @@ ${layouts/categorized_list()}
74${layouts/list()} 74${layouts/list()}
75 $elseif(layout.is_redirect)$ 75 $elseif(layout.is_redirect)$
76${layouts/redirect()} 76${layouts/redirect()}
77 $elseif(layout.is_exhibit)$
78${layouts/exhibit()}
77 $else$ 79 $else$
78${layouts/page()} 80${layouts/page()}
79 $endif$ 81 $endif$
@@ -85,32 +87,6 @@ ${layouts/page()}
85 </div> 87 </div>
86 </footer> 88 </footer>
87 89
88 <div class="o-backdrop js-lightbox u-d-none t-dark">
89 <div class="o-lightbox">
90 <button class="o-lightbox__close-btn o-action-button o-action-button--quiet o-action-button--round">
91 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
92 <use href="/icons.svg#x"></use>
93 </svg>
94 </button>
95
96 <img class="o-lightbox__img" />
97
98 <button class="o-lightbox__prev-btn o-action-button o-action-button--quiet o-action-button--round">
99 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
100 <use href="/icons.svg#chevron-left"></use>
101 </svg>
102 </button>
103
104 <button class="o-lightbox__next-btn o-action-button o-action-button--quiet o-action-button--round">
105 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
106 <use href="/icons.svg#chevron-right"></use>
107 </svg>
108 </button>
109
110 <footer class="o-lightbox__footer"></footer>
111 </div>
112 </div>
113
114 <script src="/main.js"></script> 90 <script src="/main.js"></script>
115 <!--script src="/snow.js"></script--> 91 <!--script src="/snow.js"></script-->
116</body> 92</body>
diff --git a/templates/feed_entry.xml b/templates/feed_entry.xml
index 03d6569..a71b579 100644
--- a/templates/feed_entry.xml
+++ b/templates/feed_entry.xml
@@ -22,4 +22,14 @@ $else$
22 </author> 22 </author>
23 $endfor$ 23 $endfor$
24$endif$ 24$endif$
25<content type="html"><![CDATA[$it.content$]]></content> 25<content type="html"><![CDATA[
26 $it.content$
27
28 $if(it.layout.is_exhibit)$
29 $for(it.images)$
30 <figure>
31 <img src="$it$" />
32 </figure>
33 $endfor$
34 $endif$
35]]></content>
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 206c566..1a1048a 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -1,5 +1,5 @@
1<main 1<main
2 class="l-container l-container--pad-x l-container--pad-y l-container--narrow-125 h-feed" 2 class="c-main l-container l-container--pad-x l-container--pad-y l-container--narrow-125 h-feed"
3 itemprop="mainPart" 3 itemprop="mainPart"
4 itemscope 4 itemscope
5 itemtype="https://schema.org/DataFeed" 5 itemtype="https://schema.org/DataFeed"
diff --git a/templates/layouts/exhibit.html b/templates/layouts/exhibit.html
new file mode 100644
index 0000000..091859a
--- /dev/null
+++ b/templates/layouts/exhibit.html
@@ -0,0 +1,66 @@
1<main
2 itemprop="hasPart"
3 itemscope
4 itemtype="https://schema.org/$schema_type$"
5 itemid="$url.full$"
6>
7 <article class="h-entry">
8 <section class="c-exhibit js-lightbox">
9 <div class="c-exhibit__content o-lightbox">
10 <img class="o-lightbox__img" />
11
12 <button class="o-lightbox__prev-btn o-action-button o-action-button--quiet o-action-button--round">
13 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
14 <use href="/icons.svg#chevron-left"></use>
15 </svg>
16 </button>
17
18 <button class="o-lightbox__next-btn o-action-button o-action-button--quiet o-action-button--round">
19 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
20 <use href="/icons.svg#chevron-right"></use>
21 </svg>
22 </button>
23
24 <footer class="o-lightbox__footer"></footer>
25 </div>
26
27 <footer class="c-exhibit__footer">
28 <div class="l-container l-container--pad-x l-container--narrow-125">
29 <div class="l-media l-media--200 u-pl-0 u-pr-0">
30 <div class="l-media__block l-media__block--main">
31 $if(date)$
32 <small class="u-d-block u-d-none@sm-hi">
33 <time datetime="$date.yyyy_mm_dd$" class="dt-updated" itemprop="dateCreated">
34 $date.short$
35 </time>
36 </small>
37 $endif$
38 <strong class="u-d-block u-elp" itemprop="name headline">$title$</strong>
39 </div>
40 $if(date)$
41 <small class="l-media__block u-d-none@sm-lo">
42 <time datetime="$date.yyyy_mm_dd$" itemprop="dateCreated">
43 $date.short$
44 </time>
45 </small>
46 $endif$
47 </div>
48 </div>
49 </footer>
50 </section>
51
52 <div class="l-container l-container--pad-x l-container--pad-y l-container--narrow-125 u-pt-400">
53 <div class="s-body s-colored-links s-headings s-blockquotes s-code s-lists s-tables s-alerts e-content" itemprop="articleBody">
54$body$
55
56 $for(images)$
57 <figure class="c-figure js-lightbox__image u-d-none@js">
58 <img src="$it$" />
59 </figure>
60 $endfor$
61 </div>
62 </div>
63 </article>
64</main>
65
66<script src="/lightbox.js"></script>
diff --git a/templates/layouts/list.html b/templates/layouts/list.html
index 66a08fd..508ff4c 100644
--- a/templates/layouts/list.html
+++ b/templates/layouts/list.html
@@ -1,5 +1,5 @@
1<main 1<main
2 class="l-container l-container--pad-x l-container--pad-y l-container--narrow-125 h-feed" 2 class="c-main l-container l-container--pad-x l-container--pad-y l-container--narrow-125 h-feed"
3 itemprop="mainPart" 3 itemprop="mainPart"
4 itemscope 4 itemscope
5 itemtype="https://schema.org/DataFeed" 5 itemtype="https://schema.org/DataFeed"
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index f65a1cf..4058748 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,5 +1,5 @@
1<main 1<main
2 class="l-container l-container--pad-x l-container--pad-y l-container--narrow-125" 2 class="c-main l-container l-container--pad-x l-container--pad-y l-container--narrow-125"
3 itemprop="hasPart" 3 itemprop="hasPart"
4 itemscope 4 itemscope
5 itemtype="https://schema.org/$schema_type$" 5 itemtype="https://schema.org/$schema_type$"
@@ -7,9 +7,9 @@
7> 7>
8 <article class="h-entry"> 8 <article class="h-entry">
9 $if(date)$ 9 $if(date)$
10 <div class="o-badge s-body__meta u-mb-125 dt-updated"> 10 <time datetime="$date.yyyy_mm_dd$" class="o-badge s-body__meta u-mb-125 dt-updated" itemprop="dateCreated">
11 $date.long$ 11 $date.long$
12 </div> 12 </time>
13 $endif$ 13 $endif$
14 14
15 <h1 class="o-heading o-heading--xxl u-mt-0 p-name" itemprop="name headline"> 15 <h1 class="o-heading o-heading--xxl u-mt-0 p-name" itemprop="name headline">
@@ -35,4 +35,32 @@ $body$
35 </footer> 35 </footer>
36 $endif$ 36 $endif$
37 </article> 37 </article>
38
39 <div class="o-backdrop js-lightbox js-lightbox--closeable u-d-none t-dark">
40 <div class="o-lightbox">
41 <button class="o-lightbox__close-btn o-action-button o-action-button--quiet o-action-button--round">
42 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
43 <use href="/icons.svg#x"></use>
44 </svg>
45 </button>
46
47 <img class="o-lightbox__img" />
48
49 <button class="o-lightbox__prev-btn o-action-button o-action-button--quiet o-action-button--round">
50 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
51 <use href="/icons.svg#chevron-left"></use>
52 </svg>
53 </button>
54
55 <button class="o-lightbox__next-btn o-action-button o-action-button--quiet o-action-button--round">
56 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
57 <use href="/icons.svg#chevron-right"></use>
58 </svg>
59 </button>
60
61 <footer class="o-lightbox__footer"></footer>
62 </div>
63 </div>
38</main> 64</main>
65
66<script src="/lightbox.js"></script>
diff --git a/templates/layouts/redirect.html b/templates/layouts/redirect.html
index 9f78dec..6684bd2 100644
--- a/templates/layouts/redirect.html
+++ b/templates/layouts/redirect.html
@@ -1,4 +1,4 @@
1<article class="l-container l-container--pad-x l-container--pad-y l-container--narrow s-body s-colored-links s-headlines"> 1<main class="c-main l-container l-container--pad-x l-container--pad-y l-container--narrow s-body s-colored-links s-headlines">
2 <h1 class="u-mt-0"><span class="s-headlines__title-inner">$title$</span></h1> 2 <h1 class="u-mt-0"><span class="s-headlines__title-inner">$title$</span></h1>
3 <p>This page should redirect you to <a href="$url.full$">$url.full$</a> in 3 seconds.</p> 3 <p>This page should redirect you to <a href="$url.full$">$url.full$</a> in 3 seconds.</p>
4</article> 4</main>
diff --git a/templates/partials/gallery_card.html b/templates/partials/gallery_card.html
index deffb3f..6692888 100644
--- a/templates/partials/gallery_card.html
+++ b/templates/partials/gallery_card.html
@@ -37,11 +37,11 @@ $if(it.thumbnail)$
37 <small class="u-d-block u-elp">$it.category$</small> 37 <small class="u-d-block u-elp">$it.category$</small>
38 <strong class="u-d-block u-elp">$it.title$</strong> 38 <strong class="u-d-block u-elp">$it.title$</strong>
39 $elseif(it.date)$ 39 $elseif(it.date)$
40 <time datetime="$it.date.yyyy_mm_dd$" itemprop="dateCreated"> 40 <small class="u-d-block">
41 <small> 41 <time datetime="$it.date.yyyy_mm_dd$" itemprop="dateCreated">
42 $it.date.long$ 42 $it.date.long$
43 </small> 43 </time>
44 </time> 44 </small>
45 <strong class="u-d-block u-elp">$it.title$</strong> 45 <strong class="u-d-block u-elp">$it.title$</strong>
46 $else$ 46 $else$
47 <span class="p-name" itemprop="name headline"> 47 <span class="p-name" itemprop="name headline">
diff --git a/templates/partials/grid_card.html b/templates/partials/grid_card.html
index 9af9415..003e59f 100644
--- a/templates/partials/grid_card.html
+++ b/templates/partials/grid_card.html
@@ -24,11 +24,11 @@ $if(it.url)$
24 <small class="u-d-block u-elp">$it.category$</small> 24 <small class="u-d-block u-elp">$it.category$</small>
25 <strong class="u-d-block u-elp">$it.title$</strong> 25 <strong class="u-d-block u-elp">$it.title$</strong>
26 $elseif(it.date)$ 26 $elseif(it.date)$
27 <time datetime="$it.date.yyyy_mm_dd$" itemprop="dateCreated"> 27 <small class="u-d-block">
28 <small> 28 <time datetime="$it.date.yyyy_mm_dd$" itemprop="dateCreated">
29 $it.date.long$ 29 $it.date.long$
30 </small> 30 </time>
31 </time> 31 </small>
32 <strong class="u-d-block u-elp">$it.title$</strong> 32 <strong class="u-d-block u-elp">$it.title$</strong>
33 $else$ 33 $else$
34 <span class="p-name" itemprop="name headline"> 34 <span class="p-name" itemprop="name headline">
diff --git a/templates/partials/list_card.html b/templates/partials/list_card.html
index 6cf0e67..dc9111e 100644
--- a/templates/partials/list_card.html
+++ b/templates/partials/list_card.html
@@ -24,7 +24,9 @@ $if(it.url)$
24 <small class="u-d-block">$it.category$</small> 24 <small class="u-d-block">$it.category$</small>
25 <strong class="u-d-block">$it.title$</strong> 25 <strong class="u-d-block">$it.title$</strong>
26 $elseif(it.date)$ 26 $elseif(it.date)$
27 <time datetime="$it.date.yyyy_mm_dd$" class="u-d-block"><small>$it.date.long$</small></time> 27 <small>
28 <time datetime="$it.date.yyyy_mm_dd$">$it.date.long$</time>
29 </small>
28 <strong class="u-d-block">$it.title$</strong> 30 <strong class="u-d-block">$it.title$</strong>
29 $else$ 31 $else$
30 <span class="p-name" itemprop="name headline"> 32 <span class="p-name" itemprop="name headline">
@@ -44,11 +46,11 @@ $if(it.url)$
44 $it.category$ 46 $it.category$
45 </small> 47 </small>
46 $elseif(it.date)$ 48 $elseif(it.date)$
47 <time datetime="$it.date.yyyy_mm_dd$" class="l-media__block u-d-none@sm-lo" itemprop="dateCreated"> 49 <small class="l-media__block u-d-none@sm-lo">
48 <small> 50 <time datetime="$it.date.yyyy_mm_dd$" itemprop="dateCreated">
49 $it.date.short$ 51 $it.date.short$
50 </small> 52 </time>
51 </time> 53 </small>
52 $endif$ 54 $endif$
53 $if(it.post_icon)$ 55 $if(it.post_icon)$
54 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true"> 56 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
diff --git a/yarn.lock b/yarn.lock
index d30d7dc..655697b 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#7cf8a77dd78df22376aa60e25d77029394276cf8" 1283 resolved "git+https://git.vulpes.one/git/iro-design.git#a3296360acb08cf19d358aa140f8d3c4d054b169"
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"
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-24 17:43:38 +0000