WIP: Redesign

3 files changed, 58 insertions, 62 deletions

diff --git a/assets/css/components/_hero.scss b/assets/css/components/_hero.scss
deleted file mode 100644
index 3d8890e..0000000
--- a/assets/css/components/_hero.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@include namespace('hero') {
-    @include store((
-        --colors: (
-            --emph-fg: prop(--colors --accent, $global: true),
-            --back-fg: prop(--colors --bg-hi, $global: true)
-        )
-    ));
-
-    @include component(namespace()) {
-        display:         flex;
-        position:        relative;
-        align-items:     center;
-        justify-content: center;
-        text-align:      center;
-
-        @include element('title') {
-            margin-top:     0;
-            font-family:    $font-fam--large;
-            text-transform: none;
-
-            @include modifier('front') {
-                max-width:   7em;
-                font-size:   2.5rem;
-                font-weight: 200;
-            }
-
-            @include modifier('back') {
-                position:  absolute;
-                z-index:   -10;
-                transform: translateY(-.08em);
-                color:     prop(--colors --back-fg);
-            }
-        }
-
-        @include element('emph') {
-            color:       prop(--colors --emph-fg);
-            font-weight: 500;
-        }
-
-        @include iro-responsive-env(('xs', 'sm', 'md')) {
-            @include element('title') {
-                @include modifier('front') {
-                    padding:   iro-responsive-set((7rem, 7rem, 10rem)) 0;
-                    font-size: iro-responsive-set((2.2rem, 3rem, 3.5rem));
-                }
-
-                @include modifier('back') {
-                    font-size: iro-responsive-set((12rem, 14rem, 16rem));
-                }
-            }
-        }
-    }
-}
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
new file mode 100644
index 0000000..ee5deab
--- /dev/null
+++ b/assets/css/components/_landing-banner.scss
@@ -0,0 +1,40 @@
+@include namespace('landing-banner') {
+    @include store((
+        --colors: (
+            --emph-fg: prop(--colors --accent --color, $global: true),
+            --emph-bg: prop(--colors --bg-hi, $global: true)
+        )
+    ));
+
+    @include component(namespace()) {
+        @include element('title') {
+            max-width:      7em;
+            margin-top:     0;
+            transform:      translateX(-.04em);
+            font-family:    $font-fam--large;
+            font-weight:    350;
+            text-transform: none;
+        }
+
+        @include element('title-inner') {
+            background-image: linear-gradient(
+                to top,
+                transparent .15em,
+                #{prop(--colors --emph-bg)} .15em,
+                #{prop(--colors --emph-bg)} .6em,
+                transparent .6em
+            );
+        }
+
+        @include element('emph') {
+            color:       prop(--colors --emph-fg);
+            font-weight: 550;
+        }
+
+        @include iro-responsive-env(('md', 'lg')) {
+            @include element('title') {
+                font-size: iro-responsive-set((2.6rem, 3rem));
+            }
+        }
+    }
+}
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
index 8fc4564..03118a9 100644
--- a/assets/css/components/_nav.scss
+++ b/assets/css/components/_nav.scss
@@ -2,16 +2,17 @@
     @include store((
         --dims: (
             --font-size: 15px,
-            --pad-y:     1em,
+            --pad-y:     .5rem,
             --item: (
-                --pad-x: 1em,
-                --pad-y: 1em,
+                --pad-x: 1rem,
+                --pad-y: 1rem,
             ),
         ),
         --colors: (
+            --bg: prop(--colors --bg-hi, $global: true),
             --logo: (
                 --idle: (
-                    --fg: prop(--colors --fg-hi, $global: true),
+                    --fg: prop(--colors --accent --color, $global: true),
                 ),
                 --hover: (
                     --fg: prop(--colors --fg-lo, $global: true),
@@ -33,7 +34,6 @@
 
     @include store((
         --dims: (
-            --pad-y: .5em,
             --item: (
                 --pad-x: .75em,
                 --pad-y: .75em,
@@ -42,10 +42,15 @@
     ), 'sm');
 
     @include component(namespace()) {
-        display:     flex;
-        align-items: center;
-        padding:     prop(--dims --pad-y) 0;
-        font-size:   prop(--dims --font-size);
+        display:          flex;
+        position:         fixed;
+        z-index:          10000;
+        top:              0;
+        left:             0;
+        align-items:      center;
+        padding:          prop(--dims --pad-y) 0;
+        background-color: prop(--colors --bg);
+        font-size:        prop(--dims --font-size);
 
         @include element('logo') {
             display:         inline-block;
@@ -90,5 +95,9 @@
                 font-weight:  bold;
             }
         }
+
+        @include media('<=md') {
+            position: static;
+        }
     }
 }