From 5f4cb1fd8b84e69092ac56a643b1618006f0442c Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 16 Dec 2021 18:29:18 +0100 Subject: Add thumbnails to cards --- assets/css/components/_card.scss | 43 ++++++++++-- assets/css/layouts/_card-list.scss | 28 ++++---- .../projects/drawings/2021-eeveelutions/index.md | 6 +- .../projects/drawings/2021-lazy-firefox/index.md | 6 +- .../projects/drawings/2021-lycanroc-ava/index.md | 6 +- content/projects/drawings/2021-refsheet/index.md | 6 +- .../projects/drawings/2021-spooky-ava-1/index.md | 6 +- .../projects/drawings/2021-spooky-ava-2/index.md | 6 +- content/projects/drawings/index.md | 2 +- content/projects/emojis/blobfox/index.md | 6 +- content/projects/emojis/bunhd/index.md | 6 +- content/projects/emojis/index.md | 2 +- content/projects/emojis/vlpn/index.md | 6 +- content/projects/index.md | 5 +- scripts/metadata_filter.lua | 9 ++- templates/layouts/categorized_list.html | 9 ++- templates/layouts/list.html | 4 ++ templates/partials/gallery_card.html | 47 +++++++++++++ templates/partials/grid_card.html | 66 ++++++++++--------- templates/partials/list_card.html | 76 +++++++++++----------- 20 files changed, 222 insertions(+), 123 deletions(-) create mode 100644 templates/partials/gallery_card.html diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index b023447..5c2efa4 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss @@ -30,11 +30,8 @@ ), 'light'); @include component(namespace()) { - display: flex; + display: block; position: relative; - align-items: center; - padding-right: calc(.5 * #{prop(--dims --pad-x)}); - padding-left: calc(.5 * #{prop(--dims --pad-x)}); transform: translateY(0); transition: transform .2s, background-color .2s, color .2s; background-color: prop(--colors --bg); @@ -81,6 +78,10 @@ color: prop(--colors --hover --fg); } } + + /*@include element('row') { + border-top-color: transparent; + }*/ } } @@ -92,9 +93,41 @@ } } + @include element('row') { + display: flex; + align-items: center; + padding: prop(--dims --pad-y) prop(--dims --pad-x); + gap: prop(--dims --pad-x); + //transition: border-top-color .2s; + + @include modifier('flush') { + padding: 0; + } + + /*@include next-twin-element { + border-top: 1px solid prop(--colors --border); + }*/ + } + + @include element('thumbnail') { + position: relative; + width: 100%; + height: 2em; + padding-top: 40%; + } + + @include element('thumbnail-img') { + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + } + @include element('block') { flex: 0 0 auto; - padding: prop(--dims --pad-y) calc(.5 * #{prop(--dims --pad-x)}); overflow: hidden; text-overflow: ellipsis; diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss index e6d1297..3bbcc44 100644 --- a/assets/css/layouts/_card-list.scss +++ b/assets/css/layouts/_card-list.scss @@ -10,19 +10,23 @@ font-size: 1rem; @include element('cards') { - margin-top: $line-height * .625rem; - filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); + display: flex; + flex-direction: column; + gap: 2px; + margin-top: $line-height * .625rem; + filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); - @include modifier('grid') { + @include modifier('grid', 'gallery') { display: grid; grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); - gap: 6px; - - @include element('card') { - @include next-twin-element { - margin-top: 0; - } - } + } + + @include modifier('grid') { + gap: 6px; + } + + @include modifier('gallery') { + gap: 30px; } @media print { @@ -32,10 +36,6 @@ @include element('card') { box-shadow: none; - - @include next-twin-element { - margin-top: 2px; - } } } } diff --git a/content/projects/drawings/2021-eeveelutions/index.md b/content/projects/drawings/2021-eeveelutions/index.md index 9da3089..0808085 100644 --- a/content/projects/drawings/2021-eeveelutions/index.md +++ b/content/projects/drawings/2021-eeveelutions/index.md @@ -1,7 +1,7 @@ --- -title: Eeveelutions -date: 2021-08-19 -preview: preview.png +title: Eeveelutions +date: 2021-08-19 +thumbnail: preview.png --- ![](eevee.png) diff --git a/content/projects/drawings/2021-lazy-firefox/index.md b/content/projects/drawings/2021-lazy-firefox/index.md index a351a65..35ad12c 100644 --- a/content/projects/drawings/2021-lazy-firefox/index.md +++ b/content/projects/drawings/2021-lazy-firefox/index.md @@ -1,7 +1,7 @@ --- -title: Lazy Firefox -date: 2021-10-16 -preview: firefox_lazy.png +title: Lazy Firefox +date: 2021-10-16 +thumbnail: firefox_lazy.png --- ![](firefox_lazy.png) diff --git a/content/projects/drawings/2021-lycanroc-ava/index.md b/content/projects/drawings/2021-lycanroc-ava/index.md index 5ba7143..406f9a2 100644 --- a/content/projects/drawings/2021-lycanroc-ava/index.md +++ b/content/projects/drawings/2021-lycanroc-ava/index.md @@ -1,7 +1,7 @@ --- -title: Lycanroc Avatar -date: 2021-10-19 -preview: ava.png +title: Lycanroc Avatar +date: 2021-10-19 +thumbnail: ava.png --- ![](ava.png) diff --git a/content/projects/drawings/2021-refsheet/index.md b/content/projects/drawings/2021-refsheet/index.md index bd85728..70bbd84 100644 --- a/content/projects/drawings/2021-refsheet/index.md +++ b/content/projects/drawings/2021-refsheet/index.md @@ -1,7 +1,7 @@ --- -title: Reference Sheet Views -date: 2021-10-06 -preview: preview.png +title: Reference Sheet Views +date: 2021-10-06 +thumbnail: preview.png --- ![](bottom.png) diff --git a/content/projects/drawings/2021-spooky-ava-1/index.md b/content/projects/drawings/2021-spooky-ava-1/index.md index 4341b9a..ecfd3df 100644 --- a/content/projects/drawings/2021-spooky-ava-1/index.md +++ b/content/projects/drawings/2021-spooky-ava-1/index.md @@ -1,7 +1,7 @@ --- -title: \"Spooky\" Avatar -date: 2021-10-07 -preview: ava.png +title: \"Spooky\" Avatar +date: 2021-10-07 +thumbnail: ava.png --- ![](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 22b996d..0b61e24 100644 --- a/content/projects/drawings/2021-spooky-ava-2/index.md +++ b/content/projects/drawings/2021-spooky-ava-2/index.md @@ -1,7 +1,7 @@ --- -title: Spooky Avatar -date: 2021-10-14 -preview: ava.png +title: Spooky Avatar +date: 2021-10-14 +thumbnail: ava.png --- ![](ava.png) diff --git a/content/projects/drawings/index.md b/content/projects/drawings/index.md index 643a6ad..1f12a88 100644 --- a/content/projects/drawings/index.md +++ b/content/projects/drawings/index.md @@ -1,7 +1,7 @@ --- title: Drawings icon: image -list_layout: grid +list_layout: gallery list_post_icon: arrow-right list_order: date_desc feed: true diff --git a/content/projects/emojis/blobfox/index.md b/content/projects/emojis/blobfox/index.md index 0926084..3012ccc 100644 --- a/content/projects/emojis/blobfox/index.md +++ b/content/projects/emojis/blobfox/index.md @@ -1,7 +1,7 @@ --- -title: Blobfox -date: 2020-09-04 -preview: preview.jpg +title: Blobfox +date: 2020-09-04 +thumbnail: preview.jpg --- ![](screenshot.png) diff --git a/content/projects/emojis/bunhd/index.md b/content/projects/emojis/bunhd/index.md index 7cb65c4..65fcf33 100644 --- a/content/projects/emojis/bunhd/index.md +++ b/content/projects/emojis/bunhd/index.md @@ -1,7 +1,7 @@ --- -title: BunHD -date: 2019-09-30 -preview: preview.png +title: BunHD +date: 2019-09-30 +thumbnail: preview.png --- ![](screenshot.png) diff --git a/content/projects/emojis/index.md b/content/projects/emojis/index.md index 6ef4559..fb5ab08 100644 --- a/content/projects/emojis/index.md +++ b/content/projects/emojis/index.md @@ -1,7 +1,7 @@ --- title: Emojis icon: smile -list_layout: grid +list_layout: gallery list_post_icon: arrow-right list_order: date_desc feed: true diff --git a/content/projects/emojis/vlpn/index.md b/content/projects/emojis/vlpn/index.md index 28d07e8..c7bc68e 100644 --- a/content/projects/emojis/vlpn/index.md +++ b/content/projects/emojis/vlpn/index.md @@ -1,7 +1,7 @@ --- -title: vlpn -date: 2021-07-23 -preview: preview.png +title: vlpn +date: 2021-07-23 +thumbnail: preview.png --- ![](preview.png) diff --git a/content/projects/index.md b/content/projects/index.md index 748126d..814834a 100644 --- a/content/projects/index.md +++ b/content/projects/index.md @@ -1,9 +1,10 @@ --- title: Projects position: 2 -list_layout: grid +list_layout: gallery +list_limit: 4 feed: true --- A selection of projects I wasn't too lazy to create a page for. -You can find more projects on [git.vulpes.one](https://git.vulpes.one/). +You can find some more projects on [git.vulpes.one](https://git.vulpes.one/). diff --git a/scripts/metadata_filter.lua b/scripts/metadata_filter.lua index a3675d9..25fbc50 100644 --- a/scripts/metadata_filter.lua +++ b/scripts/metadata_filter.lua @@ -187,6 +187,7 @@ function generate_list(meta) subtitle = p.subtitle, date = p.date, url = p.url, + thumbnail = p.thumbnail, icon = p.icon or meta.icon, post_icon = meta.list_post_icon, indicator = meta.list_read_indicators, @@ -202,6 +203,7 @@ function generate_list(meta) subtitle = p.subtitle, date = p.date, url = p.url, + thumbnail = p.thumbnail, icon = p.icon or cat.icon, post_icon = cat.list_post_icon or meta.list_post_icon, indicator = cat.list_read_indicators, @@ -233,6 +235,7 @@ function generate_list(meta) subtitle = p.subtitle, category = c.title, url = p.url, + thumbnail = p.thumbnail, icon = p.icon or c.icon, post_icon = c.list_post_icon or cat.list_post_icon, indicator = c.list_read_indicators, @@ -293,9 +296,9 @@ function process(global, meta) end end - if meta.preview then - meta.preview = make_absolute(pandoc.utils.stringify(meta.preview), meta.file_out) - meta.preview = resolve_url(global.site.url, global.file_out, meta.preview) + if meta.thumbnail then + meta.thumbnail = make_absolute(pandoc.utils.stringify(meta.thumbnail), meta.file_out) + meta.thumbnail = resolve_url(global.site.url, global.file_out, meta.thumbnail) end if meta.menus and meta.menus.main then diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html index 73e75f3..7bbfd8c 100644 --- a/templates/layouts/categorized_list.html +++ b/templates/layouts/categorized_list.html @@ -8,7 +8,10 @@ $body$ $for(list)$

- $it.title$ + + $it.title$ + $if(it.omitted)$→$endif$ +

$if(it.description)$
$it.description$
@@ -17,6 +20,10 @@ $body$
$it.items:partials/grid_card()$
+ $elseif(it.layout.is_gallery)$ +
+ $it.items:partials/gallery_card()$ +
$else$
$it.items:partials/list_card()$ diff --git a/templates/layouts/list.html b/templates/layouts/list.html index 32aa35a..9c6b26e 100644 --- a/templates/layouts/list.html +++ b/templates/layouts/list.html @@ -9,6 +9,10 @@ $body$
$list:partials/grid_card()$
+ $elseif(list_layout.is_gallery)$ +
+ $list:partials/gallery_card()$ +
$else$
$list:partials/list_card()$ diff --git a/templates/partials/gallery_card.html b/templates/partials/gallery_card.html new file mode 100644 index 0000000..f724e3b --- /dev/null +++ b/templates/partials/gallery_card.html @@ -0,0 +1,47 @@ +$if(it.url)$ + + $if(it.thumbnail)$ +
+
+ +
+
+ $endif$ +
+ $if(it.indicator)$ +
+ $endif$ + $if(it.icon)$ + + + + $endif$ +
+ $if(it.subtitle)$ + $it.title$ + $it.subtitle$ + $elseif(it.category)$ + $it.category$ + $it.title$ + $elseif(it.date)$ + + $it.title$ + $else$ + $it.title$ + $endif$ +
+ $if(it.post_icon)$ + + + + $endif$ +
+ +$endif$ diff --git a/templates/partials/grid_card.html b/templates/partials/grid_card.html index 6f6c16e..25cde52 100644 --- a/templates/partials/grid_card.html +++ b/templates/partials/grid_card.html @@ -1,38 +1,40 @@ $if(it.url)$ - $if(it.indicator)$ -
- $endif$ - $if(it.icon)$ - - - - $endif$ -
- $if(it.subtitle)$ - $it.title$ - $it.subtitle$ - $elseif(it.category)$ - $it.category$ - $it.title$ - $elseif(it.date)$ - - $it.title$ - $else$ - $it.title$ +
+ $if(it.indicator)$ +
+ $endif$ + $if(it.icon)$ + + + + $endif$ +
+ $if(it.subtitle)$ + $it.title$ + $it.subtitle$ + $elseif(it.category)$ + $it.category$ + $it.title$ + $elseif(it.date)$ + + $it.title$ + $else$ + $it.title$ + $endif$ +
+ $if(it.post_icon)$ + + + $endif$
- $if(it.post_icon)$ - - - - $endif$ $endif$ diff --git a/templates/partials/list_card.html b/templates/partials/list_card.html index 73caa05..8244cf5 100644 --- a/templates/partials/list_card.html +++ b/templates/partials/list_card.html @@ -1,42 +1,44 @@ $if(it.url)$ - $if(it.indicator)$ -
- $endif$ - $if(it.icon)$ - - - - $endif$ -
- $it.title$ -
- $if(it.subtitle)$ -
- - $it.subtitle$ - -
- $elseif(it.category)$ -
- - $it.category$ - +
+ $if(it.indicator)$ +
+ $endif$ + $if(it.icon)$ + + + + $endif$ +
+ $it.title$
- $elseif(it.date)$ - - $endif$ - $if(it.post_icon)$ - - - - $endif$ + $if(it.subtitle)$ +
+ + $it.subtitle$ + +
+ $elseif(it.category)$ +
+ + $it.category$ + +
+ $elseif(it.date)$ + + $endif$ + $if(it.post_icon)$ + + + + $endif$ +
$endif$ -- cgit v1.2.3-70-g09d2