Re-implemented design via iro-design

1 files changed, 17 insertions, 20 deletions

diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 5e92395..7f94ff4 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -1,6 +1,6 @@
-<div class="l-container l-container--pad-x l-container--pad-y l-container--content">        
-    <header class="s-headlines s-colored-links">
-        <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
+<div class="l-container l-container--pad-x l-container--pad-y l-container--narrow">        
+    <header class="s-colored-links">
+        <h1 class="o-heading o-heading--xxl u-mt-0"><span class="o-heading__primary">$title$</span></h1>
 
 $body$
 
@@ -8,9 +8,9 @@ $body$
 
     $if(notoc)$$else$
         <nav class="c-hnav s-invisible-links">
-            $-- <h2 class="u-mt0">Sections:</h2>
+            $-- <h2 class="u-mt-0">Sections:</h2>
             $for(list)$
-                <a href="#$it.slug$"><small>$it.title$</small></a>
+                <small><a href="#$it.slug$">$it.title$</a></small>
             $endfor$
         </nav>
     $endif$
@@ -18,9 +18,18 @@ $body$
     <div class="l-card-list">
         $for(list)$
             <section>
-                <h2 class="s-invisible-links" id="$it.slug$">
-                    <a href="$it.url.rel$">$it.title$</a>
-                </h2>
+                <div class="l-media l-media--flush">
+                    <div class="l-media__block l-media__block--main">
+                        <h2 class="s-invisible-links" id="$it.slug$">
+                            <a href="$it.url.rel$">$it.title$</a>
+                        </h2>
+                    </div>
+                    $if(it.omitted)$
+                        <a class="l-media__block o-badge u-mt-auto" href="$it.url.rel$">
+                            $it.omitted$ more items <span class="u-ml-10">→</span>
+                        </a>
+                    $endif$
+                </div>
                 $if(it.description)$
                     <div class="s-small s-colored-links">$it.description$</div>
                 $endif$
@@ -32,18 +41,6 @@ $body$
                     $else$
                         $it.items:partials/list_card()$
                     $endif$
-                    $if(it.omitted)$
-                        <a href="$it.url.rel$" class="l-card-list__card c-card">
-                            <div class="c-card__row">
-                                <div class="c-card__block c-card__block--main">
-                                    $it.omitted$ more items in $it.title$
-                                </div>
-                                <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
-                                    <use href="/symbols.svg#icon-arrow-right"></use>
-                                </svg>
-                            </div>
-                        </a>
-                    $endif$
                 </div>
             </section>
         $endfor$