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/base.html                     | 46 ++++++++++++++++-----------------
 templates/layouts/categorized_list.html | 37 ++++++++++++--------------
 templates/layouts/list.html             |  6 ++---
 templates/layouts/page.html             |  6 ++---
 templates/layouts/redirect.html         |  4 +--
 templates/partials/gallery_card.html    | 26 +++++++++----------
 templates/partials/grid_card.html       | 24 ++++++++---------
 templates/partials/list_card.html       | 20 +++++++-------
 8 files changed, 82 insertions(+), 87 deletions(-)

(limited to 'templates')

diff --git a/templates/base.html b/templates/base.html
index 4d0be21..be796de 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -75,41 +75,39 @@ ${layouts/page()}
     </main>
 
     <footer class="c-footer">
-        <div class="l-container l-container--pad-y u-pb0" aria-hidden="true">
-            <pre class="c-footer__ascii u-dn@sm-lo">${partials/ascii_fox()}</pre>
-            <pre class="c-footer__ascii u-dn@sm-hi">${partials/ascii_fox_small()}</pre>
+        <div class="l-container l-container--pad-y u-pb-0" aria-hidden="true">
+            <pre class="c-footer__ascii u-d-none@sm-lo">${partials/ascii_fox()}</pre>
+            <pre class="c-footer__ascii u-d-none@sm-hi">${partials/ascii_fox_small()}</pre>
         </div>
     </footer>
 
-    <div class="c-lightbox">
-        <div class="c-lightbox__bg"></div>
-
-        <div class="c-lightbox__infobar">
-            <div class="o-badge c-lightbox__count"></div>
-
-            <button class="c-lightbox__close">
-                <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
+    <div class="o-backdrop js-lightbox u-d-none t-dark">
+        <div class="o-lightbox">
+            <button class="o-lightbox__close-btn o-action-button o-action-button--quiet o-action-button--round">
+                <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
                     <use href="/symbols.svg#icon-x"></use>
                 </svg>
             </button>
-        </div>
 
-        <button class="c-lightbox__prev">
-            <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
-                <use href="/symbols.svg#icon-chevron-left"></use>
-            </svg>
-        </button>
+            <img class="o-lightbox__img" />
 
-        <button class="c-lightbox__next">
-            <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
-                <use href="/symbols.svg#icon-chevron-right"></use>
-            </svg>
-        </button>
+            <button class="o-lightbox__prev-btn o-action-button o-action-button--quiet o-action-button--round">
+                <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
+                    <use href="/symbols.svg#icon-chevron-left"></use>
+                </svg>
+            </button>
 
-        <img class="c-lightbox__img" />
+            <button class="o-lightbox__next-btn o-action-button o-action-button--quiet o-action-button--round">
+                <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
+                    <use href="/symbols.svg#icon-chevron-right"></use>
+                </svg>
+            </button>
+
+            <footer class="o-lightbox__footer"></footer>
+        </div>
     </div>
 
-    <script src="/lightbox.js"></script>
+    <script src="/main.js"></script>
     <!--script src="/snow.js"></script-->
 </body>
 
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>
diff --git a/templates/partials/gallery_card.html b/templates/partials/gallery_card.html
index aa641da..386843f 100644
--- a/templates/partials/gallery_card.html
+++ b/templates/partials/gallery_card.html
@@ -1,7 +1,7 @@
 $if(it.url)$
 $if(it.thumbnail)$
     <a href="$it.url.rel$" class="l-card-list__card c-card">
-        <div class="c-card__row c-card__row--flush">
+        <div class="c-card__row l-media l-media--flush">
             <div class="c-card__thumbnail">
                 <img
                     class="c-card__thumbnail-img"
@@ -11,38 +11,38 @@ $if(it.thumbnail)$
                 />
             </div>
         </div>
-        <div class="c-card__row c-card__row--hidden">
+        <div class="c-card__row l-media c-card__row--hidden">
             $if(it.indicator)$
-                <div class="c-card__block c-card__block--indicator"></div>
+                <div class="c-card__indicator l-media__block"></div>
             $endif$
             $if(it.icon)$
-                <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
+                <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
                     <use href="/symbols.svg#icon-$it.icon$"></use>
                 </svg>
             $endif$
-            <div class="c-card__block c-card__block--main">
+            <div class="l-media__block l-media__block--main">
                 $if(it.subtitle)$
-                    <strong class="u-db u-elp">$it.title$</strong>
-                    <small class="u-db u-elp">$it.subtitle$</small>
+                    <strong class="u-d-block u-elp">$it.title$</strong>
+                    <small class="u-d-block 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>
+                    <small class="u-d-block u-elp">$it.category$</small>
+                    <strong class="u-d-block u-elp">$it.title$</strong>
                 $elseif(it.date)$
                     <time datetime="$it.date.yyyy_mm_dd$">
-                        <small class="u-dn@sm-hi">
+                        <small class="u-d-none@sm-hi">
                             $it.date.short$
                         </small>
-                        <small class="u-dn@sm-lo">
+                        <small class="u-d-none@sm-lo">
                             $it.date.long$
                         </small>
                     </time>
-                    <strong class="u-db u-elp">$it.title$</strong>
+                    <strong class="u-d-block 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" aria-hidden="true">
+                <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
                     <use href="/symbols.svg#icon-$it.post_icon$"></use>
                 </svg>
             $endif$
diff --git a/templates/partials/grid_card.html b/templates/partials/grid_card.html
index 1b7c000..b3763e4 100644
--- a/templates/partials/grid_card.html
+++ b/templates/partials/grid_card.html
@@ -1,37 +1,37 @@
 $if(it.url)$
     <a href="$it.url.rel$" class="l-card-list__card c-card">
-        <div class="c-card__row">
+        <div class="c-card__row l-media">
             $if(it.indicator)$
-                <div class="c-card__block c-card__block--indicator"></div>
+                <div class="c-card__indicator l-media__block"></div>
             $endif$
             $if(it.icon)$
-                <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
+                <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
                     <use href="/symbols.svg#icon-$it.icon$"></use>
                 </svg>
             $endif$
-            <div class="c-card__block c-card__block--main">
+            <div class="l-media__block l-media__block--main">
                 $if(it.subtitle)$
-                    <strong class="u-db u-elp">$it.title$</strong>
-                    <small class="u-db u-elp">$it.subtitle$</small>
+                    <strong class="u-d-block u-elp">$it.title$</strong>
+                    <small class="u-d-block 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>
+                    <small class="u-d-block u-elp">$it.category$</small>
+                    <strong class="u-d-block u-elp">$it.title$</strong>
                 $elseif(it.date)$
                     <time datetime="$it.date.yyyy_mm_dd$">
-                        <small class="u-dn@sm-hi">
+                        <small class="u-d-none@sm-hi">
                             $it.date.short$
                         </small>
-                        <small class="u-dn@sm-lo">
+                        <small class="u-d-none@sm-lo">
                             $it.date.long$
                         </small>
                     </time>
-                    <strong class="u-db u-elp">$it.title$</strong>
+                    <strong class="u-d-block 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" aria-hidden="true">
+                <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
                     <use href="/symbols.svg#icon-$it.post_icon$"></use>
                 </svg>
             $endif$
diff --git a/templates/partials/list_card.html b/templates/partials/list_card.html
index ef52cf4..af17725 100644
--- a/templates/partials/list_card.html
+++ b/templates/partials/list_card.html
@@ -1,41 +1,41 @@
 $if(it.url)$
     <a href="$it.url.rel$" class="l-card-list__card c-card">
-        <div class="c-card__row">
+        <div class="c-card__row l-media">
             $if(it.indicator)$
-                <div class="c-card__block c-card__block--indicator"></div>
+                <div class="c-card__indicator l-media__block"></div>
             $endif$
             $if(it.icon)$
-                <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
+                <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
                     <use href="/symbols.svg#icon-$it.icon$"></use>
                 </svg>
             $endif$
-            <div class="c-card__block c-card__block--main">
+            <div class="l-media__block l-media__block--main">
                 $it.title$
             </div>
             $if(it.subtitle)$
-                <div class="c-card__block u-fs0">
+                <div class="l-media__block u-fs0">
                     <small>
                         $it.subtitle$
                     </small>
                 </div>
             $elseif(it.category)$
-                <div class="c-card__block u-fs0">
+                <div class="l-media__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">
+                <time datetime="$it.date.yyyy_mm_dd$" class="l-media__block u-fs0">
+                    <small class="u-d-none@sm-hi">
                         $it.date.short$
                     </small>
-                    <small class="u-dn@sm-lo">
+                    <small class="u-d-none@sm-lo">
                         $it.date.long$
                     </small>
                 </time>
             $endif$
             $if(it.post_icon)$
-                <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
+                <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
                     <use href="/symbols.svg#icon-$it.post_icon$"></use>
                 </svg>
             $endif$
-- 
cgit v1.2.3-54-g00ecf