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

---
 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 +-
 5 files changed, 62 insertions(+), 49 deletions(-)
 create mode 100644 templates/layouts/gallery.html

(limited to 'templates/layouts')

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-70-g09d2