WIP: Redesign

4 files changed, 30 insertions, 15 deletions

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 4b3a094..21eeb9f 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -18,6 +18,12 @@
         background-color: prop(--colors --bg);
         line-height:      1.4;
 
+        &:link,
+        &:visited {
+            color:           currentColor;
+            text-decoration: none;
+        }
+
         &:hover {
             @include element('content') {
                 @include modifier('flip') {
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
index ee5deab..412ca8a 100644
--- a/assets/css/components/_landing-banner.scss
+++ b/assets/css/components/_landing-banner.scss
@@ -7,6 +7,8 @@
     ));
 
     @include component(namespace()) {
+        font-size: 1 / 16 * 17em;
+
         @include element('title') {
             max-width:      7em;
             margin-top:     0;
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 03118a9..900b4f2 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -2,10 +2,10 @@
     @include store((
         --dims: (
             --font-size: 15px,
-            --pad-y:     .5rem,
+            --height:    prop(--dims --nav --height, $global: true),
+            --pad-x:     2.5rem,
             --item: (
                 --pad-x: 1rem,
-                --pad-y: 1rem,
             ),
         ),
         --colors: (
@@ -34,9 +34,14 @@
 
     @include store((
         --dims: (
+            --pad-x: prop(--container --dims --pad-x, $global: true),
+        )
+    ), 'md');
+
+    @include store((
+        --dims: (
             --item: (
                 --pad-x: .75em,
-                --pad-y: .75em,
             ),
         )
     ), 'sm');
@@ -47,15 +52,18 @@
         z-index:          10000;
         top:              0;
         left:             0;
-        align-items:      center;
-        padding:          prop(--dims --pad-y) 0;
+        height:           prop(--dims --height);
+        padding:          0 prop(--dims --pad-x);
         background-color: prop(--colors --bg);
         font-size:        prop(--dims --font-size);
 
+        @include element('logo', 'item') {
+            display:     flex;
+            align-items: center;
+            height:      100%;
+        }
+
         @include element('logo') {
-            display:         inline-block;
-            margin:          0;
-            padding:         prop(--dims --item --pad-y) 0;
             color:           prop(--colors --logo --idle --fg);
             font-family:     $font-fam--mono;
             text-decoration: none;
@@ -76,9 +84,8 @@
         }
 
         @include element('item') {
-            display:         inline-block;
             margin:          0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x);
-            padding:         prop(--dims --item --pad-y) prop(--dims --item --pad-x);
+            padding:         0 prop(--dims --item --pad-x);
             color:           prop(--colors --item --idle --fg);
             text-decoration: none;
             text-transform:  uppercase;
@@ -97,7 +104,7 @@
         }
 
         @include media('<=md') {
-            position: static;
+            width: 100%;
         }
     }
 }
diff --git a/assets/css/components/_section-heading.scss b/assets/css/components/_section-heading.scss
index db75159..e904943 100644
--- a/assets/css/components/_section-heading.scss
+++ b/assets/css/components/_section-heading.scss
@@ -1,7 +1,7 @@
 @include namespace('section-heading') {
     @include store((
         --dims: (
-            --pad-y: $line-height * 2rem
+            --pad-y: $line-height * 1rem
         ),
         --colors: (
             --line: prop(--colors --accent --color, $global: true),
@@ -10,8 +10,8 @@
 
     @include component(namespace()) {
         margin:         0 0 prop(--dims --pad-y);
-        font-size:      .8em;
-        font-weight:    400;
+        font-size:      1 / 16 * 12em;
+        font-weight:    550;
         letter-spacing: .2em;
         text-transform: uppercase;
 
@@ -19,7 +19,7 @@
             content:          '';
             display:          inline-block;
             width:            3em;
-            height:           1px;
+            height:           2px;
             margin-right:     1.3em;
             background-color: prop(--colors --line);
             vertical-align:   middle;