From 5f4cb1fd8b84e69092ac56a643b1618006f0442c Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Thu, 16 Dec 2021 18:29:18 +0100
Subject: Add thumbnails to cards

---
 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 +++++++++++++++++----------------
 5 files changed, 132 insertions(+), 70 deletions(-)
 create mode 100644 templates/partials/gallery_card.html

(limited to 'templates')

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$
-- 
cgit v1.2.3-54-g00ecf