From 80716c79a7db19d6d95070125e1af7946a9849ec Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Tue, 28 Dec 2021 21:18:02 +0100
Subject: Support for more complex layouts

---
 assets/css/_basics.scss                 |  2 +-
 assets/css/components/_header.scss      |  9 ++---
 templates/base.html                     | 14 +++----
 templates/layouts/categorized_list.html | 68 +++++++++++++++++----------------
 templates/layouts/gallery.html          | 11 ++++++
 templates/layouts/list.html             | 28 +++++++-------
 templates/layouts/page.html             |  2 +-
 templates/layouts/redirect.html         |  2 +-
 8 files changed, 74 insertions(+), 62 deletions(-)
 create mode 100644 templates/layouts/gallery.html

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index f2b2624..9619862 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -31,7 +31,7 @@ body {
     box-sizing: border-box;
     min-height: 100%;
     margin:     0;
-    padding:    2px;
+    padding:    0;
 }
 
 main {
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index 15fa5a1..56d09cd 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -15,6 +15,7 @@
             --height: 4rem,
             --icon:   1.5rem,
             --pad-x:  calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))),
+            --gap:    2px,
         )
     ));
 
@@ -33,6 +34,8 @@
     @include component(namespace()) {
         display: flex;
         height:  prop(--dims --height);
+        padding: prop(--dims --gap);
+        gap:     prop(--dims --gap);
         filter:  drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
 
         @include element('item') {
@@ -43,10 +46,6 @@
             line-height:      prop(--dims --height);
             text-decoration:  none;
 
-            @include next-twin-element {
-                margin-left: 2px;
-            }
-
             &:hover,
             &:focus {
                 border-left-color: prop(--colors --hover --bg);
@@ -73,7 +72,7 @@
 
         @include media('>=lg') {
             position:      sticky;
-            top:           2px;
+            top:           0;
             margin-bottom: calc(-.75 * #{prop(--dims --height)});
         }
 
diff --git a/templates/base.html b/templates/base.html
index c1e1f4f..252069a 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -63,17 +63,17 @@
     </nav>
 
     <main>
-        <div class="l-container l-container--pad-x l-container--pad-y l-container--content">
-            $if(layout.is_categorized_list)$
+        $if(layout.is_categorized_list)$
 ${layouts/categorized_list()}
-            $elseif(layout.is_list)$
+        $elseif(layout.is_list)$
 ${layouts/list()}
-            $elseif(layout.is_redirect)$
+        $elseif(layout.is_redirect)$
 ${layouts/redirect()}
-            $else$
+        $elseif(layout.is_gallery)$
+${layouts/gallery()}
+        $else$
 ${layouts/page()}
-            $endif$
-        </div>
+        $endif$
     </main>
 
     <footer class="c-footer">
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index fd21017..76b8af1 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -1,39 +1,41 @@
-<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--content">        
+    <header class="s-headlines s-colored-links">
+        <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
 
 $body$
-</header>
+    </header>
 
-<div class="l-card-list">
-    $for(list)$
-        <section>
-            <h2 class="s-invisible-links">
-                <a href="$it.url.rel$">$it.title$</a>
-            </h2>
-            $if(it.description)$
-                <div class="s-small s-colored-links">$it.description$</div>
-            $endif$
-            <div class="l-card-list__cards l-card-list__cards--$it.layout.id$">
-                $if(it.layout.is_grid)$
-                    $it.items:partials/grid_card()$
-                $elseif(it.layout.is_gallery)$
-                    $it.items:partials/gallery_card()$
-                $else$
-                    $it.items:partials/list_card()$
+    <div class="l-card-list">
+        $for(list)$
+            <section>
+                <h2 class="s-invisible-links">
+                    <a href="$it.url.rel$">$it.title$</a>
+                </h2>
+                $if(it.description)$
+                    <div class="s-small s-colored-links">$it.description$</div>
                 $endif$
-                $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 class="l-card-list__cards l-card-list__cards--$it.layout.id$">
+                    $if(it.layout.is_grid)$
+                        $it.items:partials/grid_card()$
+                    $elseif(it.layout.is_gallery)$
+                        $it.items:partials/gallery_card()$
+                    $else$
+                        $it.items:partials/list_card()$
+                    $endif$
+                    $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" aria-hidden="true">
+                                    <use href="/symbols.svg#icon-arrow-right"></use>
+                                </svg>
                             </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$
+                        </a>
+                    $endif$
+                </div>
+            </section>
+        $endfor$
+    </div>
 </div>
diff --git a/templates/layouts/gallery.html b/templates/layouts/gallery.html
new file mode 100644
index 0000000..46c47a6
--- /dev/null
+++ b/templates/layouts/gallery.html
@@ -0,0 +1,11 @@
+<article class="s-body s-colored-links s-headlines $if(intro)$s-intro$endif$">
+    $if(date)$
+        <div class="s-body__meta">
+            $date.long$
+        </div>
+    $endif$
+
+    <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
+
+$body$
+</article>
diff --git a/templates/layouts/list.html b/templates/layouts/list.html
index 40d85f0..bc12805 100644
--- a/templates/layouts/list.html
+++ b/templates/layouts/list.html
@@ -1,19 +1,19 @@
-<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--content">      
+    <header class="s-headlines s-colored-links">
+        <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
 
 $body$
-</header>
+    </header>
 
-<div class="l-card-list">
-    <div class="l-card-list__cards l-card-list__cards--$list_layout.id$">
-        $if(list_layout.is_grid)$
-            $list:partials/grid_card()$
-        $elseif(list_layout.is_gallery)$
-            $list:partials/gallery_card()$
-        $else$
-            $list:partials/list_card()$
-        $endif$
+    <div class="l-card-list">
+        <div class="l-card-list__cards l-card-list__cards--$list_layout.id$">
+            $if(list_layout.is_grid)$
+                $list:partials/grid_card()$
+            $elseif(list_layout.is_gallery)$
+                $list:partials/gallery_card()$
+            $else$
+                $list:partials/list_card()$
+            $endif$
+        </div>
     </div>
 </div>
-
-
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index 46c47a6..e4078cc 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,4 +1,4 @@
-<article class="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--content s-body s-colored-links s-headlines $if(intro)$s-intro$endif$">
     $if(date)$
         <div class="s-body__meta">
             $date.long$
diff --git a/templates/layouts/redirect.html b/templates/layouts/redirect.html
index a62f4a2..1cfc67c 100644
--- a/templates/layouts/redirect.html
+++ b/templates/layouts/redirect.html
@@ -1,4 +1,4 @@
-<article class="s-body s-colored-links s-headlines">
+<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>
     <p>This page should redirect you to <a href="$url.full$">$url.full$</a> in 3 seconds.</p>
 </article>
-- 
cgit v1.2.3-54-g00ecf