Better indication if list items have been omitted

2 files changed, 10 insertions, 5 deletions

diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss
index 3bbcc44..5642374 100644
--- a/assets/css/layouts/_card-list.scss
+++ b/assets/css/layouts/_card-list.scss
@@ -14,6 +14,7 @@
             flex-direction: column;
             gap:            2px;
             margin-top:     $line-height * .625rem;
+            margin-bottom:  $line-height * .625rem;
             filter:         drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
 
             @include modifier('grid', 'gallery') {
@@ -26,7 +27,7 @@
             }
 
             @include modifier('gallery') {
-                gap: 30px;
+                gap: 20px;
             }
 
             @media print {
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 7bbfd8c..2f61f18 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -8,10 +8,7 @@ $body$
     $for(list)$
         <section>
             <h2 class="s-invisible-links">
-                <a href="$it.url.rel$">
-                    $it.title$
-                    $if(it.omitted)$→$endif$
-                </a>
+                <a href="$it.url.rel$">$it.title$</a>
             </h2>
             $if(it.description)$
                 <div class="s-small s-colored-links">$it.description$</div>
@@ -29,6 +26,13 @@ $body$
                     $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>
+                </div>
+            $endif$
         </section>
     $endfor$
 </div>