From 26c099aa807d8e67944f72be04a325f37da305d5 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 18 Jun 2022 00:04:21 +0200 Subject: Added page type for art pieces --- content/art/doodles/2021-lazy-firefox/index.md | 1 + content/art/drawings/2021-cute-ava/index.md | 8 +- content/art/drawings/2021-eeveelutions/index.md | 18 +-- content/art/drawings/2021-lycanroc-ava/index.md | 8 +- content/art/drawings/2021-refsheet/index.md | 18 +-- content/art/drawings/2021-spooky-ava-1/index.md | 8 +- content/art/drawings/2021-spooky-ava-2/index.md | 8 +- content/art/drawings/2022-autumn-fox/index.md | 8 +- content/lightbox.js | 141 ++++++++++++++++++++++++ content/main.js | 135 +---------------------- 10 files changed, 178 insertions(+), 175 deletions(-) create mode 100644 content/lightbox.js (limited to 'content') 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 title: Lazy Firefox date: 2021-10-16 thumbnail: png +layout: exhibit --- ::: 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 title: Cute Avatar date: 2021-03-01 thumbnail: png ---- +layout: exhibit -::: figure -![](ava.png) -::: +images: + - ava.png +--- 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 title: Eeveelutions date: 2021-08-19 thumbnail: png ---- - -::: figure -![](eevee.png) -::: +layout: exhibit -::: figure -![](flareon.png) -::: - -::: figure -![](flareon_wink.png) -::: +images: + - eevee.png + - flareon.png + - flareon_wink.png +--- 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 title: Lycanroc Avatar date: 2021-10-19 thumbnail: png +layout: exhibit + +images: + - ava.png --- -::: figure -![](ava.png) -::: +Avatar for [@feralbot@botsin.space](https://botsin.space/@feralbot), a bot that posts pictures of feral characters from [e926](https://e926.net/). 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 title: Reference Sheet Views date: 2021-10-06 thumbnail: png ---- - -::: figure -![](bottom.png) -::: +layout: exhibit -::: figure -![](bottom_cofe.png) -::: - -::: figure -![](side.png) -::: +images: + - bottom.png + - bottom_cofe.png + - side.png +--- 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 title: \"Spooky\" Avatar date: 2021-10-07 thumbnail: png ---- +layout: exhibit -::: figure -![](ava.png) -::: +images: + - ava.png +--- 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 title: Spooky Avatar date: 2021-10-14 thumbnail: png ---- +layout: exhibit -::: figure -![](ava.png) -::: +images: + - ava.png +--- 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 title: Autumn Fox date: 2022-02-25 thumbnail: png +layout: exhibit + +images: + - pic.png --- 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/lightbox.js b/content/lightbox.js new file mode 100644 index 0000000..a415930 --- /dev/null +++ b/content/lightbox.js @@ -0,0 +1,141 @@ +(() => { + const mainEl = document.querySelector("main"); + const lightboxContainerEl = document.querySelector(".js-lightbox"); + const lightboxEl = lightboxContainerEl.querySelector(".o-lightbox"); + const lightboxCloseEl = lightboxEl.querySelector(".o-lightbox__close-btn"); + const lightboxPrevEl = lightboxEl.querySelector(".o-lightbox__prev-btn"); + const lightboxNextEl = lightboxEl.querySelector(".o-lightbox__next-btn"); + const lightboxImgEl = lightboxEl.querySelector(".o-lightbox__img"); + const lightboxFooterEl = lightboxEl.querySelector(".o-lightbox__footer"); + const figureEls = Array.from(mainEl.querySelectorAll(".js-lightbox__image")); + + const closeable = lightboxContainerEl.classList.contains("js-lightbox--closeable"); + let currentIndex = 0; + let visible = !lightboxContainerEl.classList.contains("u-d-none"); + let mouseDown = false; + + const show = () => { + visible = true; + lightboxContainerEl.classList.remove("u-d-none"); + } + + const hide = () => { + if (closeable) { + visible = false; + lightboxContainerEl.classList.add("u-d-none"); + } + } + + const setIndex = (i) => { + if (i < 0 || i >= thumbnailEls.length) { + return; + } + thumbnailEls[currentIndex].classList.remove("is-selected"); + currentIndex = i; + lightboxImgEl.src = figureEls[i].firstElementChild.href; + thumbnailEls[i].classList.add("is-selected"); + }; + + const prev = () => { + setIndex(currentIndex > 0 ? currentIndex - 1 : figureEls.length - 1); + }; + + const next = () => { + setIndex(currentIndex < figureEls.length - 1 ? currentIndex + 1 : 0); + }; + + lightboxCloseEl?.addEventListener("click", hide); + lightboxPrevEl.addEventListener("click", prev); + lightboxNextEl.addEventListener("click", next); + + const thumbnailEls = figureEls.map((figureEl, i) => { + const go = e => { + e.preventDefault(); + show(); + setIndex(i); + }; + + let anchorEl; + let imgEl; + + if (figureEl.firstElementChild.tagName === "A") { + anchorEl = figureEl.firstElementChild; + imgEl = anchorEl.firstElementChild; + } else { + imgEl = figureEl.firstElementChild; + anchorEl = document.createElement("a"); + anchorEl.href = imgEl.src; + + figureEl.insertBefore(anchorEl, imgEl); + figureEl.removeChild(imgEl); + anchorEl.appendChild(imgEl); + } + + anchorEl.addEventListener("click", go); + + const thumbnailButtonEl = document.createElement("button"); + const thumbnailImgEl = document.createElement("img"); + + thumbnailImgEl.classList.add("o-lightbox__thumbnail-img"); + thumbnailImgEl.src = anchorEl.href; + + thumbnailButtonEl.classList.add("o-lightbox__thumbnail"); + thumbnailButtonEl.appendChild(thumbnailImgEl); + thumbnailButtonEl.addEventListener("click", go); + + if (i === currentIndex) { + thumbnailButtonEl.classList.add("is-selected"); + } + + lightboxFooterEl.appendChild(thumbnailButtonEl); + + return thumbnailButtonEl; + }); + + setIndex(0); + + if (closeable) { + 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; + } + + switch (e.key) { + case "Left": + case "ArrowLeft": + prev(); + break; + + case "Right": + case "ArrowRight": + next(); + break; + + case "Esc": + case "Escape": + hide(); + break; + + default: + return; + } + + e.preventDefault(); + }, true); +})(); 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 @@ (() => { + document.body.classList.remove('t-no-js'); + document.body.classList.add('t-js'); + const enableFocusIndicator = e => { if (e.key !== 'Tab') { return; @@ -18,135 +21,3 @@ document.addEventListener('keydown', enableFocusIndicator); })(); - -(() => { - let currentIndex = 0; - let visible = false; - let mouseDown = false; - - const mainEl = document.querySelector("main"); - const lightboxContainerEl = document.querySelector(".js-lightbox"); - const lightboxEl = lightboxContainerEl.querySelector(".o-lightbox"); - const lightboxCloseEl = lightboxEl.querySelector(".o-lightbox__close-btn"); - const lightboxPrevEl = lightboxEl.querySelector(".o-lightbox__prev-btn"); - const lightboxNextEl = lightboxEl.querySelector(".o-lightbox__next-btn"); - const lightboxImgEl = lightboxEl.querySelector(".o-lightbox__img"); - const lightboxFooterEl = lightboxEl.querySelector(".o-lightbox__footer"); - const figureEls = Array.from(mainEl.querySelectorAll("figure")); - - const show = () => { - visible = true; - lightboxContainerEl.classList.remove("u-d-none"); - } - - const hide = () => { - visible = false; - lightboxContainerEl.classList.add("u-d-none"); - } - - const setIndex = (i) => { - thumbnailEls[currentIndex].classList.remove("is-selected"); - currentIndex = i; - lightboxImgEl.src = figureEls[i].firstElementChild.href; - thumbnailEls[i].classList.add("is-selected"); - }; - - const prev = () => { - setIndex(currentIndex > 0 ? currentIndex - 1 : figureEls.length - 1); - }; - - const next = () => { - setIndex(currentIndex < figureEls.length - 1 ? currentIndex + 1 : 0); - }; - - lightboxCloseEl.addEventListener("click", hide); - lightboxPrevEl.addEventListener("click", prev); - lightboxNextEl.addEventListener("click", next); - - const thumbnailEls = figureEls.map((figureEl, i) => { - const go = e => { - e.preventDefault(); - show(); - setIndex(i); - }; - - let anchorEl; - let imgEl; - - if (figureEl.firstElementChild.tagName === "A") { - anchorEl = figureEl.firstElementChild; - imgEl = anchorEl.firstElementChild; - } else { - imgEl = figureEl.firstElementChild; - anchorEl = document.createElement("a"); - anchorEl.href = imgEl.src; - - figureEl.insertBefore(anchorEl, imgEl); - figureEl.removeChild(imgEl); - anchorEl.appendChild(imgEl); - } - - anchorEl.addEventListener("click", go); - - const thumbnailButtonEl = document.createElement("button"); - const thumbnailImgEl = document.createElement("img"); - - thumbnailImgEl.classList.add("o-lightbox__thumbnail-img"); - thumbnailImgEl.src = anchorEl.href; - - thumbnailButtonEl.classList.add("o-lightbox__thumbnail"); - thumbnailButtonEl.appendChild(thumbnailImgEl); - thumbnailButtonEl.addEventListener("click", go); - - if (i === currentIndex) { - thumbnailButtonEl.classList.add("is-selected"); - } - - lightboxFooterEl.appendChild(thumbnailButtonEl); - - 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; - } - - switch (e.key) { - case "Left": - case "ArrowLeft": - prev(); - break; - - case "Right": - case "ArrowRight": - next(); - break; - - case "Esc": - case "Escape": - hide(); - break; - - default: - return; - } - - e.preventDefault(); - }, true); -})(); -- cgit v1.2.3-54-g00ecf