From bcee1a0f4615d90bd714adf8bea79baffe006579 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 29 Dec 2021 19:16:35 +0100 Subject: Added lightbox --- assets/css/_basics.scss | 16 ++++ assets/css/components/_gallery.scss | 25 ------ assets/css/components/_lightbox.scss | 93 ++++++++++++++++++++++ assets/css/objects/_icon.scss | 4 +- assets/css/style.scss | 2 +- 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 +++ filters/macros.lua | 31 ++------ templates/base.html | 27 ++++++- 22 files changed, 262 insertions(+), 81 deletions(-) delete mode 100644 assets/css/components/_gallery.scss create mode 100644 assets/css/components/_lightbox.scss create mode 100644 content/lightbox.js delete mode 100644 content/script.js create mode 100644 content/snow.js 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 { margin: ($line-height * 1rem) 0 0; } +figure { + display: flex; + flex-direction: column; + align-items: center; + margin: ($line-height * 1rem) 0 0; + padding: 0; + background-color: prop(--colors --bg-hi); + + img { + display: block; + max-width: 100%; + max-height: 70vh; + object-fit: contain; + } +} + :link, :visited { 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 @@ -@include namespace('gallery') { - @include store(( - --dims: ( - --col-width: 17em - ) - )); - - @include component(namespace()) { - margin-top: $line-height * 1rem; - - @include element('items') { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); - gap: 20px; - } - - @include element('item') { - display: block; - } - - @include element('img') { - display: block; - } - } -} 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 @@ +@include namespace('lightbox') { + @include store(( + --colors: ( + --bg: prop(--colors --bg-hi, $global: true), + --button: ( + --idle: prop(--colors --fg-hi, $global: true), + --hover: prop(--colors --fg-lo, $global: true), + ) + ), + --dims: ( + --col-width: 17em + ) + )); + + @include component(namespace()) { + display: flex; + visibility: hidden; + position: fixed; + z-index: 5000; + top: 0; + left: 0; + box-sizing: border-box; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + padding: 2em calc(3em + 1rem); + transition: opacity .2s, visibility .2s; + opacity: 0; + + @include element('bg') { + position: absolute; + z-index: -10; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: .95; + background-color: prop(--colors --bg); + } + + @include is('shown') { + visibility: visible; + transition: opacity .2s, visibility 0 .2s; + opacity: 1; + } + + @include element('img') { + max-width: 100%; + max-height: 100%; + } + + @include element('close', 'prev', 'next') { + margin: 0; + transition: color .2s; + border: 0; + background-color: transparent; + color: currentColor; + + &:hover { + color: prop(--colors --button --hover); + } + } + + @include element('close') { + position: absolute; + top: 0; + right: 0; + padding: 1rem; + font-size: 1.5em; + } + + @include element('prev', 'next') { + position: absolute; + top: 50%; + padding: .5rem; + transform: translate(0, -50%); + font-size: 3em; + + > * { + stroke-width: .75px; + } + } + + @include element('prev') { + left: 0; + } + + @include element('next') { + right: 0; + } + } +} 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 @@ @include object(namespace()) { display: block; - width: iro-px-to-rem(16px); - height: iro-px-to-rem(16px); + width: 1em; + height: 1em; stroke-width: 1.5px; stroke-linecap: round; 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 @@ @import 'components/footer'; @import 'components/card'; @import 'components/note'; -@import 'components/gallery'; +@import 'components/lightbox'; @import 'layouts/card-list'; 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" /> + + + + + + + + + + + + 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) return el end -function gallery(el) - el.classes = pandoc.List() - el.classes:insert("c-gallery") - - local cur = pandoc.Div(pandoc.List(), { class = "c-gallery__current" }) - local imageList = pandoc.Div(pandoc.List(), { class = "c-gallery__items" }) - - pandoc.walk_block(el, { - Image = function(iel) - iel.classes = pandoc.List() - iel.classes:insert("c-gallery__img") +function figure(el) + local images = pandoc.List() - local lel = pandoc.Link(iel, iel.src) - lel.classes = pandoc.List() - lel.classes:insert("c-gallery__item") + pandoc.walk_block(el, { Image = function(iel) images:insert(iel) end }) - imageList.content:insert(lel) - end, - }) - - el.content = { cur, imageList } - - return el + return pandoc.RawBlock("html", + "
") end function Div(el) if el.classes:includes("note") then el = note(el) - elseif el.classes:includes("gallery") then - el = gallery(el) + elseif el.classes:includes("figure") then + el = figure(el) end 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()} - +
+
+ + + + + + + + +
+ + + -- cgit v1.2.3-70-g09d2