WIP: Redesign

4 files changed, 9 insertions, 11 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index d05bc36..3e67b76 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -30,7 +30,7 @@ html {
 
 body {
     margin:  0;
-    padding: prop(--dims --nav --height, $global: true) 0 0;
+    padding: prop(--dims --outer, $global: true) 0 0;
 }
 
 pre,
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 18cebc6..1063dc8 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -30,9 +30,7 @@ $gray6: hsl(220, 0%, 100%);
 
 @include store((
     --dims: (
-        --nav: (
-            --height: 4.5rem
-        )
+        --outer: 4.5rem,
     ),
     --colors: (
         --bg-hi: $gray0, // Darker background
@@ -64,9 +62,7 @@ $gray6: hsl(220, 0%, 100%);
 
 @include store((
     --dims: (
-        --nav: (
-            --height: 3.5rem
-        )
+        --outer: 4rem
     ),
 ), 'sm');
 
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 900b4f2..d0a255e 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -2,7 +2,6 @@
     @include store((
         --dims: (
             --font-size: 15px,
-            --height:    prop(--dims --nav --height, $global: true),
             --pad-x:     2.5rem,
             --item: (
                 --pad-x: 1rem,
@@ -52,7 +51,7 @@
         z-index:          10000;
         top:              0;
         left:             0;
-        height:           prop(--dims --height);
+        height:           prop(--dims --outer, $global: true);
         padding:          0 prop(--dims --pad-x);
         background-color: prop(--colors --bg);
         font-size:        prop(--dims --font-size);
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
index 7683d44..03af39f 100644
--- a/assets/css/layouts/_landing.scss
+++ b/assets/css/layouts/_landing.scss
@@ -10,9 +10,11 @@
 
     @include layout(namespace()) {
         display:        flex;
+        box-sizing:     border-box;
         flex-direction: row;
         align-items:    center;
         min-height:     100%;
+        padding-bottom: prop(--dims --outer, $global: true);
 
         @include element('banner') {
             flex-shrink:      1.2;
@@ -36,8 +38,9 @@
         }
 
         @include media('<=md') {
-            display: block;
-            height:  auto;
+            display:        block;
+            height:         auto;
+            padding-bottom: 0;
 
             @include element('banner', 'content') {
                 width:   auto;