Update

23 files changed, 252 insertions, 236 deletions

diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
index 8f8170c..e8e98d2 100644
--- a/assets/css/_utils.scss
+++ b/assets/css/_utils.scss
@@ -1,4 +1,4 @@
-@include utility('hidden') {
+@include utility('dn') {
     display: none;
 
     @each $breakpoint in map-keys($breakpoints) {
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 9b5fe86..71dc5d2 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -23,27 +23,29 @@ $subcontent--indent: 2em;
 $gray0: hsl(220, 0%, 6%);
 $gray1: hsl(220, 0%, 9%);
 $gray2: hsl(220, 0%, 15%);
-$gray3: hsl(220, 0%, 29%);
-$gray4: hsl(220, 0%, 54%);
-$gray5: hsl(220, 0%, 73%);
-$gray6: hsl(220, 0%, 100%);
+$gray3: hsl(220, 0%, 20%);
+$gray4: hsl(220, 0%, 33%);
+$gray5: hsl(220, 0%, 54%);
+$gray6: hsl(220, 0%, 73%);
+$gray7: hsl(220, 0%, 100%);
 
 @include store((
     --dims: (
         --outer:         4rem,
-        --outer-spacing: 2rem,
-        --spacing-y:     3rem,
+        --outer-spacing: 1.7rem,
+        --spacing-y:     4rem,
     ),
     --colors: (
         --bg-hi: $gray0, // Darker background
         --bg:    $gray1, // Background
         --bg-lo: $gray2, // Lighter background
     
-        --obj:   $gray3,
+        --obj-hi: $gray3,
+        --obj:    $gray4,
     
-        --fg-hi: $gray4, // Faint text
-        --fg:    $gray5, // Text
-        --fg-lo: $gray6, // Strong text
+        --fg-hi: $gray5, // Faint text
+        --fg:    $gray6, // Text
+        --fg-lo: $gray7, // Strong text
 
         --accent: (
             --h:     354,
@@ -68,11 +70,11 @@ $gray6: hsl(220, 0%, 100%);
     }
 }
 
-@include store((
+/* @include store((
     --dims: (
-        --outer:   4rem,
+        --outer: 3.5rem,
     ),
-), 'sm');
+), 'sm'); */
 
 :root {
     --heading--fg: var(--colors--fg-lo);
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 09b03b0..cb18810 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -15,7 +15,7 @@
     @include store((
         --dims: (
             --pad-x: 1em,
-            --pad-y: .6em
+            --pad-y: .7em
         )
     ), 'md');
 
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index c20bc22..c127d02 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -2,7 +2,7 @@
     @include store((
         --colors: (
             --fg:     prop(--colors --obj, $global: true),
-            --border: prop(--colors --bg-lo, $global: true),
+            --border: prop(--colors --obj-hi, $global: true),
         )
     ));
 
@@ -11,6 +11,8 @@
         align-items:     center;
         justify-content: space-between;
         height:          prop(--dims --outer, $global: true);
+        padding-right:   prop(--dims --outer, $global: true);
+        font-size:       1 / 16 * 15em;
 
         @include element('content') {
             width:        100%;
diff --git a/assets/css/components/_logo.scss b/assets/css/components/_header.scss
index 13587c8..61f6f4a 100644
--- a/assets/css/components/_logo.scss
+++ b/assets/css/components/_header.scss
@@ -1,4 +1,4 @@
-@include namespace('logo') {
+@include namespace('header') {
     @include store((
         --colors: (
             --fg: prop(--colors --fg-lo, $global: true),
@@ -11,9 +11,12 @@
     ));
 
     @include component(namespace()) {
-        position: fixed;
-        z-index:  10000;
-        top:      0;
-        left:     0;
+        display:         flex;
+        position:        fixed;
+        z-index:         10000;
+        top:             0;
+        left:            0;
+        flex-direction:  row;
+        justify-content: flex-start;
     }
 }
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
index f6016c4..58d64d7 100644
--- a/assets/css/components/_landing-banner.scss
+++ b/assets/css/components/_landing-banner.scss
@@ -10,7 +10,7 @@
         @include element('title') {
             max-width:      7em;
             margin-top:     0;
-            transform:      translateX(-.05em);
+            transform:      translateX(-.06em);
             font-family:    $font-fam--large;
             font-weight:    350;
             text-transform: none;
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index b92dd9e..774281d 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -7,13 +7,9 @@
                 --bg: prop(--colors --accent --color, $global: true),
                 --fg: prop(--colors --bg-hi, $global: true),
             ),
-            --icon: (
+            --inverted: (
                 --fg: prop(--colors --fg-lo, $global: true),
                 --bg: prop(--colors --bg-hi, $global: true),
-                --hover: (
-                    --fg: prop(--colors --bg-hi, $global: true),
-                    --bg: prop(--colors --accent --color, $global: true),
-                )
             )
         )
     ));
@@ -24,9 +20,17 @@
         transition:       background-color .2s, color .2s;
         background-color: prop(--colors --bg);
         color:            prop(--colors --fg);
+        font-size:        1rem;
         font-weight:      450;
         text-decoration:  none;
 
+        @include modifier('scroll-top') {
+            position: fixed;
+            z-index:  9000;
+            right:    0;
+            bottom:   0;
+        }
+
         @include element('icon') {
             display:          flex;
             position:         relative;
@@ -36,19 +40,16 @@
             width:            prop(--dims --outer, $global: true);
             height:           100%;
             transition:       background-color .2s, color .2s;
-            background-color: prop(--colors --icon --bg);
-            color:            prop(--colors --icon --fg);
         }
 
-        @include modifier('icon-only') {
-            @include element('icon') {
-                background-color: prop(--colors --bg);
-                color:            prop(--colors --fg);
-            }
+        @include modifier('inverted') {
+            background-color: prop(--colors --inverted --bg);
+            color:            prop(--colors --inverted --fg);
         }
-
-        &:hover {
-            @include multi('&', 'element' 'icon') {
+        
+        &:link,
+        &:visited {
+            &:hover {
                 background-color: prop(--colors --hover --bg);
                 color:            prop(--colors --hover --fg);
             }
diff --git a/assets/css/components/_section-heading.scss b/assets/css/components/_section-heading.scss
deleted file mode 100644
index 717442b..0000000
--- a/assets/css/components/_section-heading.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@include namespace('section-heading') {
-    @include store((
-        --dims: (
-            --pad-y: $line-height * 1rem
-        ),
-        --colors: (
-            --line: prop(--colors --accent --color, $global: true),
-        )
-    ));
-
-    @include component(namespace()) {
-        margin:         0 0 prop(--dims --pad-y);
-        font-family:    $font-fam--text;
-        font-size:      1 / 16 * 13em;
-        font-weight:    bold;
-        letter-spacing: .2em;
-        text-transform: uppercase;
-
-        &::before {
-            content:          '';
-            display:          inline-block;
-            width:            3em;
-            height:           2px;
-            margin-right:     1.3em;
-            background-color: prop(--colors --line);
-            vertical-align:   middle;
-        }
-    }
-}
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
index 500849e..d1169dd 100644
--- a/assets/css/layouts/_landing.scss
+++ b/assets/css/layouts/_landing.scss
@@ -10,8 +10,12 @@
 
     @include layout(namespace()) {
         display:        flex;
+        box-sizing:     border-box;
         flex-direction: row;
         align-items:    center;
+        min-height:     100%;
+        margin-bottom:  calc(-1 * #{prop(--dims --outer, $global: true)});
+        padding-bottom: prop(--dims --outer, $global: true);
 
         @include element('banner') {
             width:            70%;
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
index a005ece..0ad9a61 100644
--- a/assets/css/layouts/_section.scss
+++ b/assets/css/layouts/_section.scss
@@ -1,10 +1,11 @@
 @include namespace('section') {
-    @include layout(namespace()) {
-        box-sizing:      border-box;
-        min-height:      100%;
-        margin-bottom:   calc(-1 * #{prop(--dims --outer, $global: true)});
-        padding-bottom:  prop(--dims --outer, $global: true);
+    @include store((
+        --colors: (
+            --border: prop(--colors --obj-hi, $global: true),
+        )
+    ));
 
+    @include layout(namespace()) {
         @include modifier('no-head') {
             padding-top: prop(--dims --outer, $global: true);
         }
@@ -17,6 +18,23 @@
             left:           0;
             flex-direction: row;
             justify-self:   flex-start;
+            padding-right:  prop(--dims --outer, $global: true);
+            font-size:      1 / 16 * 15em;
+
+            &::after {
+                content:      '';
+                width:        100%;
+                height:       100%;
+                margin-right: prop(--dims --outer-spacing, $global: true);
+                margin-left:  prop(--dims --outer-spacing, $global: true);
+                border-top:   1px solid prop(--colors --border);
+            }
+        }
+
+        @include media('<=sm') {
+            @include element('head') {
+                padding-right: 0;
+            }
         }
     }
 }
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index 6fbacff..9b3a862 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -5,3 +5,29 @@
         }
     }
 }
+@include namespace('body') {
+    @include scope(namespace()) {
+        font-size: 1 / 16 * 18em;
+
+        > :first-child {
+            margin-top: 0;
+        }
+
+        h1 {
+            transform:      translateX(-.06em);
+            font-family:    $font-fam--large;
+            font-weight:    550;
+            text-transform: none;
+        }
+
+        img {
+            max-width: 100%;
+        }
+
+        @include iro-responsive-env(('xs', 'md')) {
+            h1 {
+                font-size: iro-responsive-set((1.8rem, 3rem));
+            }
+        }
+    }
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index d095dec..1d19aae 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -18,9 +18,8 @@
 @import 'objects/button';
 
 @import 'components/outer-button';
-@import 'components/logo';
+@import 'components/header';
 @import 'components/landing-banner';
-@import 'components/section-heading';
 @import 'components/footer';
 @import 'components/card';
 
diff --git a/content/index.js b/content/index.js
index 8a24e3a..e03dec1 100644
--- a/content/index.js
+++ b/content/index.js
@@ -2,5 +2,5 @@ var headerEl = document.querySelector(".c-hero");
 var headerTemplateEl = document.getElementById("header-sm");
 var headerSmEl = headerTemplateEl.content.cloneNode("true");
 
-headerEl.classList.remove("u-hidden@sm-down");
+headerEl.classList.remove("u-dn@sm-down");
 headerEl.appendChild(headerSmEl);
diff --git a/content/notebook/index.md b/content/notebook/index.md
deleted file mode 100644
index 1175625..0000000
--- a/content/notebook/index.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: Notebook
-layout: categorized_list
-create_feed: true
----
diff --git a/content/projects/blobfox-emojis/index.md b/content/projects/blobfox-emojis/index.md
index 97a186e..92c26d4 100644
--- a/content/projects/blobfox-emojis/index.md
+++ b/content/projects/blobfox-emojis/index.md
@@ -1,5 +1,5 @@
 ---
-title: Blobfox Emojis
+title: Blobfox
 category: emj
 ---
 
diff --git a/content/projects/bunhd-emojis/index.md b/content/projects/bunhd-emojis/index.md
index bd89b1d..361b15d 100644
--- a/content/projects/bunhd-emojis/index.md
+++ b/content/projects/bunhd-emojis/index.md
@@ -1,5 +1,5 @@
 ---
-title: BunHD Emojis
+title: BunHD
 category: emj
 ---
 
diff --git a/metadata/metadata.yaml b/metadata/metadata.yaml
index 6980efb..8716b43 100644
--- a/metadata/metadata.yaml
+++ b/metadata/metadata.yaml
@@ -7,16 +7,9 @@ author:
 
 menus:
   main:
-    - id: index
-      label: Home
-      url: /
     - id: projects
       label: Projects
-      url: /projects/
-    - id: notebook
-      label: Notebook
-      url: /notebook/
-      hidden: true
+      url: /#projects
     - id: personal
       label: Personal
       label_long: Personal Notebook
@@ -49,6 +42,7 @@ profiles:
     icon:     envelope
     username: me@volpeon.ink
     featured: true
+    url:      "mailto:me@volpeon.ink"
 
   - platform: Fediverse
     icon:     graph
diff --git a/scripts/build_content.sh b/scripts/build_content.sh
index c20eca8..83b6908 100755
--- a/scripts/build_content.sh
+++ b/scripts/build_content.sh
@@ -69,10 +69,10 @@ get_subpages_metadata() {
     fi
 
     local pages="[]"
-    local sections="{}"
+    local subsections="{}"
 
     for file_in in "${child_pages[@]}"; do
-        local section=$(basename "${file_in%/index.md}")
+        local subsection=$(basename "${file_in%/index.md}")
         local content=$(get_content "$file_in" | sed -z 's/\\/\\\\/g;s/\n/\\n/g;s/"/\\"/g')
         local metadata=$(get_metadata "$file_in" | jq "{ \
             file_out: .file_out, \
@@ -92,10 +92,10 @@ get_subpages_metadata() {
         fi
 
         pages=$(echo "$pages" | jq ". += [ $metadata ]")
-        sections=$(echo "$sections" | jq ". += { \"$section\": { title: $title, pages: $subpages } }")
+        subsections=$(echo "$subsections" | jq ". += { \"$subsection\": { title: $title, pages: $subpages } }")
     done
 
-    echo "{ \"pages\": $pages, \"sections\": $sections }"
+    echo "{ \"pages\": $pages, \"subsections\": $subsections }"
 }
 
 handle () {
diff --git a/templates/base.html b/templates/base.html
index c7f641c..625b025 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -32,32 +32,51 @@
 </head>
 
 <body>
-    <!--<nav class="c-nav">
-        <a class="c-nav__logo" href="/" title="$site.title$">
-            <svg class="c-nav__logo-symbol">
-                <use href="#logo"></use>
-            </svg>
+    <nav class="c-header">
+        <a class="c-outer-button c-outer-button--inverted" href="/" title="$site.title$">
+            <span class="c-outer-button__icon">
+                <svg class="c-outer-button__icon-symbol">
+                    <use href="#logo"></use>
+                </svg>
+            </span>
         </a>
-        $for(menus.main.items)$
-            <a class="c-nav__item $if(it.active)$c-nav__item--active$endif$" href="$it.url$">$it.label$</a>
-        $endfor$
-    </nav>-->
-
-    <a class="c-outer-button c-outer-button--logo c-logo" href="/" title="$site.title$">
-        <span class="c-outer-button__icon">
-            <svg class="c-outer-button__icon-symbol">
-                <use href="#logo"></use>
-            </svg>
-        </span>
-    </a>
+        $if(section.is_index)$
+        $else$
+            $for(menus.main.items)$
+                $if(it.active)$
+                    <a class="c-outer-button" href="$it.url$">
+                        <span class="c-outer-button__content">
+                            $it.label$
+                        </span>
+                    </a>
+                $endif$
+            $endfor$
+        $endif$
+    </nav>
         
-    $if(section.is_index)$
+    <main>
+        $if(section.is_index)$
 ${layouts/index()}
-    $elseif(layout.is_categorized_list)$
+        $elseif(layout.is_categorized_list)$
 ${layouts/categorized_list()}
-    $else$
+        $else$
 ${layouts/page()}
-    $endif$
+        $endif$
+
+        <a class="c-outer-button c-outer-button--scroll-top" href="#" title="To the top">
+            <span class="c-outer-button__icon">
+                <svg class="c-outer-button__icon-symbol o-icon">
+                    <use href="#icon-arrow-up"></use>
+                </svg>
+            </span>
+        </a>
+
+        <footer class="c-footer">
+            <div class="c-footer__content">
+                9thPK7O3xn
+            </div>
+        </footer>
+    </main>
 
     ${symbols.svg()}
 </body>
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 8c25ec0..0e9142f 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -1,23 +1,22 @@
-<main>
-    <div class="c-page s-page l-container l-container--content l-container--pad-x l-container--pad-y">
-        <div class="c-page__content s-page-content">
+<section class="l-section l-section--no-head">
+    <div class="l-container l-container--pad-x l-container--pad-y l-container--content">
 $body$
 
-            $for(pages.by_category)$
-                <h2 class="c-page__prefixed c-page__prefixed--h2">
-                    $for(it.value/first)$
-                        $it.category.name$
-                    $endfor$
-                </h2>
-                <ul>
-                    $for(it.value)$
-                        <li class="c-page__prefixed c-page__prefixed--ref">
-                            <a href="$it.url.rel$">$it.title$</a>
-                        </li>
-                    $endfor$
-                </ul>
-            $endfor$
-        </div>
+        $for(pages.by_category)$
+            <h2>
+                $for(it.value/first)$
+                    $it.category.name$
+                $endfor$
+            </h2>
+            <ul>
+                $for(it.value)$
+                    <li>
+                        <a href="$it.url.rel$">$it.title$</a>
+                    </li>
+                $endfor$
+            </ul>
+        $endfor$
     </div>
-</main>
+</section>
+
 
diff --git a/templates/layouts/index.html b/templates/layouts/index.html
index 4163093..327f9f5 100644
--- a/templates/layouts/index.html
+++ b/templates/layouts/index.html
@@ -1,95 +1,80 @@
-<main>
-        <section class="l-section l-section--no-head l-landing">
-                <header class="l-landing__banner">
-                        <div class="c-landing-banner l-container l-container--pad-x l-container--pad-y l-container--content">
-                                <h1 class="c-landing-banner__title">
-                                        <span class="c-landing-banner__title-inner">
-                                                I'm a <strong class="c-landing-banner__emph">red fox</strong> in disguise.
-                                        </span>
-                                </h1>
-                                <p class="c-landing-banner__text">
-                                        Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces.
-                                </p>
-                        </div>
-                </header>
+<section class="l-section l-section--no-head l-landing">
+    <header class="l-landing__banner">
+        <div class="c-landing-banner l-container l-container--pad-x l-container--pad-y l-container--content">
+            <h1 class="c-landing-banner__title">
+                <span class="c-landing-banner__title-inner">
+                    I'm a <strong class="c-landing-banner__emph">red fox</strong> in disguise.
+                </span>
+            </h1>
+            <p class="c-landing-banner__text">
+                Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces.
+            </p>
+        </div>
+    </header>
 
-                <section class="l-landing__content">
-                        <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body u-pt0@md-lo">
-                                <div class="l-card-grid">
-                                        $for(profiles)$
-                                                $if(it.featured)$
-                                                        $if(it.url)$
-                                                                <a class="l-card-grid__card c-card" href="$it.url$">
-                                                        $else$
-                                                                <div class="l-card-grid__card c-card">
-                                                        $endif$
-                                                                $if(it.icon)$
-                                                                        <svg class="c-card__icon o-icon">
-                                                                                <use href="#icon-$it.icon$"></use>
-                                                                        </svg>
-                                                                $endif$
-                                                                <div class="c-card__content">
-                                                                        <strong class="u-db">$it.platform$</strong>
-                                                                        <small class="u-db">$it.username$</small>
-                                                                </div>
-                                                                $if(it.url)$
-                                                                        <svg class="c-card__icon o-icon">
-                                                                                <use href="#icon-arrow-up-right"></use>
-                                                                        </svg>
-                                                                $endif$
-                                                        $if(it.url)$
-                                                                </a>
-                                                        $else$
-                                                                </div>
-                                                        $endif$
-                                                $endif$
-                                        $endfor$
-                                </div>
+    <section class="l-landing__content">
+        <div class="l-container l-container--pad-x l-container--pad-y l-container--content u-pt0@md-lo">
+            <div class="l-card-grid">
+                $for(profiles)$
+                    $if(it.featured)$
+                        $if(it.url)$
+                            <a class="l-card-grid__card c-card" href="$it.url$">
+                        $else$
+                            <div class="l-card-grid__card c-card">
+                        $endif$
+                            $if(it.icon)$
+                                <svg class="c-card__icon o-icon">
+                                    <use href="#icon-$it.icon$"></use>
+                                </svg>
+                            $endif$
+                            <div class="c-card__content">
+                                <strong class="u-db">$it.platform$</strong>
+                                <small class="u-db">$it.username$</small>
+                            </div>
+                            $if(it.url)$
+                                <svg class="c-card__icon o-icon">
+                                    <use href="#icon-arrow-up-right"></use>
+                                </svg>
+                            $endif$
+                        $if(it.url)$
+                            </a>
+                        $else$
+                            </div>
+                        $endif$
+                    $endif$
+                $endfor$
+            </div>
 
 $body$
-                        </div>
-                </section>
-        </section>
+        </div>
+    </section>
+</section>
 
-        <section class="l-section">
-                <header class="l-section__head">
-                        <a class="c-outer-button" href="#projects" id="projects">
-                                <span class="c-outer-button__icon">
-                                        <svg class="c-outer-button__icon-symbol o-icon">
-                                                <use href="#icon-arrow-down-right"></use>
-                                        </svg>
-                                </span>
-                                <span class="c-outer-button__content">
-                                        $sections.projects.title$
-                                </span>
-                        </a>
-                </header>
+<section class="l-section">
+    <header class="l-section__head">
+        <a class="c-outer-button" href="#projects" id="projects">
+            <span class="c-outer-button__icon">
+                <svg class="c-outer-button__icon-symbol o-icon">
+                    <use href="#icon-arrow-down-right"></use>
+                </svg>
+            </span>
+            <span class="c-outer-button__content">
+                $subsections.projects.title$
+            </span>
+        </a>
+    </header>
 
-                <div class="l-container l-container--pad-x l-container--pad-y l-container--content l-card-grid">
-                        $for(sections.projects.pages)$
-                                <a class="l-card-grid__card c-card" href="$it.url.rel$">
-                                        <div class="c-card__content">
-                                                <small class="u-db">$it.category.name$</small>
-                                                <strong class="u-db">$it.title$</strong>
-                                        </div>
-                                        <svg class="c-card__icon o-icon">
-                                                <use href="#icon-arrow-right"></use>
-                                        </svg>
-                                </a>
-                        $endfor$
-                </div>
-        </section>
-
-        <footer class="c-footer">
-                <a class="c-outer-button c-outer-button--icon-only" href="#" title="To the top">
-                        <span class="c-outer-button__icon">
-                                <svg class="c-outer-button__icon-symbol o-icon">
-                                        <use href="#icon-arrow-up"></use>
-                                </svg>
-                        </span>
-                </a>
-                <div class="c-footer__content u-ar">
-                        9thPK7O3xn
-                </div>
-        </footer>
-</main>
+    <div class="l-container l-container--pad-x l-container--pad-y l-container--content l-card-grid">
+        $for(subsections.projects.pages)$
+            <a class="l-card-grid__card c-card" href="$it.url.rel$">
+                <div class="c-card__content">
+                    <small class="u-db">$it.category.name$</small>
+                    <strong class="u-db">$it.title$</strong>
+                </div>
+                <svg class="c-card__icon o-icon">
+                    <use href="#icon-arrow-right"></use>
+                </svg>
+            </a>
+        $endfor$
+    </div>
+</section>
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index 9e7d85a..e006ddc 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,15 +1,7 @@
-<main>
-    <div class="c-page l-container l-container--content l-container--pad-x l-container--pad-y">
-        <div class="c-page__content s-page-content">
-            <header class="c-page__header">
-                <h1 class="c-page__prefixed c-page__prefixed--h1 c-page__header__title">$title$</h1>
-                $if(category)$
-                    <h2 class="c-page__header__meta">in $category.name$</h2>
-                $endif$
-            </header>
+<section class="l-section l-section--no-head">
+    <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body">
+        <h1>$title$</h1>
 
-$body$
-        </div>
+        $body$
     </div>
-</main>
-
+</section>
diff --git a/templates/symbols.svg b/templates/symbols.svg
index d884bc0..958e271 100644
--- a/templates/symbols.svg
+++ b/templates/symbols.svg
@@ -55,5 +55,11 @@
             d="m15.25 10.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-10 2.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm2.5-10a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-2.5378 9.4469 5.5686-1.3921m0.61265-2.1613-4.2845-4.2845m-2.1627 0.6058-1.4004 5.6015"
             fill="none" stroke="currentColor" />
       </symbol>
+
+      <symbol id="icon-git-branch" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path
+            d="m12.25 5.75c0 3.5899-2.9101 6.5-6.5 6.5m3e-7 0c0 1.1046-0.89543 2-2 2s-2-0.89543-2-2 0.89543-2 2-2 2 0.89543 2 2zm8.5-8.5c0 1.1046-0.89543 2-2 2s-2-0.89543-2-2 0.89543-2 2-2 2 0.89543 2 2zm-10.5 6.4998v-7.9998"
+            fill="none" stroke="currentColor" />
+      </symbol>
    </defs>
 </svg>