From 789a593987be88bc3e16b8ceb7357c24ef9e5aa2 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sun, 14 Nov 2021 16:32:43 +0100
Subject: Optimized layout structure

---
 assets/css/_basics.scss                 |  2 ++
 assets/css/components/_header.scss      |  4 +++
 templates/base.html                     |  2 +-
 templates/layouts/categorized_list.html | 48 ++++++++++++++++-----------------
 templates/layouts/list.html             | 30 ++++++++++-----------
 templates/layouts/page.html             | 18 ++++++-------
 templates/layouts/redirect.html         |  8 +++---
 7 files changed, 55 insertions(+), 57 deletions(-)

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index b9096e9..4d4ecc6 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -37,6 +37,8 @@ body {
 }
 
 main {
+    width: 100%;
+    
     @include iro-responsive-env(('sm', 'md')) {
         font-size: iro-responsive-set((1rem, 1 / 16 * 18rem));
     }
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index 341be75..a59c039 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -64,5 +64,9 @@
             width:  prop(--dims --icon);
             height: prop(--dims --icon);
         }
+
+        @include media('>=lg') {
+            position: absolute;
+        }
     }
 }
diff --git a/templates/base.html b/templates/base.html
index 9f439ed..0cfec50 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -65,7 +65,7 @@
         $endif$
     </nav>
         
-    <main>
+    <main class="l-container l-container--pad-x l-container--pad-y l-container--content">
         $if(layout.is_categorized_list)$
 ${layouts/categorized_list()}
         $elseif(layout.is_list)$
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 256e9de..20c0ee5 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -1,29 +1,27 @@
-<section class="l-container l-container--pad-x l-container--pad-y l-container--content">
-    <div class="s-headlines s-colored-links">
-        <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
+<div class="s-headlines s-colored-links">
+    <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
 
 $body$
-    </div>
+</div>
 
-    <div class="c-card-list">
-        $for(list)$
-            <header class="c-card-list__category-header">
-                <h2 class="c-card-list__category-title">
-                    <a href="$it.url.rel$">$it.title$</a>
-                </h2>
-                $if(it.content)$
-                    <small class="c-card-list__category-subtitle">$it.content$</small>
-                $endif$
-            </header>
-            $if(it.grid)$
-                <div class="c-card-list__category-content c-card-list__category-content--grid">
-                    $it.items:partials/grid_card()$
-                </div>
-            $else$
-                <div class="c-card-list__category-content">
-                    $it.items:partials/list_card()$
-                </div>
+<div class="c-card-list">
+    $for(list)$
+        <header class="c-card-list__category-header">
+            <h2 class="c-card-list__category-title">
+                <a href="$it.url.rel$">$it.title$</a>
+            </h2>
+            $if(it.content)$
+                <small class="c-card-list__category-subtitle">$it.content$</small>
             $endif$
-        $endfor$
-    </div>
-</section>
+        </header>
+        $if(it.grid)$
+            <div class="c-card-list__category-content c-card-list__category-content--grid">
+                $it.items:partials/grid_card()$
+            </div>
+        $else$
+            <div class="c-card-list__category-content">
+                $it.items:partials/list_card()$
+            </div>
+        $endif$
+    $endfor$
+</div>
diff --git a/templates/layouts/list.html b/templates/layouts/list.html
index 7a9d573..ff29314 100644
--- a/templates/layouts/list.html
+++ b/templates/layouts/list.html
@@ -1,21 +1,19 @@
-<section class="l-container l-container--pad-x l-container--pad-y l-container--content">
-    <div class="s-headlines s-colored-links">
-        <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
+<div class="s-headlines s-colored-links">
+    <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
 
 $body$
-    </div>
+</div>
 
-    <div class="c-card-list">
-        $if(list_grid)$
-            <div class="c-card-list__category-content c-card-list__category-content--grid">
-                $list:partials/grid_card()$
-            </div>
-        $else$
-            <div class="c-card-list__category-content">
-                $list:partials/list_card()$
-            </div>
-        $endif$
-    </div>
-</section>
+<div class="c-card-list">
+    $if(list_grid)$
+        <div class="c-card-list__category-content c-card-list__category-content--grid">
+            $list:partials/grid_card()$
+        </div>
+    $else$
+        <div class="c-card-list__category-content">
+            $list:partials/list_card()$
+        </div>
+    $endif$
+</div>
 
 
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index f1060ca..f6d3b53 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,13 +1,11 @@
-<div class="s-body">
-    <section class="l-container l-container--pad-x l-container--pad-y l-container--content s-colored-links s-headlines">
-        $if(date)$
-            <div class="s-body__meta">
-                $date.long$
-            </div>
-        $endif$
+<div class="s-body s-colored-links s-headlines">
+    $if(date)$
+        <div class="s-body__meta">
+            $date.long$
+        </div>
+    $endif$
 
-        <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
+    <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
 
-    $body$
-    </section>
+$body$
 </div>
diff --git a/templates/layouts/redirect.html b/templates/layouts/redirect.html
index a51d47e..457b4fe 100644
--- a/templates/layouts/redirect.html
+++ b/templates/layouts/redirect.html
@@ -1,6 +1,4 @@
-<div class="s-body">
-    <section class="l-container l-container--pad-x l-container--pad-y l-container--content s-colored-links s-headlines">
-        <h1 class="u-mt0"><span class="s-headlines__title-inner">Redirect</span></h1>
-        <p>This page should redirect you to <a href="$url.full$">$url.full$</a> in 3 seconds.</p>
-    </section>
+<div class="s-body s-colored-links s-headlines">
+    <h1 class="u-mt0"><span class="s-headlines__title-inner">Redirect</span></h1>
+    <p>This page should redirect you to <a href="$url.full$">$url.full$</a> in 3 seconds.</p>
 </div>
-- 
cgit v1.2.3-54-g00ecf