Fix page design, improved header design

5 files changed, 54 insertions, 28 deletions

diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index ebbefad..848a764 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -36,7 +36,6 @@ $content--width:  46rem;
 
     @include store((
         --dims: (
-            --outer:  4rem,
             --indent: 2rem,
 
             --obj-shadow: 0 .4em 2.8em,
@@ -171,7 +170,6 @@ $content--width:  46rem;
 
 @include store((
     --dims: (
-        --outer:  3.5rem,
         --indent: 1.5rem,
     ),
 ), 'sm');
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index 6371411..f4e6040 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -9,7 +9,6 @@
 
     @include component(namespace()) {
         position:         relative;
-        min-height:       prop(--dims --outer, $global: true);
         margin-top:       auto;
         overflow:         hidden;
         background-color: prop(--colors --bg);
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index 81e4d4f..e88d167 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -1,9 +1,12 @@
 @include namespace('header') {
     @include store((
         --colors: (
-            --fg: prop(--colors --fg-hi, $global: true),
+            --bg:     prop(--colors --bg-lo, $global: true),
+            --fg:     prop(--colors --fg-lo, $global: true),
+            --border: prop(--colors --bg, $global: true),
             --hover: (
-                --fg: prop(--colors --fg-lo, $global: true),
+                --bg: prop(--colors --fg-lo, $global: true),
+                --fg: prop(--colors --bg-hi, $global: true),
             ),
             --active: (
                 --fg: prop(--colors --fg-lo, $global: true),
@@ -11,32 +14,44 @@
         ),
         --dims: (
             --height: 4rem,
-            --pad-x: .6rem,
+            --icon:   1.5rem,
+            --pad-x: calc(0.5 * (var(--header--dims--height) - var(--header--dims--icon))),
         )
     ));
 
+    @include store((
+        --colors: (
+            --bg: prop(--colors --bg-hi, $global: true),
+        )
+    ), 'light');
+
     @include component(namespace()) {
-        display:         flex;
-        flex-direction:  row;
-        justify-content: flex-start;
-        height:          prop(--dims --height);
+        display: flex;
+        height:  prop(--dims --height);
 
         @include element('item') {
-            padding:         0 prop(--dims --pad-x);
-            line-height:     prop(--dims --height);
-            color:           prop(--colors --fg);
-            text-decoration: none;
+            padding:          0 prop(--dims --pad-x);
+            line-height:      prop(--dims --height);
+            color:            prop(--colors --fg);
+            background-color: prop(--colors --bg);
+            text-decoration:  none;
+            transition:       background-color .2s, color .2s;
 
             &:hover {
-                color: prop(--colors --hover --fg);
+                color:            prop(--colors --hover --fg);
+                background-color: prop(--colors --hover --bg);
+            }
+
+            @include next-twin-element {
+                //padding-left: calc(0.5 * #{prop(--dims --pad-x)});
+                //margin-left: calc(-0.5 * #{prop(--dims --pad-x)});
+                border-left: 1px solid prop(--colors --border);
             }
 
             @include modifier('icon') {
                 display:         flex;
                 align-items:     center;
                 justify-content: center;
-                padding:         0;
-                width:           prop(--dims --height);
             }
 
             @include modifier('active') {
@@ -46,8 +61,8 @@
         }
 
         @include element('icon') {
-            width:  1.5em;
-            height: 1.5em;
+            width:  prop(--dims --icon);
+            height: prop(--dims --icon);
         }
     }
 }
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index c11c11f..f1fd0aa 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -1,6 +1,7 @@
 @include namespace('body') {
     @include store((
         --colors: (
+            --bg: transparent,
             --meta: (
                 --fg: prop(--colors --fg-hi, $global: true),
                 --bg: prop(--colors --bg-lo, $global: true),
@@ -12,6 +13,7 @@
             --obj-border: prop(--colors --obj, $global: true),
         ),
         --dims: (
+            --space-top: 4rem,
             --meta: (
                 --pad-x: .6em,
                 --pad-y: .2em
@@ -21,6 +23,7 @@
 
     @include store((
         --colors: (
+            --bg: prop(--colors --bg-hi, $global: true),
             --meta: (
                 --bg: prop(--colors --bg, $global: true),
             ),
@@ -31,7 +34,16 @@
         )
     ), 'light');
 
+    @include store((
+        --dims: (
+            --space-top: 3rem,
+        )
+    ), 'sm');
+
     @include scope(namespace()) {
+        margin-top:       prop(--dims --space-top);
+        background-color: prop(--colors --bg);
+
         @include element('meta') {
             display:          inline-block;
             padding:          prop(--dims --meta --pad-y) prop(--dims --meta --pad-x);
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index 978f7f6..0f795ea 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,11 +1,13 @@
-<section class="l-container l-container--pad-x l-container--pad-y l-container--content s-colored-links s-headlines s-headlines--body s-body">
-    $if(show_date)$
-        <div class="s-body__meta">
-            $date.long$
-        </div>
-    $endif$
+<div class="s-body">
+    <section class="l-container l-container--pad-x l-container--pad-y l-container--content s-colored-links s-headlines s-headlines--body">
+        $if(show_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$
+    </section>
+</div>