From bcee1a0f4615d90bd714adf8bea79baffe006579 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 29 Dec 2021 19:16:35 +0100 Subject: Added lightbox --- content/lightbox.js | 41 ++++++++++++++++++++++ .../projects/doodles/2021-lazy-firefox/index.md | 4 +++ content/projects/drawings/2021-cute-ava/index.md | 2 ++ .../projects/drawings/2021-eeveelutions/index.md | 6 ++++ .../projects/drawings/2021-lycanroc-ava/index.md | 2 ++ content/projects/drawings/2021-refsheet/index.md | 8 ++++- .../projects/drawings/2021-spooky-ava-1/index.md | 2 ++ .../projects/drawings/2021-spooky-ava-2/index.md | 2 ++ .../projects/drawings/2022-ava-shading/index.md | 2 ++ content/projects/emojis/blobfox/index.md | 2 ++ content/projects/emojis/bunhd/index.md | 2 ++ content/projects/emojis/vlpn/index.md | 2 ++ content/script.js | 28 --------------- content/snow.js | 30 ++++++++++++++++ content/symbols.svg | 12 +++++++ 15 files changed, 116 insertions(+), 29 deletions(-) create mode 100644 content/lightbox.js delete mode 100644 content/script.js create mode 100644 content/snow.js (limited to 'content') 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 @@ +(() => { + let currentIndex = 0; + const mainEl = document.querySelector("main"); + const lightboxEl = document.querySelector(".c-lightbox"); + const lightboxBgEl = document.querySelector(".c-lightbox__bg"); + const lightboxCloseEl = document.querySelector(".c-lightbox__close"); + const lightboxPrevEl = document.querySelector(".c-lightbox__prev"); + const lightboxNextEl = document.querySelector(".c-lightbox__next"); + const lightboxImgEl = document.querySelector(".c-lightbox__img"); + const figureEls = Array.from(mainEl.querySelectorAll("figure")).map(el => el.querySelector("a")); + + const show = () => { + lightboxEl.classList.add("is-shown"); + } + + const hide = () => { + lightboxEl.classList.remove("is-shown"); + } + + const setIndex = (i) => { + currentIndex = i; + lightboxImgEl.src = figureEls[i].href; + }; + + lightboxBgEl.addEventListener("click", hide); + lightboxCloseEl.addEventListener("click", hide); + lightboxPrevEl.addEventListener("click", () => { + setIndex(currentIndex === 0 ? figureEls.length - 1 : currentIndex - 1); + }); + lightboxNextEl.addEventListener("click", () => { + setIndex(currentIndex === figureEls.length - 1 ? 0 : currentIndex + 1); + }); + + figureEls.forEach((figureEl, i) => { + figureEl.addEventListener("click", e => { + e.preventDefault(); + show(); + setIndex(i); + }) + }); +})(); 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 thumbnail: png --- +::: figure ![](firefox_lazy.png) +::: +::: figure ![](firefox_lazy_transparent.png) +::: 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 thumbnail: png --- +::: figure ![](ava.png) +::: 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 thumbnail: png --- +::: figure ![](eevee.png) +::: +::: figure ![](flareon.png) +::: +::: figure ![](flareon_wink.png) +::: 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 thumbnail: png --- +::: figure ![](ava.png) +::: 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 thumbnail: png --- -::: gallery +::: figure ![](bottom.png) +::: + +::: figure ![](bottom_cofe.png) +::: + +::: figure ![](side.png) ::: 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 thumbnail: png --- +::: figure ![](ava.png) +::: 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 thumbnail: png --- +::: figure ![](ava.png) +::: 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 unlisted: true --- +::: figure ![](pic.png) +::: 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 thumbnail: jpg --- +::: figure ![](screenshot.png) +::: **Latest release:** v1.6 (%last_update.yyyy_mm_dd%) **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 thumbnail: png --- +::: figure ![](screenshot.png) +::: **Latest release:** v1.2.1 (%last_update.yyyy_mm_dd%) **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 thumbnail: png --- +::: figure ![](preview.png) +::: **Latest release:** v1.1 (%last_update.yyyy_mm_dd%) **[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 @@ -function createSnowFlake() { - setTimeout(() => createSnowFlake(), 50 / Math.log10(window.innerWidth / 1000 + 1)); - - if (document.hidden) { - return; - } - - const snowFlake = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - const snowFlakeInner = document.createElementNS("http://www.w3.org/2000/svg", "use"); - const aniDuration = (Math.random() * 3 + 2) * 1000; - - snowFlakeInner.setAttribute("href", "/symbols.svg#icon-asterisk"); - - snowFlake.classList.add("o-icon", "o-icon--snow"); - snowFlake.setAttribute("aria-hidden", "true"); - - snowFlake.style.fontSize = Math.random() * 0.5 + 0.7 + 'em'; - snowFlake.style.left = Math.random() * 100 + '%'; - snowFlake.style.animationDuration = aniDuration + 'ms'; - snowFlake.style.opacity = Math.random(); - - setTimeout(() => snowFlake.remove(), aniDuration); - - snowFlake.appendChild(snowFlakeInner); - document.body.appendChild(snowFlake); -} - -createSnowFlake(); 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 @@ +(() => { + function createSnowFlake() { + setTimeout(() => createSnowFlake(), 50 / Math.log10(window.innerWidth / 1000 + 1)); + + if (document.hidden) { + return; + } + + const snowFlake = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + const snowFlakeInner = document.createElementNS("http://www.w3.org/2000/svg", "use"); + const aniDuration = (Math.random() * 3 + 2) * 1000; + + snowFlakeInner.setAttribute("href", "/symbols.svg#icon-asterisk"); + + snowFlake.classList.add("o-icon", "o-icon--snow"); + snowFlake.setAttribute("aria-hidden", "true"); + + snowFlake.style.fontSize = Math.random() * 0.5 + 0.7 + 'em'; + snowFlake.style.left = Math.random() * 100 + '%'; + snowFlake.style.animationDuration = aniDuration + 'ms'; + snowFlake.style.opacity = Math.random(); + + setTimeout(() => snowFlake.remove(), aniDuration); + + snowFlake.appendChild(snowFlakeInner); + document.body.appendChild(snowFlake); + } + + createSnowFlake(); +})(); 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 @@ 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" fill="none" stroke="currentColor" /> + + + + + + + + + + + + -- cgit v1.2.3-70-g09d2