Added section link to the header in regular pages, improved template structure, improved CSS variable names, keep prefix for specific page items on mobile

10 files changed, 145 insertions, 96 deletions

diff --git a/.stylelintrc.json b/.stylelintrc.json
index 49f4e7f..58d0137 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -3,7 +3,7 @@
     "rules": {
         "indentation": 4,
         "number-leading-zero": "never",
-        "max-nesting-depth": 3,
+        "max-nesting-depth": 4,
         "selector-class-pattern": [
             "^[closu](-[a-z0-9]+)+(__[a-z0-9]+(-[a-z0-9]+)*)*(--[a-z0-9]+(-[a-z0-9]+)*)*(\\@[a-z0-9]+(-[a-z0-9]+)*)?$",
             { "resolveNestedSelectors": true }
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 1c46660..77b59b9 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -10,13 +10,13 @@ $content--h1--font-size: $font-size + 1;
 $subcontent--indent: 4ch;
 
 $container--pad-h: 2rem;
-$container--pad-h-sm: 1rem;
+$container--pad-h--sm: 1rem;
 $container--pad-v: $line-height * 2rem;
-$container--pad-v-sm: $line-height * 1rem;
+$container--pad-v--sm: $line-height * 1rem;
 
 $nav--font-size: $font-size - 1;
 $nav--item--spacing: 4ch;
-$nav--item--spacing-sm: 3ch;
+$nav--item--spacing--sm: 3ch;
 $nav--item--pad-h: 1ch;
 $nav--item--pad-v: .9em;
 
@@ -24,6 +24,9 @@ $page--item-prefix--max-chars: 3ch;
 $page--item-prefix--pad: 2ch;
 $page--item-prefix--width: $page--item-prefix--max-chars + $page--item-prefix--pad;
 
+$page--item-prefix--max-chars--sm: 2ch;
+$page--item-prefix--width--sm: $page--item-prefix--max-chars--sm + $page--item-prefix--pad;
+
 $breakpoints: (
     xs: 380px,
     sm: 700px,
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 6d087ad..dc33d1e 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -50,7 +50,7 @@
 
     @media (max-width: map-get($breakpoints, 'sm')) {
         &__item {
-            margin-left: $nav--item--spacing-sm - $nav--item--pad-h;
+            margin-left: $nav--item--spacing--sm - $nav--item--pad-h;
         }
     }
 
diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss
index a55bcb4..435d696 100644
--- a/assets/css/components/_page.scss
+++ b/assets/css/components/_page.scss
@@ -1,34 +1,4 @@
 .c-page {
-    &__header {
-        margin-bottom: $line-height * 1em;
-
-        &::after {
-            content: '--';
-            display: block;
-            margin-bottom: $line-height * -1em;
-            color: var(--fg-hi);
-            line-height: 2 * $line-height;
-        }
-
-        &__title {
-            margin-top: 0;
-        }
-
-        &__meta {
-            margin-top: 0;
-            color: var(--fg-hi);
-            font-weight: normal;
-        }
-    }
-
-    &__content {
-        padding-left: $page--item-prefix--width;
-
-        > :first-child {
-            margin-top: 0;
-        }
-    }
-
     &__prefixed {
         position: relative;
         margin-left: -1 * $page--item-prefix--width;
@@ -92,22 +62,75 @@
         }
 
         &--ref::before {
-            content: '->';
+            content: '|>';
+        }
+
+        &--backref::before {
+            content: '<|';
         }
     }
 
-    @media (max-width: map-get($breakpoints, 'sm')) {
-        &__content {
-            padding-left: 0;
+    &__header {
+        margin-bottom: $line-height * 1em;
+
+        &__title {
+            margin-top: 0;
+        }
+
+        &__backlink__link {
+            &:link,
+            &:visited {
+                color: var(--fg-hi);
+
+                &:hover {
+                    color: var(--link--hover--fg);
+                }
+            }
+        }
+
+        &__backlink + &__title {
+            margin-top: $line-height * 1em;
+        }
+
+        &__meta {
+            margin-top: 0;
+            color: var(--fg-hi);
+            font-weight: normal;
+        }
+    }
+
+    &__content {
+        padding-left: $page--item-prefix--width;
+
+        > :first-child {
+            margin-top: 0;
         }
+    }
 
+    @media (max-width: map-get($breakpoints, 'sm')) {
         &__prefixed {
             margin-left: 0;
-            padding-left: 0;
+            padding-left: $page--item-prefix--width--sm;
 
             &::before {
-                display: none;
+                width: $page--item-prefix--width--sm;
+                margin-left: -1 * $page--item-prefix--width--sm;
+            }
+
+            &--h1,
+            &--h2,
+            &--h3,
+            &--pre {
+                padding-left: 0;
+
+                &::before {
+                    display: none;
+                }
             }
         }
+
+        &__content {
+            padding-left: 0;
+        }
     }
 }
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index f0544f7..e99c62f 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -14,12 +14,12 @@
     }
 
     @media (max-width: map-get($breakpoints, 'sm')) {
-        padding-right: $container--pad-h-sm;
-        padding-left: $container--pad-h-sm;
+        padding-right: $container--pad-h--sm;
+        padding-left: $container--pad-h--sm;
 
         &--pad-v {
-            padding-top: $container--pad-v-sm;
-            padding-bottom: $container--pad-v-sm;
+            padding-top: $container--pad-v--sm;
+            padding-bottom: $container--pad-v--sm;
         }
     }
 }
diff --git a/scripts/metadata_filter.lua b/scripts/metadata_filter.lua
index 4abb716..fb7b3c9 100644
--- a/scripts/metadata_filter.lua
+++ b/scripts/metadata_filter.lua
@@ -137,15 +137,23 @@ function resolve_category(categories, category)
 end
 
 function create_main_menu_state(section, main_menu)
+    local active_item = nil
+
     for i = 1, #main_menu do
         local item = main_menu[i]
         local active = pandoc.utils.stringify(item.id) == section.id
         item.active = pandoc.MetaBool(active)
+        if active then
+            active_item = item
+        end
     end
 
-    return main_menu:filter(function(item)
-        return not item.hidden or item.active
-    end)
+    return pandoc.MetaMap({
+        items = main_menu:filter(function(item)
+            return not item.hidden or item.active
+        end),
+        active = active_item
+    })
 end
 
 function organize_subpages(pages)
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>
+