summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-12-29 19:16:35 +0100
committerVolpeon <git@volpeon.ink>2021-12-29 19:16:35 +0100
commitbcee1a0f4615d90bd714adf8bea79baffe006579 (patch)
tree2cd6b6cd74a47420a4b4a5b0eedb5ae185d91a05
parentInitial gallery macro (diff)
downloadvolpeon.ink-bcee1a0f4615d90bd714adf8bea79baffe006579.tar.gz
volpeon.ink-bcee1a0f4615d90bd714adf8bea79baffe006579.tar.bz2
volpeon.ink-bcee1a0f4615d90bd714adf8bea79baffe006579.zip
Added lightbox
Diffstat
-rw-r--r--assets/css/_basics.scss16
-rw-r--r--assets/css/components/_gallery.scss25
-rw-r--r--assets/css/components/_lightbox.scss93
-rw-r--r--assets/css/objects/_icon.scss4
-rw-r--r--assets/css/style.scss2
-rw-r--r--content/lightbox.js41
-rw-r--r--content/projects/doodles/2021-lazy-firefox/index.md4
-rw-r--r--content/projects/drawings/2021-cute-ava/index.md2
-rw-r--r--content/projects/drawings/2021-eeveelutions/index.md6
-rw-r--r--content/projects/drawings/2021-lycanroc-ava/index.md2
-rw-r--r--content/projects/drawings/2021-refsheet/index.md8
-rw-r--r--content/projects/drawings/2021-spooky-ava-1/index.md2
-rw-r--r--content/projects/drawings/2021-spooky-ava-2/index.md2
-rw-r--r--content/projects/drawings/2022-ava-shading/index.md2
-rw-r--r--content/projects/emojis/blobfox/index.md2
-rw-r--r--content/projects/emojis/bunhd/index.md2
-rw-r--r--content/projects/emojis/vlpn/index.md2
-rw-r--r--content/script.js28
-rw-r--r--content/snow.js30
-rw-r--r--content/symbols.svg12
-rw-r--r--filters/macros.lua31
-rw-r--r--templates/base.html27
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 {
169 margin: ($line-height * 1rem) 0 0; 169 margin: ($line-height * 1rem) 0 0;
170} 170}
171 171
172figure {
173 display: flex;
174 flex-direction: column;
175 align-items: center;
176 margin: ($line-height * 1rem) 0 0;
177 padding: 0;
178 background-color: prop(--colors --bg-hi);
179
180 img {
181 display: block;
182 max-width: 100%;
183 max-height: 70vh;
184 object-fit: contain;
185 }
186}
187
172:link, 188:link,
173:visited { 189:visited {
174 color: prop(--colors --link --default); 190 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 @@
1@include namespace('gallery') {
2 @include store((
3 --dims: (
4 --col-width: 17em
5 )
6 ));
7
8 @include component(namespace()) {
9 margin-top: $line-height * 1rem;
10
11 @include element('items') {
12 display: grid;
13 grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
14 gap: 20px;
15 }
16
17 @include element('item') {
18 display: block;
19 }
20
21 @include element('img') {
22 display: block;
23 }
24 }
25}
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 @@
1@include namespace('lightbox') {
2 @include store((
3 --colors: (
4 --bg: prop(--colors --bg-hi, $global: true),
5 --button: (
6 --idle: prop(--colors --fg-hi, $global: true),
7 --hover: prop(--colors --fg-lo, $global: true),
8 )
9 ),
10 --dims: (
11 --col-width: 17em
12 )
13 ));
14
15 @include component(namespace()) {
16 display: flex;
17 visibility: hidden;
18 position: fixed;
19 z-index: 5000;
20 top: 0;
21 left: 0;
22 box-sizing: border-box;
23 align-items: center;
24 justify-content: center;
25 width: 100%;
26 height: 100%;
27 padding: 2em calc(3em + 1rem);
28 transition: opacity .2s, visibility .2s;
29 opacity: 0;
30
31 @include element('bg') {
32 position: absolute;
33 z-index: -10;
34 top: 0;
35 left: 0;
36 width: 100%;
37 height: 100%;
38 opacity: .95;
39 background-color: prop(--colors --bg);
40 }
41
42 @include is('shown') {
43 visibility: visible;
44 transition: opacity .2s, visibility 0 .2s;
45 opacity: 1;
46 }
47
48 @include element('img') {
49 max-width: 100%;
50 max-height: 100%;
51 }
52
53 @include element('close', 'prev', 'next') {
54 margin: 0;
55 transition: color .2s;
56 border: 0;
57 background-color: transparent;
58 color: currentColor;
59
60 &:hover {
61 color: prop(--colors --button --hover);
62 }
63 }
64
65 @include element('close') {
66 position: absolute;
67 top: 0;
68 right: 0;
69 padding: 1rem;
70 font-size: 1.5em;
71 }
72
73 @include element('prev', 'next') {
74 position: absolute;
75 top: 50%;
76 padding: .5rem;
77 transform: translate(0, -50%);
78 font-size: 3em;
79
80 > * {
81 stroke-width: .75px;
82 }
83 }
84
85 @include element('prev') {
86 left: 0;
87 }
88
89 @include element('next') {
90 right: 0;
91 }
92 }
93}
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 @@
7 7
8 @include object(namespace()) { 8 @include object(namespace()) {
9 display: block; 9 display: block;
10 width: iro-px-to-rem(16px); 10 width: 1em;
11 height: iro-px-to-rem(16px); 11 height: 1em;
12 stroke-width: 1.5px; 12 stroke-width: 1.5px;
13 stroke-linecap: round; 13 stroke-linecap: round;
14 stroke-linejoin: round; 14 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 @@
17@import 'components/footer'; 17@import 'components/footer';
18@import 'components/card'; 18@import 'components/card';
19@import 'components/note'; 19@import 'components/note';
20@import 'components/gallery'; 20@import 'components/lightbox';
21 21
22@import 'layouts/card-list'; 22@import 'layouts/card-list';
23 23
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 @@
1(() => {
2 let currentIndex = 0;
3 const mainEl = document.querySelector("main");
4 const lightboxEl = document.querySelector(".c-lightbox");
5 const lightboxBgEl = document.querySelector(".c-lightbox__bg");
6 const lightboxCloseEl = document.querySelector(".c-lightbox__close");
7 const lightboxPrevEl = document.querySelector(".c-lightbox__prev");
8 const lightboxNextEl = document.querySelector(".c-lightbox__next");
9 const lightboxImgEl = document.querySelector(".c-lightbox__img");
10 const figureEls = Array.from(mainEl.querySelectorAll("figure")).map(el => el.querySelector("a"));
11
12 const show = () => {
13 lightboxEl.classList.add("is-shown");
14 }
15
16 const hide = () => {
17 lightboxEl.classList.remove("is-shown");
18 }
19
20 const setIndex = (i) => {
21 currentIndex = i;
22 lightboxImgEl.src = figureEls[i].href;
23 };
24
25 lightboxBgEl.addEventListener("click", hide);
26 lightboxCloseEl.addEventListener("click", hide);
27 lightboxPrevEl.addEventListener("click", () => {
28 setIndex(currentIndex === 0 ? figureEls.length - 1 : currentIndex - 1);
29 });
30 lightboxNextEl.addEventListener("click", () => {
31 setIndex(currentIndex === figureEls.length - 1 ? 0 : currentIndex + 1);
32 });
33
34 figureEls.forEach((figureEl, i) => {
35 figureEl.addEventListener("click", e => {
36 e.preventDefault();
37 show();
38 setIndex(i);
39 })
40 });
41})();
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
4thumbnail: png 4thumbnail: png
5--- 5---
6 6
7::: figure
7![](firefox_lazy.png) 8![](firefox_lazy.png)
9:::
8 10
11::: figure
9![](firefox_lazy_transparent.png) 12![](firefox_lazy_transparent.png)
13:::
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
4thumbnail: png 4thumbnail: png
5--- 5---
6 6
7::: figure
7![](ava.png) 8![](ava.png)
9:::
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
4thumbnail: png 4thumbnail: png
5--- 5---
6 6
7::: figure
7![](eevee.png) 8![](eevee.png)
9:::
8 10
11::: figure
9![](flareon.png) 12![](flareon.png)
13:::
10 14
15::: figure
11![](flareon_wink.png) 16![](flareon_wink.png)
17:::
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
4thumbnail: png 4thumbnail: png
5--- 5---
6 6
7::: figure
7![](ava.png) 8![](ava.png)
9:::
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
4thumbnail: png 4thumbnail: png
5--- 5---
6 6
7::: gallery 7::: figure
8![](bottom.png) 8![](bottom.png)
9:::
10
11::: figure
9![](bottom_cofe.png) 12![](bottom_cofe.png)
13:::
14
15::: figure
10![](side.png) 16![](side.png)
11::: 17:::
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
4thumbnail: png 4thumbnail: png
5--- 5---
6 6
7::: figure
7![](ava.png) 8![](ava.png)
9:::
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
4thumbnail: png 4thumbnail: png
5--- 5---
6 6
7::: figure
7![](ava.png) 8![](ava.png)
9:::
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
5unlisted: true 5unlisted: true
6--- 6---
7 7
8::: figure
8![](pic.png) 9![](pic.png)
10:::
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
4thumbnail: jpg 4thumbnail: jpg
5--- 5---
6 6
7::: figure
7![](screenshot.png) 8![](screenshot.png)
9:::
8 10
9**Latest release:** v1.6 (%last_update.yyyy_mm_dd%) 11**Latest release:** v1.6 (%last_update.yyyy_mm_dd%)
10**Download:** [regular version](blobfox.zip), [flipped version](blobfox_flip.zip) 12**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
4thumbnail: png 4thumbnail: png
5--- 5---
6 6
7::: figure
7![](screenshot.png) 8![](screenshot.png)
9:::
8 10
9**Latest release:** v1.2.1 (%last_update.yyyy_mm_dd%) 11**Latest release:** v1.2.1 (%last_update.yyyy_mm_dd%)
10**Download:** [regular version](bunhd.zip), [flipped version](bunhd_flip.zip) 12**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
4thumbnail: png 4thumbnail: png
5--- 5---
6 6
7::: figure
7![](preview.png) 8![](preview.png)
9:::
8 10
9**Latest release:** v1.1 (%last_update.yyyy_mm_dd%) 11**Latest release:** v1.1 (%last_update.yyyy_mm_dd%)
10**[Download](vlpn.zip)** 12**[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 @@
1function createSnowFlake() {
2 setTimeout(() => createSnowFlake(), 50 / Math.log10(window.innerWidth / 1000 + 1));
3
4 if (document.hidden) {
5 return;
6 }
7
8 const snowFlake = document.createElementNS("http://www.w3.org/2000/svg", "svg");
9 const snowFlakeInner = document.createElementNS("http://www.w3.org/2000/svg", "use");
10 const aniDuration = (Math.random() * 3 + 2) * 1000;
11
12 snowFlakeInner.setAttribute("href", "/symbols.svg#icon-asterisk");
13
14 snowFlake.classList.add("o-icon", "o-icon--snow");
15 snowFlake.setAttribute("aria-hidden", "true");
16
17 snowFlake.style.fontSize = Math.random() * 0.5 + 0.7 + 'em';
18 snowFlake.style.left = Math.random() * 100 + '%';
19 snowFlake.style.animationDuration = aniDuration + 'ms';
20 snowFlake.style.opacity = Math.random();
21
22 setTimeout(() => snowFlake.remove(), aniDuration);
23
24 snowFlake.appendChild(snowFlakeInner);
25 document.body.appendChild(snowFlake);
26}
27
28createSnowFlake();
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 @@
1(() => {
2 function createSnowFlake() {
3 setTimeout(() => createSnowFlake(), 50 / Math.log10(window.innerWidth / 1000 + 1));
4
5 if (document.hidden) {
6 return;
7 }
8
9 const snowFlake = document.createElementNS("http://www.w3.org/2000/svg", "svg");
10 const snowFlakeInner = document.createElementNS("http://www.w3.org/2000/svg", "use");
11 const aniDuration = (Math.random() * 3 + 2) * 1000;
12
13 snowFlakeInner.setAttribute("href", "/symbols.svg#icon-asterisk");
14
15 snowFlake.classList.add("o-icon", "o-icon--snow");
16 snowFlake.setAttribute("aria-hidden", "true");
17
18 snowFlake.style.fontSize = Math.random() * 0.5 + 0.7 + 'em';
19 snowFlake.style.left = Math.random() * 100 + '%';
20 snowFlake.style.animationDuration = aniDuration + 'ms';
21 snowFlake.style.opacity = Math.random();
22
23 setTimeout(() => snowFlake.remove(), aniDuration);
24
25 snowFlake.appendChild(snowFlakeInner);
26 document.body.appendChild(snowFlake);
27 }
28
29 createSnowFlake();
30})();
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 @@
85 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" 85 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"
86 fill="none" stroke="currentColor" /> 86 fill="none" stroke="currentColor" />
87 </symbol> 87 </symbol>
88
89 <symbol id="icon-x" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
90 <path d="m4 4 8 8m-8 0 8-8" fill="none" stroke="currentColor" />
91 </symbol>
92
93 <symbol id="icon-chevron-left" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
94 <path d="M 10.25,12.25 6,8 10.25,3.75" fill="none" stroke="currentColor" />
95 </symbol>
96
97 <symbol id="icon-chevron-right" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
98 <path d="m5.75 12.25 4.25-4.25-4.25-4.25" fill="none" stroke="currentColor" />
99 </symbol>
88 </defs> 100 </defs>
89</svg> 101</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)
4 return el 4 return el
5end 5end
6 6
7function gallery(el) 7function figure(el)
8 el.classes = pandoc.List() 8 local images = pandoc.List()
9 el.classes:insert("c-gallery")
10
11 local cur = pandoc.Div(pandoc.List(), { class = "c-gallery__current" })
12 local imageList = pandoc.Div(pandoc.List(), { class = "c-gallery__items" })
13
14 pandoc.walk_block(el, {
15 Image = function(iel)
16 iel.classes = pandoc.List()
17 iel.classes:insert("c-gallery__img")
18 9
19 local lel = pandoc.Link(iel, iel.src) 10 pandoc.walk_block(el, { Image = function(iel) images:insert(iel) end })
20 lel.classes = pandoc.List()
21 lel.classes:insert("c-gallery__item")
22 11
23 imageList.content:insert(lel) 12 return pandoc.RawBlock("html",
24 end, 13 "<figure><a href=\"" .. images[1].src .. "\"><img src=\"" .. images[1].src .. "\" title=\"" ..
25 }) 14 images[1].title .. "\" /></a></figure>")
26
27 el.content = { cur, imageList }
28
29 return el
30end 15end
31 16
32function Div(el) 17function Div(el)
33 if el.classes:includes("note") then 18 if el.classes:includes("note") then
34 el = note(el) 19 el = note(el)
35 elseif el.classes:includes("gallery") then 20 elseif el.classes:includes("figure") then
36 el = gallery(el) 21 el = figure(el)
37 end 22 end
38 23
39 return el 24 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()}
81 </div> 81 </div>
82 </footer> 82 </footer>
83 83
84 <script src="/script.js"></script> 84 <div class="c-lightbox">
85 <div class="c-lightbox__bg"></div>
86
87 <button class="c-lightbox__close">
88 <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
89 <use href="/symbols.svg#icon-x"></use>
90 </svg>
91 </button>
92
93 <button class="c-lightbox__prev">
94 <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
95 <use href="/symbols.svg#icon-chevron-left"></use>
96 </svg>
97 </button>
98
99 <button class="c-lightbox__next">
100 <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
101 <use href="/symbols.svg#icon-chevron-right"></use>
102 </svg>
103 </button>
104
105 <img class="c-lightbox__img" />
106 </div>
107
108 <script src="/lightbox.js"></script>
109 <script src="/snow.js"></script>
85</body> 110</body>
86 111
87</html> 112</html>
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-24 18:01:01 +0000