Add thumbnails to cards

author: Volpeon <git@volpeon.ink> 2021-12-16 18:29:18 +0100
committer: Volpeon <git@volpeon.ink> 2021-12-16 18:29:18 +0100
commit: 5f4cb1fd8b84e69092ac56a643b1618006f0442c (patch)
tree: 1d2388ad69091163da498334e2de5c94c4e74dc7
parent: Fix it for real (diff)
download: volpeon.ink-5f4cb1fd8b84e69092ac56a643b1618006f0442c.tar.gz
volpeon.ink-5f4cb1fd8b84e69092ac56a643b1618006f0442c.tar.bz2
volpeon.ink-5f4cb1fd8b84e69092ac56a643b1618006f0442c.zip
20 files changed, 222 insertions, 123 deletions
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;
+            display:        flex;
-            filter:     drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
+            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 modifier('grid') {
-                    @include next-twin-element {
+                gap: 6px;
-                        margin-top: 0;
+            }
-                    }
-                }
+            @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
+title:     Eeveelutions
-date:    2021-08-19
+date:      2021-08-19
-preview: preview.png
+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
+title:     Lazy Firefox
-date:    2021-10-16
+date:      2021-10-16
-preview: firefox_lazy.png
+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
+title:     Lycanroc Avatar
-date:    2021-10-19
+date:      2021-10-19
-preview: ava.png
+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
+title:     Reference Sheet Views
-date:    2021-10-06
+date:      2021-10-06
-preview: preview.png
+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
+title:     \"Spooky\" Avatar
-date:    2021-10-07
+date:      2021-10-07
-preview: ava.png
+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
+title:     Spooky Avatar
-date:    2021-10-14
+date:      2021-10-14
-preview: ava.png
+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
+title:     Blobfox
-date:    2020-09-04
+date:      2020-09-04
-preview: preview.jpg
+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
+title:     BunHD
-date:    2019-09-30
+date:      2019-09-30
-preview: preview.png
+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
+title:     vlpn
-date:    2021-07-23
+date:      2021-07-23
-preview: preview.png
+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
+    if meta.thumbnail then
-        meta.preview = make_absolute(pandoc.utils.stringify(meta.preview), meta.file_out)
+        meta.thumbnail = make_absolute(pandoc.utils.stringify(meta.thumbnail), meta.file_out)
-        meta.preview = resolve_url(global.site.url, global.file_out, meta.preview)
+        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)$
        <section>
            <h2 class="s-invisible-links">
-                <a href="$it.url.rel$">$it.title$</a>
+                <a href="$it.url.rel$">
+                    $it.title$
+                    $if(it.omitted)$→$endif$
+                </a>
            </h2>
            $if(it.description)$
                <div class="s-small s-colored-links">$it.description$</div>
@@ -17,6 +20,10 @@ $body$
                <div class="l-card-list__cards l-card-list__cards--grid">
                    $it.items:partials/grid_card()$
                </div>
+            $elseif(it.layout.is_gallery)$
+                <div class="l-card-list__cards l-card-list__cards--gallery">
+                    $it.items:partials/gallery_card()$
+                </div>
            $else$
                <div class="l-card-list__cards">
                    $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$
        <div class="l-card-list__cards l-card-list__cards--grid">
            $list:partials/grid_card()$
        </div>
+    $elseif(list_layout.is_gallery)$
+        <div class="l-card-list__cards l-card-list__cards--gallery">
+            $list:partials/gallery_card()$
+        </div>
    $else$
        <div class="l-card-list__cards">
            $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)$
+    <a href="$it.url.rel$" class="l-card-list__card c-card">
+        $if(it.thumbnail)$
+            <div class="c-card__row c-card__row--flush">
+                <div class="c-card__thumbnail">
+                    <img class="c-card__thumbnail-img" src="$it.thumbnail.rel$" />
+                </div>
+            </div>
+        $endif$
+        <div class="c-card__row">
+            $if(it.indicator)$
+                <div class="c-card__block c-card__block--indicator"></div>
+            $endif$
+            $if(it.icon)$
+                <svg class="c-card__block o-icon" width="1em" height="1em">
+                    <use href="/symbols.svg#icon-$it.icon$"></use>
+                </svg>
+            $endif$
+            <div class="c-card__block c-card__block--main">
+                $if(it.subtitle)$
+                    <strong class="u-db u-elp">$it.title$</strong>
+                    <small class="u-db u-elp">$it.subtitle$</small>
+                $elseif(it.category)$
+                    <small class="u-db u-elp">$it.category$</small>
+                    <strong class="u-db u-elp">$it.title$</strong>
+                $elseif(it.date)$
+                    <time datetime="$it.date.yyyy_mm_dd$">
+                        <small class="u-dn@sm-hi">
+                            $it.date.short$
+                        </small>
+                        <small class="u-dn@sm-lo">
+                            $it.date.long$
+                        </small>
+                    </time>
+                    <strong class="u-db u-elp">$it.title$</strong>
+                $else$
+                    $it.title$
+                $endif$
+            </div>
+            $if(it.post_icon)$
+                <svg class="c-card__block o-icon" width="1em" height="1em">
+                    <use href="/symbols.svg#icon-$it.post_icon$"></use>
+                </svg>
+            $endif$
+        </div>
+    </a>
+$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)$
    <a href="$it.url.rel$" class="l-card-list__card c-card">
-        $if(it.indicator)$
+        <div class="c-card__row">
-            <div class="c-card__block c-card__block--indicator"></div>
+            $if(it.indicator)$
-        $endif$
+                <div class="c-card__block c-card__block--indicator"></div>
-        $if(it.icon)$
+            $endif$
-            <svg class="c-card__block o-icon" width="1em" height="1em">
+            $if(it.icon)$
-                <use href="/symbols.svg#icon-$it.icon$"></use>
+                <svg class="c-card__block o-icon" width="1em" height="1em">
-            </svg>
+                    <use href="/symbols.svg#icon-$it.icon$"></use>
-        $endif$
+                </svg>
-        <div class="c-card__block c-card__block--main">
+            $endif$
-            $if(it.subtitle)$
+            <div class="c-card__block c-card__block--main">
-                <strong class="u-db u-elp">$it.title$</strong>
+                $if(it.subtitle)$
-                <small class="u-db u-elp">$it.subtitle$</small>
+                    <strong class="u-db u-elp">$it.title$</strong>
-            $elseif(it.category)$
+                    <small class="u-db u-elp">$it.subtitle$</small>
-                <small class="u-db u-elp">$it.category$</small>
+                $elseif(it.category)$
-                <strong class="u-db u-elp">$it.title$</strong>
+                    <small class="u-db u-elp">$it.category$</small>
-            $elseif(it.date)$
+                    <strong class="u-db u-elp">$it.title$</strong>
-                <time datetime="$it.date.yyyy_mm_dd$">
+                $elseif(it.date)$
-                    <small class="u-dn@sm-hi">
+                    <time datetime="$it.date.yyyy_mm_dd$">
-                        $it.date.short$
+                        <small class="u-dn@sm-hi">
-                    </small>
+                            $it.date.short$
-                    <small class="u-dn@sm-lo">
+                        </small>
-                        $it.date.long$
+                        <small class="u-dn@sm-lo">
-                    </small>
+                            $it.date.long$
-                </time>
+                        </small>
-                <strong class="u-db u-elp">$it.title$</strong>
+                    </time>
-            $else$
+                    <strong class="u-db u-elp">$it.title$</strong>
-                $it.title$
+                $else$
+                    $it.title$
+                $endif$
+            </div>
+            $if(it.post_icon)$
+                <svg class="c-card__block o-icon" width="1em" height="1em">
+                    <use href="/symbols.svg#icon-$it.post_icon$"></use>
+                </svg>
            $endif$
        </div>
-        $if(it.post_icon)$
-            <svg class="c-card__block o-icon" width="1em" height="1em">
-                <use href="/symbols.svg#icon-$it.post_icon$"></use>
-            </svg>
-        $endif$
    </a>
 $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)$
    <a href="$it.url.rel$" class="l-card-list__card c-card">
-        $if(it.indicator)$
+        <div class="c-card__row">
-            <div class="c-card__block c-card__block--indicator"></div>
+            $if(it.indicator)$
-        $endif$
+                <div class="c-card__block c-card__block--indicator"></div>
-        $if(it.icon)$
+            $endif$
-            <svg class="c-card__block o-icon" width="1em" height="1em">
+            $if(it.icon)$
-                <use href="/symbols.svg#icon-$it.icon$"></use>
+                <svg class="c-card__block o-icon" width="1em" height="1em">
-            </svg>
+                    <use href="/symbols.svg#icon-$it.icon$"></use>
-        $endif$
+                </svg>
-        <div class="c-card__block c-card__block--main">
+            $endif$
-            $it.title$
+            <div class="c-card__block c-card__block--main">
-        </div>
+                $it.title$
-        $if(it.subtitle)$
-            <div class="c-card__block u-fs0">
-                <small>
-                    $it.subtitle$
-                </small>
-            </div>
-        $elseif(it.category)$
-            <div class="c-card__block u-fs0">
-                <small>
-                    $it.category$
-                </small>
            </div>
-        $elseif(it.date)$
+            $if(it.subtitle)$
-            <time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0">
+                <div class="c-card__block u-fs0">
-                <small class="u-dn@sm-hi">
+                    <small>
-                    $it.date.short$
+                        $it.subtitle$
-                </small>
+                    </small>
-                <small class="u-dn@sm-lo">
+                </div>
-                    $it.date.long$
+            $elseif(it.category)$
-                </small>
+                <div class="c-card__block u-fs0">
-            </time>
+                    <small>
-        $endif$
+                        $it.category$
-        $if(it.post_icon)$
+                    </small>
-            <svg class="c-card__block o-icon" width="1em" height="1em">
+                </div>
-                <use href="/symbols.svg#icon-$it.post_icon$"></use>
+            $elseif(it.date)$
-            </svg>
+                <time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0">
-        $endif$
+                    <small class="u-dn@sm-hi">
+                        $it.date.short$
+                    </small>
+                    <small class="u-dn@sm-lo">
+                        $it.date.long$
+                    </small>
+                </time>
+            $endif$
+            $if(it.post_icon)$
+                <svg class="c-card__block o-icon" width="1em" height="1em">
+                    <use href="/symbols.svg#icon-$it.post_icon$"></use>
+                </svg>
+            $endif$
+        </div>
    </a>
 $endif$
author	Volpeon <git@volpeon.ink>	2021-12-16 18:29:18 +0100
committer	Volpeon <git@volpeon.ink>	2021-12-16 18:29:18 +0100
commit	5f4cb1fd8b84e69092ac56a643b1618006f0442c (patch)
tree	1d2388ad69091163da498334e2de5c94c4e74dc7
parent	Fix it for real (diff)
download	volpeon.ink-5f4cb1fd8b84e69092ac56a643b1618006f0442c.tar.gz volpeon.ink-5f4cb1fd8b84e69092ac56a643b1618006f0442c.tar.bz2 volpeon.ink-5f4cb1fd8b84e69092ac56a643b1618006f0442c.zip

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 @@
30	), 'light');	30	), 'light');
31		31
32	@include component(namespace()) {	32	@include component(namespace()) {
33	display: flex;	33	display: block;
34	position: relative;	34	position: relative;
35	align-items: center;
36	padding-right: calc(.5 * #{prop(--dims --pad-x)});
37	padding-left: calc(.5 * #{prop(--dims --pad-x)});
38	transform: translateY(0);	35	transform: translateY(0);
39	transition: transform .2s, background-color .2s, color .2s;	36	transition: transform .2s, background-color .2s, color .2s;
40	background-color: prop(--colors --bg);	37	background-color: prop(--colors --bg);
@@ -81,6 +78,10 @@
81	color: prop(--colors --hover --fg);	78	color: prop(--colors --hover --fg);
82	}	79	}
83	}	80	}
		81
		82	/*@include element('row') {
		83	border-top-color: transparent;
		84	}*/
84	}	85	}
85	}	86	}
86		87
@@ -92,9 +93,41 @@
92	}	93	}
93	}	94	}
94		95
		96	@include element('row') {
		97	display: flex;
		98	align-items: center;
		99	padding: prop(--dims --pad-y) prop(--dims --pad-x);
		100	gap: prop(--dims --pad-x);
		101	//transition: border-top-color .2s;
		102
		103	@include modifier('flush') {
		104	padding: 0;
		105	}
		106
		107	/*@include next-twin-element {
		108	border-top: 1px solid prop(--colors --border);
		109	}*/
		110	}
		111
		112	@include element('thumbnail') {
		113	position: relative;
		114	width: 100%;
		115	height: 2em;
		116	padding-top: 40%;
		117	}
		118
		119	@include element('thumbnail-img') {
		120	display: block;
		121	position: absolute;
		122	top: 0;
		123	left: 0;
		124	width: 100%;
		125	height: 100%;
		126	object-fit: cover;
		127	}
		128
95	@include element('block') {	129	@include element('block') {
96	flex: 0 0 auto;	130	flex: 0 0 auto;
97	padding: prop(--dims --pad-y) calc(.5 * #{prop(--dims --pad-x)});
98	overflow: hidden;	131	overflow: hidden;
99	text-overflow: ellipsis;	132	text-overflow: ellipsis;
100		133


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 @@
10	font-size: 1rem;	10	font-size: 1rem;
11		11
12	@include element('cards') {	12	@include element('cards') {
13	margin-top: $line-height * .625rem;	13	display: flex;
14	filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});	14	flex-direction: column;
		15	gap: 2px;
		16	margin-top: $line-height * .625rem;
		17	filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
15		18
16	@include modifier('grid') {	19	@include modifier('grid', 'gallery') {
17	display: grid;	20	display: grid;
18	grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));	21	grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
19	gap: 6px;	22	}
20		23
21	@include element('card') {	24	@include modifier('grid') {
22	@include next-twin-element {	25	gap: 6px;
23	margin-top: 0;	26	}
24	}	27
25	}	28	@include modifier('gallery') {
		29	gap: 30px;
26	}	30	}
27		31
28	@media print {	32	@media print {
@@ -32,10 +36,6 @@
32		36
33	@include element('card') {	37	@include element('card') {
34	box-shadow: none;	38	box-shadow: none;
35
36	@include next-twin-element {
37	margin-top: 2px;
38	}
39	}	39	}
40	}	40	}
41	}	41	}


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 @@
1	---	1	---
2	title: Eeveelutions	2	title: Eeveelutions
3	date: 2021-08-19	3	date: 2021-08-19
4	preview: preview.png	4	thumbnail: preview.png
5	---	5	---
6		6
7	![](eevee.png)	7	![](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 @@
1	---	1	---
2	title: Lazy Firefox	2	title: Lazy Firefox
3	date: 2021-10-16	3	date: 2021-10-16
4	preview: firefox_lazy.png	4	thumbnail: firefox_lazy.png
5	---	5	---
6		6
7	![](firefox_lazy.png)	7	![](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 @@
1	---	1	---
2	title: Lycanroc Avatar	2	title: Lycanroc Avatar
3	date: 2021-10-19	3	date: 2021-10-19
4	preview: ava.png	4	thumbnail: ava.png
5	---	5	---
6		6
7	![](ava.png)	7	![](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 @@
1	---	1	---
2	title: Reference Sheet Views	2	title: Reference Sheet Views
3	date: 2021-10-06	3	date: 2021-10-06
4	preview: preview.png	4	thumbnail: preview.png
5	---	5	---
6		6
7	![](bottom.png)	7	![](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 @@
1	---	1	---
2	title: \"Spooky\" Avatar	2	title: \"Spooky\" Avatar
3	date: 2021-10-07	3	date: 2021-10-07
4	preview: ava.png	4	thumbnail: ava.png
5	---	5	---
6		6
7	![](ava.png)	7	![](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 @@
1	---	1	---
2	title: Spooky Avatar	2	title: Spooky Avatar
3	date: 2021-10-14	3	date: 2021-10-14
4	preview: ava.png	4	thumbnail: ava.png
5	---	5	---
6		6
7	![](ava.png)	7	![](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 @@
1	---	1	---
2	title: Drawings	2	title: Drawings
3	icon: image	3	icon: image
4	list_layout: grid	4	list_layout: gallery
5	list_post_icon: arrow-right	5	list_post_icon: arrow-right
6	list_order: date_desc	6	list_order: date_desc
7	feed: true	7	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 @@
1	---	1	---
2	title: Blobfox	2	title: Blobfox
3	date: 2020-09-04	3	date: 2020-09-04
4	preview: preview.jpg	4	thumbnail: preview.jpg
5	---	5	---
6		6
7	![](screenshot.png)	7	![](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 @@
1	---	1	---
2	title: BunHD	2	title: BunHD
3	date: 2019-09-30	3	date: 2019-09-30
4	preview: preview.png	4	thumbnail: preview.png
5	---	5	---
6		6
7	![](screenshot.png)	7	![](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 @@
1	---	1	---
2	title: Emojis	2	title: Emojis
3	icon: smile	3	icon: smile
4	list_layout: grid	4	list_layout: gallery
5	list_post_icon: arrow-right	5	list_post_icon: arrow-right
6	list_order: date_desc	6	list_order: date_desc
7	feed: true	7	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 @@
1	---	1	---
2	title: vlpn	2	title: vlpn
3	date: 2021-07-23	3	date: 2021-07-23
4	preview: preview.png	4	thumbnail: preview.png
5	---	5	---
6		6
7	![](preview.png)	7	![](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 @@
1	---	1	---
2	title: Projects	2	title: Projects
3	position: 2	3	position: 2
4	list_layout: grid	4	list_layout: gallery
		5	list_limit: 4
5	feed: true	6	feed: true
6	---	7	---
7		8
8	A selection of projects I wasn't too lazy to create a page for.	9	A selection of projects I wasn't too lazy to create a page for.
9	You can find more projects on [git.vulpes.one](https://git.vulpes.one/).	10	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)
187	subtitle = p.subtitle,	187	subtitle = p.subtitle,
188	date = p.date,	188	date = p.date,
189	url = p.url,	189	url = p.url,
		190	thumbnail = p.thumbnail,
190	icon = p.icon or meta.icon,	191	icon = p.icon or meta.icon,
191	post_icon = meta.list_post_icon,	192	post_icon = meta.list_post_icon,
192	indicator = meta.list_read_indicators,	193	indicator = meta.list_read_indicators,
@@ -202,6 +203,7 @@ function generate_list(meta)
202	subtitle = p.subtitle,	203	subtitle = p.subtitle,
203	date = p.date,	204	date = p.date,
204	url = p.url,	205	url = p.url,
		206	thumbnail = p.thumbnail,
205	icon = p.icon or cat.icon,	207	icon = p.icon or cat.icon,
206	post_icon = cat.list_post_icon or meta.list_post_icon,	208	post_icon = cat.list_post_icon or meta.list_post_icon,
207	indicator = cat.list_read_indicators,	209	indicator = cat.list_read_indicators,
@@ -233,6 +235,7 @@ function generate_list(meta)
233	subtitle = p.subtitle,	235	subtitle = p.subtitle,
234	category = c.title,	236	category = c.title,
235	url = p.url,	237	url = p.url,
		238	thumbnail = p.thumbnail,
236	icon = p.icon or c.icon,	239	icon = p.icon or c.icon,
237	post_icon = c.list_post_icon or cat.list_post_icon,	240	post_icon = c.list_post_icon or cat.list_post_icon,
238	indicator = c.list_read_indicators,	241	indicator = c.list_read_indicators,
@@ -293,9 +296,9 @@ function process(global, meta)
293	end	296	end
294	end	297	end
295		298
296	if meta.preview then	299	if meta.thumbnail then
297	meta.preview = make_absolute(pandoc.utils.stringify(meta.preview), meta.file_out)	300	meta.thumbnail = make_absolute(pandoc.utils.stringify(meta.thumbnail), meta.file_out)
298	meta.preview = resolve_url(global.site.url, global.file_out, meta.preview)	301	meta.thumbnail = resolve_url(global.site.url, global.file_out, meta.thumbnail)
299	end	302	end
300		303
301	if meta.menus and meta.menus.main then	304	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$
8	$for(list)$	8	$for(list)$
9	<section>	9	<section>
10	<h2 class="s-invisible-links">	10	<h2 class="s-invisible-links">
11	<a href="$it.url.rel$">$it.title$</a>	11	<a href="$it.url.rel$">
		12	$it.title$
		13	$if(it.omitted)$→$endif$
		14	</a>
12	</h2>	15	</h2>
13	$if(it.description)$	16	$if(it.description)$
14	<div class="s-small s-colored-links">$it.description$</div>	17	<div class="s-small s-colored-links">$it.description$</div>
@@ -17,6 +20,10 @@ $body$
17	<div class="l-card-list__cards l-card-list__cards--grid">	20	<div class="l-card-list__cards l-card-list__cards--grid">
18	$it.items:partials/grid_card()$	21	$it.items:partials/grid_card()$
19	</div>	22	</div>
		23	$elseif(it.layout.is_gallery)$
		24	<div class="l-card-list__cards l-card-list__cards--gallery">
		25	$it.items:partials/gallery_card()$
		26	</div>
20	$else$	27	$else$
21	<div class="l-card-list__cards">	28	<div class="l-card-list__cards">
22	$it.items:partials/list_card()$	29	$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$
9	<div class="l-card-list__cards l-card-list__cards--grid">	9	<div class="l-card-list__cards l-card-list__cards--grid">
10	$list:partials/grid_card()$	10	$list:partials/grid_card()$
11	</div>	11	</div>
		12	$elseif(list_layout.is_gallery)$
		13	<div class="l-card-list__cards l-card-list__cards--gallery">
		14	$list:partials/gallery_card()$
		15	</div>
12	$else$	16	$else$
13	<div class="l-card-list__cards">	17	<div class="l-card-list__cards">
14	$list:partials/list_card()$	18	$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 @@
		1	$if(it.url)$
		2	<a href="$it.url.rel$" class="l-card-list__card c-card">
		3	$if(it.thumbnail)$
		4	<div class="c-card__row c-card__row--flush">
		5	<div class="c-card__thumbnail">
		6	<img class="c-card__thumbnail-img" src="$it.thumbnail.rel$" />
		7	</div>
		8	</div>
		9	$endif$
		10	<div class="c-card__row">
		11	$if(it.indicator)$
		12	<div class="c-card__block c-card__block--indicator"></div>
		13	$endif$
		14	$if(it.icon)$
		15	<svg class="c-card__block o-icon" width="1em" height="1em">
		16	<use href="/symbols.svg#icon-$it.icon$"></use>
		17	</svg>
		18	$endif$
		19	<div class="c-card__block c-card__block--main">
		20	$if(it.subtitle)$
		21	<strong class="u-db u-elp">$it.title$</strong>
		22	<small class="u-db u-elp">$it.subtitle$</small>
		23	$elseif(it.category)$
		24	<small class="u-db u-elp">$it.category$</small>
		25	<strong class="u-db u-elp">$it.title$</strong>
		26	$elseif(it.date)$
		27	<time datetime="$it.date.yyyy_mm_dd$">
		28	<small class="u-dn@sm-hi">
		29	$it.date.short$
		30	</small>
		31	<small class="u-dn@sm-lo">
		32	$it.date.long$
		33	</small>
		34	</time>
		35	<strong class="u-db u-elp">$it.title$</strong>
		36	$else$
		37	$it.title$
		38	$endif$
		39	</div>
		40	$if(it.post_icon)$
		41	<svg class="c-card__block o-icon" width="1em" height="1em">
		42	<use href="/symbols.svg#icon-$it.post_icon$"></use>
		43	</svg>
		44	$endif$
		45	</div>
		46	</a>
		47	$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 @@
1	$if(it.url)$	1	$if(it.url)$
2	<a href="$it.url.rel$" class="l-card-list__card c-card">	2	<a href="$it.url.rel$" class="l-card-list__card c-card">
3	$if(it.indicator)$	3	<div class="c-card__row">
4	<div class="c-card__block c-card__block--indicator"></div>	4	$if(it.indicator)$
5	$endif$	5	<div class="c-card__block c-card__block--indicator"></div>
6	$if(it.icon)$	6	$endif$
7	<svg class="c-card__block o-icon" width="1em" height="1em">	7	$if(it.icon)$
8	<use href="/symbols.svg#icon-$it.icon$"></use>	8	<svg class="c-card__block o-icon" width="1em" height="1em">
9	</svg>	9	<use href="/symbols.svg#icon-$it.icon$"></use>
10	$endif$	10	</svg>
11	<div class="c-card__block c-card__block--main">	11	$endif$
12	$if(it.subtitle)$	12	<div class="c-card__block c-card__block--main">
13	<strong class="u-db u-elp">$it.title$</strong>	13	$if(it.subtitle)$
14	<small class="u-db u-elp">$it.subtitle$</small>	14	<strong class="u-db u-elp">$it.title$</strong>
15	$elseif(it.category)$	15	<small class="u-db u-elp">$it.subtitle$</small>
16	<small class="u-db u-elp">$it.category$</small>	16	$elseif(it.category)$
17	<strong class="u-db u-elp">$it.title$</strong>	17	<small class="u-db u-elp">$it.category$</small>
18	$elseif(it.date)$	18	<strong class="u-db u-elp">$it.title$</strong>
19	<time datetime="$it.date.yyyy_mm_dd$">	19	$elseif(it.date)$
20	<small class="u-dn@sm-hi">	20	<time datetime="$it.date.yyyy_mm_dd$">
21	$it.date.short$	21	<small class="u-dn@sm-hi">
22	</small>	22	$it.date.short$
23	<small class="u-dn@sm-lo">	23	</small>
24	$it.date.long$	24	<small class="u-dn@sm-lo">
25	</small>	25	$it.date.long$
26	</time>	26	</small>
27	<strong class="u-db u-elp">$it.title$</strong>	27	</time>
28	$else$	28	<strong class="u-db u-elp">$it.title$</strong>
29	$it.title$	29	$else$
		30	$it.title$
		31	$endif$
		32	</div>
		33	$if(it.post_icon)$
		34	<svg class="c-card__block o-icon" width="1em" height="1em">
		35	<use href="/symbols.svg#icon-$it.post_icon$"></use>
		36	</svg>
30	$endif$	37	$endif$
31	</div>	38	</div>
32	$if(it.post_icon)$
33	<svg class="c-card__block o-icon" width="1em" height="1em">
34	<use href="/symbols.svg#icon-$it.post_icon$"></use>
35	</svg>
36	$endif$
37	</a>	39	</a>
38	$endif$	40	$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 @@
1	$if(it.url)$	1	$if(it.url)$
2	<a href="$it.url.rel$" class="l-card-list__card c-card">	2	<a href="$it.url.rel$" class="l-card-list__card c-card">
3	$if(it.indicator)$	3	<div class="c-card__row">
4	<div class="c-card__block c-card__block--indicator"></div>	4	$if(it.indicator)$
5	$endif$	5	<div class="c-card__block c-card__block--indicator"></div>
6	$if(it.icon)$	6	$endif$
7	<svg class="c-card__block o-icon" width="1em" height="1em">	7	$if(it.icon)$
8	<use href="/symbols.svg#icon-$it.icon$"></use>	8	<svg class="c-card__block o-icon" width="1em" height="1em">
9	</svg>	9	<use href="/symbols.svg#icon-$it.icon$"></use>
10	$endif$	10	</svg>
11	<div class="c-card__block c-card__block--main">	11	$endif$
12	$it.title$	12	<div class="c-card__block c-card__block--main">
13	</div>	13	$it.title$
14	$if(it.subtitle)$
15	<div class="c-card__block u-fs0">
16	<small>
17	$it.subtitle$
18	</small>
19	</div>
20	$elseif(it.category)$
21	<div class="c-card__block u-fs0">
22	<small>
23	$it.category$
24	</small>
25	</div>	14	</div>
26	$elseif(it.date)$	15	$if(it.subtitle)$
27	<time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0">	16	<div class="c-card__block u-fs0">
28	<small class="u-dn@sm-hi">	17	<small>
29	$it.date.short$	18	$it.subtitle$
30	</small>	19	</small>
31	<small class="u-dn@sm-lo">	20	</div>
32	$it.date.long$	21	$elseif(it.category)$
33	</small>	22	<div class="c-card__block u-fs0">
34	</time>	23	<small>
35	$endif$	24	$it.category$
36	$if(it.post_icon)$	25	</small>
37	<svg class="c-card__block o-icon" width="1em" height="1em">	26	</div>
38	<use href="/symbols.svg#icon-$it.post_icon$"></use>	27	$elseif(it.date)$
39	</svg>	28	<time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0">
40	$endif$	29	<small class="u-dn@sm-hi">
		30	$it.date.short$
		31	</small>
		32	<small class="u-dn@sm-lo">
		33	$it.date.long$
		34	</small>
		35	</time>
		36	$endif$
		37	$if(it.post_icon)$
		38	<svg class="c-card__block o-icon" width="1em" height="1em">
		39	<use href="/symbols.svg#icon-$it.post_icon$"></use>
		40	</svg>
		41	$endif$
		42	</div>
41	</a>	43	</a>
42	$endif$	44	$endif$