From 8f373e6c6d3f9d322041ba4d949c1b0c39ae8ea0 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Fri, 8 Jan 2021 11:45:30 +0100
Subject: Added section link to the header in regular pages, improved template
 structure, improved CSS variable names, keep prefix for specific page items
 on mobile

---
 templates/base.html               | 14 +++++---------
 templates/layouts/dated_list.html | 37 ++++++++++++++++++++-----------------
 templates/layouts/index.html      | 28 ++++++++++++++++------------
 templates/layouts/page.html       | 32 ++++++++++++++++++++++----------
 4 files changed, 63 insertions(+), 48 deletions(-)

(limited to 'templates')

diff --git a/templates/base.html b/templates/base.html
index da3dec9..8682125 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -36,23 +36,19 @@
     <nav class="c-nav">
         <div class="c-nav__items l-container">
             <a class="c-nav__logo" href="/" title="$site.title$">$site.logo$</a>
-            $for(menus.main)$
+            $for(menus.main.items)$
                 <a class="c-nav__item $if(it.active)$c-nav__item--active$endif$" href="$it.url$">$it.label$</a>
             $endfor$
         </div>
     </nav>
         
-    <main class="c-page s-page l-container l-container--content l-container--pad-v">
-        <div class="c-page__content">
-            $if(section.is_index)$
+    $if(section.is_index)$
 ${layouts/index()}
-            $elseif(layout.is_dated_list)$
+    $elseif(layout.is_dated_list)$
 ${layouts/dated_list()}
-            $else$
+    $else$
 ${layouts/page()}
-            $endif$
-        </div>
-    </main>
+    $endif$
 </body>
 
 </html>
diff --git a/templates/layouts/dated_list.html b/templates/layouts/dated_list.html
index 0a279f0..8c5de69 100644
--- a/templates/layouts/dated_list.html
+++ b/templates/layouts/dated_list.html
@@ -1,22 +1,25 @@
-<h1 class="c-page__prefixed c-page__prefixed--h1">$title$</h1>
-
+<main class="c-page s-page l-container l-container--content l-container--pad-v">
+    <div class="c-page__content">
+        <h1 class="c-page__prefixed c-page__prefixed--h1">$title$</h1>
 $body$
 
-$if(categories)$
-    <ul class="c-hlist">
-        $for(categories)$
-            <li class="c-hlist__item"><strong>$it.key/uppercase$</strong> $it.value.name$</li>
-        $endfor$
-    </ul>
-$endif$
+        $if(categories)$
+            <ul class="c-hlist">
+                $for(categories)$
+                    <li class="c-hlist__item"><strong>$it.key/uppercase$</strong> $it.value.name$</li>
+                $endfor$
+            </ul>
+        $endif$
 
-$for(pages.by_year)$
-    <ul>
-        $for(it.value)$
-            <li class="c-page__prefixed c-page__prefixed--ref">
-                <a href="$it.url.rel$">$it.category.id/uppercase$ $it.date.yyyy_mm_dd$ - $it.title$</a>
-            </li>
+        $for(pages.by_year)$
+            <ul>
+                $for(it.value)$
+                    <li class="c-page__prefixed c-page__prefixed--ref">
+                        <a href="$it.url.rel$">$it.category.id/uppercase$ $it.date.yyyy_mm_dd$ - $it.title$</a>
+                    </li>
+                $endfor$
+            </ul>
         $endfor$
-    </ul>
-$endfor$
+    </div>
+</main>
 
diff --git a/templates/layouts/index.html b/templates/layouts/index.html
index 144d1ed..a1410f1 100644
--- a/templates/layouts/index.html
+++ b/templates/layouts/index.html
@@ -1,14 +1,16 @@
-<header class="c-hero u-hidden@sm-down" role="presentation">
-    $-- ' |      '     '             '     '            '   | |    |           '     '
-    $--   |      '     '             '       //\_       '   | ' .  |           '     '
-    $--  .|      '      ____,...,______..,_~``  -`..,   '   |    ' |           '     '
-    $--   |       _,~´"'  ,               .    ,~--´    '  _|  | . |~~.__      '     '
-    $-- | |    ,-"    _.-|~/  |..,____,) ,/,,"'         '_( | '    |)    )     '     '
-    $--  '|    \__,~"´   /:) /       |:\ \            ,~(    ) . | |  )   `,   '   _,--.
-    $-- ___\___.___:____(:/\_-,______\:.\_-,____.__\_.\______.__:___\__.___)_.___,/_____
-    $-- ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
-        
-    <pre class="c-hero__pre c-page__prefixed c-page__prefixed--pre u-mt0 u-hidden@sm-down">
+<main class="c-page s-page l-container l-container--content l-container--pad-v">
+    <div class="c-page__content">
+        <header class="c-hero u-hidden@sm-down" role="presentation">
+        $-- ' |      '     '             '     '            '   | |    |           '     '
+        $--   |      '     '             '       //\_       '   | ' .  |           '     '
+        $--  .|      '      ____,...,______..,_~``  -`..,   '   |    ' |           '     '
+        $--   |       _,~´"'  ,               .    ,~--´    '  _|  | . |~~.__      '     '
+        $-- | |    ,-"    _.-|~/  |..,____,) ,/,,"'         '_( | '    |)    )     '     '
+        $--  '|    \__,~"´   /:) /       |:\ \            ,~(    ) . | |  )   `,   '   _,--.
+        $-- ___\___.___:____(:/\_-,______\:.\_-,____.__\_.\______.__:___\__.___)_.___,/_____
+        $-- ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+            
+        <pre class="c-hero__pre c-page__prefixed c-page__prefixed--pre u-mt0 u-hidden@sm-down">
 ' |      '     '             '     '            '   | |    |           '     '  
   |      '     '             '       <strong>//\_</strong>       '   | ' .  |           '     '  
  .|      '      <strong>____,...,______..,_~``  -`..,</strong>   '   |    ' |           '     '  
@@ -17,9 +19,11 @@
  '|    <strong>\__,~"´   /:) /       |:\ \</strong>            ,~(    ) . | |  )   `,   '   _,--.
    \   .   :    <strong>(:/\_-,      \:.\_-,</strong>    .  \ .\      .  :   \  .   ) . ' ,/     </pre>
 
-</header>
+        </header>
 
 $body$
+    </div>
+</main>
 
 <template id="header-sm">
     $-- .|                     //\__      '  .'      |  . |           ' . ' 
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index 332a846..ee1a816 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,12 +1,24 @@
-<header class="c-page__header">
-    <h1 class="c-page__prefixed c-page__prefixed--h1 c-page__header__title">$title$</h1>
-    $if(date)$
-        <h2 class="c-page__header__meta">$date.yyyy_mm_dd$$if(category)$ in $category.name$$endif$</h2>
-    $elseif(category)$
-        <h2 class="c-page__header__meta">in $category.name$</h2>
-    $endif$
-</header>
+<main class="c-page l-container l-container--content l-container--pad-v">
+    <div class="c-page__content">
+        <header class="c-page__header">
+            $if(menus.main.active)$
+                <div class="c-page__prefixed c-page__prefixed--backref c-page__header__backlink">
+                    <a class="c-page__header__backlink__link" href="$menus.main.active.url$">
+                        $menus.main.active.label$
+                    </a>
+                </div>
+            $endif$
+            <h1 class="c-page__prefixed c-page__prefixed--h1 c-page__header__title">$title$</h1>
+            $if(date)$
+                <h2 class="c-page__header__meta">$date.yyyy_mm_dd$$if(category)$ in $category.name$$endif$</h2>
+            $elseif(category)$
+                <h2 class="c-page__header__meta">in $category.name$</h2>
+            $endif$
+        </header>
 
-<section>
+        <section class="s-page">
 $body$
-</section>
+        </section>
+    </div>
+</main>
+
-- 
cgit v1.2.3-54-g00ecf