diff options
Diffstat (limited to 'content')
-rw-r--r-- | content/art/doodles/2021-lazy-firefox/index.md | 1 | ||||
-rw-r--r-- | content/art/drawings/2021-cute-ava/index.md | 8 | ||||
-rw-r--r-- | content/art/drawings/2021-eeveelutions/index.md | 18 | ||||
-rw-r--r-- | content/art/drawings/2021-lycanroc-ava/index.md | 8 | ||||
-rw-r--r-- | content/art/drawings/2021-refsheet/index.md | 18 | ||||
-rw-r--r-- | content/art/drawings/2021-spooky-ava-1/index.md | 8 | ||||
-rw-r--r-- | content/art/drawings/2021-spooky-ava-2/index.md | 8 | ||||
-rw-r--r-- | content/art/drawings/2022-autumn-fox/index.md | 8 | ||||
-rw-r--r-- | content/lightbox.js | 141 | ||||
-rw-r--r-- | content/main.js | 135 |
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 | |||
3 | title: Lazy Firefox | 3 | title: Lazy Firefox |
4 | date: 2021-10-16 | 4 | date: 2021-10-16 |
5 | thumbnail: png | 5 | thumbnail: png |
6 | layout: 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 | |||
3 | title: Cute Avatar | 3 | title: Cute Avatar |
4 | date: 2021-03-01 | 4 | date: 2021-03-01 |
5 | thumbnail: png | 5 | thumbnail: png |
6 | --- | 6 | layout: exhibit |
7 | 7 | ||
8 | ::: figure | 8 | images: |
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 | |||
3 | title: Eeveelutions | 3 | title: Eeveelutions |
4 | date: 2021-08-19 | 4 | date: 2021-08-19 |
5 | thumbnail: png | 5 | thumbnail: png |
6 | --- | 6 | layout: exhibit |
7 | |||
8 | ::: figure | ||
9 | ![](eevee.png) | ||
10 | ::: | ||
11 | 7 | ||
12 | ::: figure | 8 | images: |
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 | |||
3 | title: Lycanroc Avatar | 3 | title: Lycanroc Avatar |
4 | date: 2021-10-19 | 4 | date: 2021-10-19 |
5 | thumbnail: png | 5 | thumbnail: png |
6 | layout: exhibit | ||
7 | |||
8 | images: | ||
9 | - ava.png | ||
6 | --- | 10 | --- |
7 | 11 | ||
8 | ::: figure | 12 | Avatar 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 | |||
3 | title: Reference Sheet Views | 3 | title: Reference Sheet Views |
4 | date: 2021-10-06 | 4 | date: 2021-10-06 |
5 | thumbnail: png | 5 | thumbnail: png |
6 | --- | 6 | layout: exhibit |
7 | |||
8 | ::: figure | ||
9 | ![](bottom.png) | ||
10 | ::: | ||
11 | 7 | ||
12 | ::: figure | 8 | images: |
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 | |||
3 | title: \"Spooky\" Avatar | 3 | title: \"Spooky\" Avatar |
4 | date: 2021-10-07 | 4 | date: 2021-10-07 |
5 | thumbnail: png | 5 | thumbnail: png |
6 | --- | 6 | layout: exhibit |
7 | 7 | ||
8 | ::: figure | 8 | images: |
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 | |||
3 | title: Spooky Avatar | 3 | title: Spooky Avatar |
4 | date: 2021-10-14 | 4 | date: 2021-10-14 |
5 | thumbnail: png | 5 | thumbnail: png |
6 | --- | 6 | layout: exhibit |
7 | 7 | ||
8 | ::: figure | 8 | images: |
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 | |||
3 | title: Autumn Fox | 3 | title: Autumn Fox |
4 | date: 2022-02-25 | 4 | date: 2022-02-25 |
5 | thumbnail: png | 5 | thumbnail: png |
6 | layout: exhibit | ||
7 | |||
8 | images: | ||
9 | - pic.png | ||
6 | --- | 10 | --- |
7 | 11 | ||
8 | First attempt at cel shading. | 12 | First attempt at cel shading. |
9 | It's actually incomplete, but I felt like I had hit a roadblock with the shading and wanted to try again with another drawing. | 13 | It'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 | })(); | ||