From 575278aba99139635adc3b1f9385befe57102541 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 11 Jun 2022 09:44:04 +0200
Subject: Re-implemented design via iro-design

---
 templates/layouts/categorized_list.html | 37 +++++++++++++++------------------
 templates/layouts/list.html             |  6 +++---
 templates/layouts/page.html             |  6 +++---
 templates/layouts/redirect.html         |  4 ++--
 4 files changed, 25 insertions(+), 28 deletions(-)

(limited to 'templates/layouts')

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$
diff --git a/templates/layouts/list.html b/templates/layouts/list.html
index bc12805..88102b9 100644
--- a/templates/layouts/list.html
+++ b/templates/layouts/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$
     </header>
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index ee7437d..324a01c 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,11 +1,11 @@
-<article class="l-container l-container--pad-x l-container--pad-y l-container--content s-body s-colored-links s-headlines $if(intro)$s-intro$endif$">
+<article class="l-container l-container--pad-x l-container--pad-y l-container--narrow s-body s-colored-links s-headings s-blockquotes s-code $if(intro)$s-intro$endif$">
     $if(date)$
-        <div class="o-badge s-body__meta">
+        <div class="o-badge s-body__meta u-mb-125">
             $date.long$
         </div>
     $endif$
 
-    <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
+    <h1 class="u-mt-0"><span class="s-headings__primary">$title$</span></h1>
 
 $body$
 </article>
diff --git a/templates/layouts/redirect.html b/templates/layouts/redirect.html
index 1cfc67c..9f78dec 100644
--- a/templates/layouts/redirect.html
+++ b/templates/layouts/redirect.html
@@ -1,4 +1,4 @@
-<article class="l-container l-container--pad-x l-container--pad-y l-container--content s-body s-colored-links s-headlines">
-    <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
+<article class="l-container l-container--pad-x l-container--pad-y l-container--narrow s-body s-colored-links s-headlines">
+    <h1 class="u-mt-0"><span class="s-headlines__title-inner">$title$</span></h1>
     <p>This page should redirect you to <a href="$url.full$">$url.full$</a> in 3 seconds.</p>
 </article>
-- 
cgit v1.2.3-70-g09d2