From 6c12cebac99f331961a0c91b9808d03f090a21a2 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Fri, 17 Dec 2021 16:07:10 +0100
Subject: Improved 'items omitted' link

---
 assets/css/components/_card.scss        | 15 +++++++++++-
 templates/layouts/categorized_list.html | 43 +++++++++++++++++++++++++++------
 2 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 5c2efa4..5d36e7e 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -33,7 +33,7 @@
         display:          block;
         position:         relative;
         transform:        translateY(0);
-        transition:       transform .2s, background-color .2s, color .2s;
+        transition:       transform .2s, background-color .2s, color .2s, border-color .2s;
         background-color: prop(--colors --bg);
         box-shadow:       prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
         color:            prop(--colors --fg);
@@ -93,6 +93,19 @@
             }
         }
 
+        @include modifier('outline') {
+            border:           1px solid prop(--colors --border);
+            background-color: transparent;
+
+            &:link,
+            &:visited {
+                &:hover,
+                &:focus {
+                    border-color: transparent;
+                }
+            }
+        }
+
         @include element('row') {
             display:     flex;
             align-items: center;
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 2f61f18..50555f8 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -16,21 +16,50 @@ $body$
             $if(it.layout.is_grid)$
                 <div class="l-card-list__cards l-card-list__cards--grid">
                     $it.items:partials/grid_card()$
+                    $if(it.omitted)$
+                        <a href="$it.url.rel$" class="l-card-list__card c-card c-card--outline">
+                            <div class="c-card__row">
+                                <div class="c-card__block c-card__block--main">
+                                    $it.omitted$ more items
+                                </div>
+                                <svg class="c-card__block o-icon" width="1em" height="1em">
+                                    <use href="/symbols.svg#icon-arrow-right"></use>
+                                </svg>
+                            </div>
+                        </a>
+                    $endif$
                 </div>
             $elseif(it.layout.is_gallery)$
                 <div class="l-card-list__cards l-card-list__cards--gallery">
                     $it.items:partials/gallery_card()$
+                    $if(it.omitted)$
+                        <a href="$it.url.rel$" class="l-card-list__card c-card c-card--outline">
+                            <div class="c-card__row">
+                                <div class="c-card__block c-card__block--main">
+                                    $it.omitted$ more items
+                                </div>
+                                <svg class="c-card__block o-icon" width="1em" height="1em">
+                                    <use href="/symbols.svg#icon-arrow-right"></use>
+                                </svg>
+                            </div>
+                        </a>
+                    $endif$
                 </div>
             $else$
                 <div class="l-card-list__cards">
                     $it.items:partials/list_card()$
-                </div>
-            $endif$
-            $if(it.omitted)$
-                <div class="s-small s-invisible-links">
-                    <p>
-                        <a href="$it.url.rel$">$it.omitted$ more items →</a>
-                    </p>
+                    $if(it.omitted)$
+                        <a href="$it.url.rel$" class="l-card-list__card c-card c-card--outline">
+                            <div class="c-card__row">
+                                <div class="c-card__block c-card__block--main">
+                                    $it.omitted$ more items
+                                </div>
+                                <svg class="c-card__block o-icon" width="1em" height="1em">
+                                    <use href="/symbols.svg#icon-arrow-right"></use>
+                                </svg>
+                            </div>
+                        </a>
+                    $endif$
                 </div>
             $endif$
         </section>
-- 
cgit v1.2.3-54-g00ecf