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 --- assets/css/_declare-vars.scss | 8 ++ assets/css/components/_exhibit.scss | 38 +++++++ assets/css/components/_header.scss | 38 ++----- assets/css/components/_main.scss | 15 +++ assets/css/layouts/_card-list.scss | 4 +- assets/css/scopes/_body.scss | 10 ++ assets/css/style.scss | 3 + 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 +---------------------- filters/macros.lua | 2 +- templates/base.html | 30 +---- templates/feed_entry.xml | 12 +- templates/layouts/categorized_list.html | 2 +- templates/layouts/exhibit.html | 66 +++++++++++ templates/layouts/list.html | 2 +- templates/layouts/page.html | 34 +++++- templates/layouts/redirect.html | 4 +- templates/partials/gallery_card.html | 8 +- templates/partials/grid_card.html | 8 +- templates/partials/list_card.html | 12 +- yarn.lock | 2 +- 29 files changed, 397 insertions(+), 254 deletions(-) create mode 100644 assets/css/components/_exhibit.scss create mode 100644 assets/css/components/_main.scss create mode 100644 assets/css/scopes/_body.scss create mode 100644 content/lightbox.js create mode 100644 templates/layouts/exhibit.html diff --git a/assets/css/_declare-vars.scss b/assets/css/_declare-vars.scss index 3422588..38aaa21 100644 --- a/assets/css/_declare-vars.scss +++ b/assets/css/_declare-vars.scss @@ -19,6 +19,10 @@ --1000: iro.fn-px-to-rem(60px), --1100: iro.fn-px-to-rem(70px), ), + + --header: ( + --height: fn.dim(--size --800), + ), ) ), 'dims'); @@ -40,6 +44,10 @@ --1000: iro.fn-px-to-rem(45px), --1100: iro.fn-px-to-rem(50px), ), + + --header: ( + --height: fn.dim(--size --700), + ), ) ), 'sm'); diff --git a/assets/css/components/_exhibit.scss b/assets/css/components/_exhibit.scss new file mode 100644 index 0000000..96ed1ae --- /dev/null +++ b/assets/css/components/_exhibit.scss @@ -0,0 +1,38 @@ +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; +@use 'include-media/dist/include-media' as media; + +@include iro.props-namespace('exhibit') { + @include iro.props-store(( + --dims: ( + --height: 100vh, + ) + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --footer: ( + --bg: fn.global-color(--bg-hi), + ), + ) + ), 'colors'); + + @include iro.bem-component(iro.props-namespace()) { + display: grid; + grid-template-rows: 1fr auto; + grid-template-areas: 'content' 'footer'; + box-sizing: border-box; + height: fn.dim(--height); + + @include iro.bem-elem('content') { + grid-area: content; + height: auto; + overflow: hidden; + } + + @include iro.bem-elem('footer') { + grid-area: footer; + background-color: fn.color(--footer --bg); + } + } +} diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss index ce216ee..c8b50f8 100644 --- a/assets/css/components/_header.scss +++ b/assets/css/components/_header.scss @@ -19,10 +19,10 @@ @include iro.props-store(( --dims: ( - --height: 4rem, + --height: fn.global-dim(--header --height), --icon: 1.5rem, - --pad-x: calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))), - --gap: 2px, + --pad-x: calc(.5 * (fn.dim(--height, null) - fn.dim(--icon, null))), + --gap: fn.global-dim(--size --25), ) ), 'dims'); @@ -32,18 +32,14 @@ ) ), 'colors-dark'); - @include iro.props-store(( - --dims: ( - --height: 3.4rem, - ) - ), 'sm'); - @include iro.bem-component(iro.props-namespace()) { - display: flex; - width: 0; - height: fn.dim(--height); - padding: fn.dim(--gap); - gap: fn.dim(--gap); + display: flex; + position: absolute; + z-index: 100; + top: 0; + left: 0; + height: fn.dim(--height); + gap: fn.dim(--gap); @include iro.bem-elem('item') { padding: 0 fn.dim(--pad-x); @@ -52,7 +48,6 @@ color: fn.color(--fg); line-height: fn.dim(--height); text-decoration: none; - white-space: nowrap; &:hover, &:focus { @@ -78,19 +73,8 @@ height: fn.dim(--icon); } - @include iro.bem-modifier('fixed') { - position: fixed; - } - @include media.media('>=lg') { - position: sticky; - z-index: 100; - top: 0; - margin-bottom: calc(-.75 * #{fn.dim(--height)}); - - @include iro.bem-modifier('fixed') { - position: fixed; - } + position: fixed; } @media print { diff --git a/assets/css/components/_main.scss b/assets/css/components/_main.scss new file mode 100644 index 0000000..f0a839e --- /dev/null +++ b/assets/css/components/_main.scss @@ -0,0 +1,15 @@ +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; +@use 'include-media/dist/include-media' as media; + +@include iro.props-namespace('main') { + @include iro.props-store(( + --dims: ( + --pad-top: fn.global-dim(--header --height), + ) + ), 'dims'); + + @include iro.bem-component(iro.props-namespace()) { + margin-top: fn.dim(--pad-top); + } +} diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss index 2d9d58f..92c89b7 100644 --- a/assets/css/layouts/_card-list.scss +++ b/assets/css/layouts/_card-list.scss @@ -9,7 +9,7 @@ --gap: fn.global-dim(--size --25), --grid-2: ( --gap: fn.global-dim(--size --75), - --col-width: fn.global-dim(--size --3400), + --col-width: fn.global-dim(--size --3200), ), --grid-3: ( --gap: fn.global-dim(--size --75), @@ -17,7 +17,7 @@ ), --gallery-2: ( --gap: fn.global-dim(--size --200), - --col-width: fn.global-dim(--size --3400), + --col-width: fn.global-dim(--size --3200), ), --gallery-3: ( --gap: fn.global-dim(--size --200), diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss new file mode 100644 index 0000000..1c76843 --- /dev/null +++ b/assets/css/scopes/_body.scss @@ -0,0 +1,10 @@ +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; + +@include iro.props-namespace('body') { + @include iro.bem-scope(iro.props-namespace()) { + > :first-child { + margin-top: 0; + } + } +} diff --git a/assets/css/style.scss b/assets/css/style.scss index 3fce2f4..046210f 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -18,11 +18,13 @@ @use 'iro-design/src/objects/alert' as iro-alert; @use 'iro-design/src/objects/lightbox' as iro-lightbox; +@use 'components/main'; @use 'components/footer'; @use 'components/header'; @use 'components/hnav'; @use 'components/card'; @use 'components/figure'; +@use 'components/exhibit'; @use 'iro-design/src/scopes/blockquotes' as iro-blockquotes; @use 'iro-design/src/scopes/code' as iro-code; @@ -31,6 +33,7 @@ @use 'iro-design/src/scopes/invisible-links' as iro-invisible-links; @use 'iro-design/src/scopes/lists' as iro-lists; @use 'iro-design/src/scopes/tables' as iro-tables; +@use 'scopes/body'; @use 'scopes/small'; @use 'scopes/alerts'; 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); -})(); diff --git a/filters/macros.lua b/filters/macros.lua index df08676..cb7975b 100644 --- a/filters/macros.lua +++ b/filters/macros.lua @@ -23,7 +23,7 @@ function figure(el) pandoc.walk_block(el, { Image = function(iel) images:insert(iel) end }) el = pandoc.RawBlock("html", - "
\ + "
\ \ \ \ diff --git a/templates/base.html b/templates/base.html index cfc40a4..4ffd690 100644 --- a/templates/base.html +++ b/templates/base.html @@ -52,7 +52,7 @@ - +
+ $endfor$ + $endif$ +]]> diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html index 206c566..1a1048a 100644 --- a/templates/layouts/categorized_list.html +++ b/templates/layouts/categorized_list.html @@ -1,5 +1,5 @@
+
+
+
+ + + + + + +
+
+ +
+
+
+
+ $if(date)$ + + + + $endif$ + $title$ +
+ $if(date)$ + + + + $endif$ +
+
+
+
+ +
+
+$body$ + + $for(images)$ +
+ +
+ $endfor$ +
+
+
+
+ + diff --git a/templates/layouts/list.html b/templates/layouts/list.html index 66a08fd..508ff4c 100644 --- a/templates/layouts/list.html +++ b/templates/layouts/list.html @@ -1,5 +1,5 @@
$if(date)$ -
+
+ $endif$

@@ -35,4 +35,32 @@ $body$ $endif$

+ +
+
+ + + + + + + + +
+
+
+ + diff --git a/templates/layouts/redirect.html b/templates/layouts/redirect.html index 9f78dec..6684bd2 100644 --- a/templates/layouts/redirect.html +++ b/templates/layouts/redirect.html @@ -1,4 +1,4 @@ - + diff --git a/templates/partials/gallery_card.html b/templates/partials/gallery_card.html index deffb3f..6692888 100644 --- a/templates/partials/gallery_card.html +++ b/templates/partials/gallery_card.html @@ -37,11 +37,11 @@ $if(it.thumbnail)$ $it.category$ $it.title$ $elseif(it.date)$ - + + $it.title$ $else$ diff --git a/templates/partials/grid_card.html b/templates/partials/grid_card.html index 9af9415..003e59f 100644 --- a/templates/partials/grid_card.html +++ b/templates/partials/grid_card.html @@ -24,11 +24,11 @@ $if(it.url)$ $it.category$ $it.title$ $elseif(it.date)$ - + + $it.title$ $else$ diff --git a/templates/partials/list_card.html b/templates/partials/list_card.html index 6cf0e67..dc9111e 100644 --- a/templates/partials/list_card.html +++ b/templates/partials/list_card.html @@ -24,7 +24,9 @@ $if(it.url)$ $it.category$ $it.title$ $elseif(it.date)$ - + + + $it.title$ $else$ @@ -44,11 +46,11 @@ $if(it.url)$ $it.category$ $elseif(it.date)$ - + + $endif$ $if(it.post_icon)$