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;
-            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)$
         <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__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$
+        <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>
-        $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__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">
-            $it.title$
-        </div>
-        $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 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">
+                $it.title$
             </div>
-        $elseif(it.date)$
-            <time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0">
-                <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$
+            $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)$
+                <time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0">
+                    <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$