WIP: Redesign

11 files changed, 117 insertions, 65 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 64b11cf..d05bc36 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -1,24 +1,3 @@
-@font-face {
-    font-family: 'IBM Plex Sans';
-    font-style:  normal;
-    font-weight: normal;
-    src:         url('/IBMPlexSans-Regular.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'IBM Plex Sans';
-    font-style:  normal;
-    font-weight: bold;
-    src:         url('/IBMPlexSans-Bold.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'Garet Variable';
-    font-style:  normal;
-    font-weight: 50 950;
-    src:         url('/GaretVariable.woff2') format('woff2-variations');
-}
-
 ::selection {
     background-color: var(--select--bg);
     color:            var(--select--fg);
@@ -37,20 +16,21 @@ code {
 html,
 body,
 main {
-    height: 100%;
+    box-sizing: border-box;
+    height:     100%;
 }
 
 html {
     background-color: prop(--colors --bg);
     color:            prop(--colors --fg);
     font-family:      $font-fam--text;
-    font-size:        px-to-em($font-size, 16px);
+    font-size:        1em / 16px * $font-size;
     line-height:      $line-height;
 }
 
 body {
     margin:  0;
-    padding: 0;
+    padding: prop(--dims --nav --height, $global: true) 0 0;
 }
 
 pre,
@@ -180,7 +160,7 @@ h1 {
 }
 
 p {
-    margin: ($line-height * 1em) 0 0;
+    margin: ($line-height * 1rem) 0 0;
 }
 
 :link,
diff --git a/assets/css/_fonts.scss b/assets/css/_fonts.scss
new file mode 100644
index 0000000..9e57600
--- /dev/null
+++ b/assets/css/_fonts.scss
@@ -0,0 +1,27 @@
+@font-face {
+    font-family: 'IBM Plex Sans';
+    font-style:  normal;
+    font-weight: normal;
+    src:         url('/IBMPlexSans-Regular.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'IBM Plex Sans';
+    font-style:  normal;
+    font-weight: 500;
+    src:         url('/IBMPlexSans-Medium.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'IBM Plex Sans';
+    font-style:  normal;
+    font-weight: bold;
+    src:         url('/IBMPlexSans-Bold.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Garet';
+    font-style:  normal;
+    font-weight: 50 950;
+    src:         url('/GaretVariable.woff2') format('woff2-variations');
+}
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 1ef0c8a..18cebc6 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -1,8 +1,8 @@
 $breakpoints: (
-    xs: 320px,
-    sm: 600px,
-    md: 900px,
     lg: 1500px,
+    md: 900px,
+    sm: 600px,
+    xs: 320px,
 );
 
 $unit-intervals: (
@@ -13,7 +13,7 @@ $unit-intervals: (
 );
 
 $font-fam--text:     'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
-$font-fam--large:    'Garet Variable', $font-fam--text;
+$font-fam--large:    'Garet', $font-fam--text;
 $font-fam--mono:     'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
 $font-size:          16px;
 $line-height:        1.7;
@@ -29,6 +29,11 @@ $gray5: hsl(220, 0%, 73%);
 $gray6: hsl(220, 0%, 100%);
 
 @include store((
+    --dims: (
+        --nav: (
+            --height: 4.5rem
+        )
+    ),
     --colors: (
         --bg-hi: $gray0, // Darker background
         --bg:    $gray1, // Background
@@ -57,6 +62,14 @@ $gray6: hsl(220, 0%, 100%);
     }
 }
 
+@include store((
+    --dims: (
+        --nav: (
+            --height: 3.5rem
+        )
+    ),
+), 'sm');
+
 :root {
     --heading--fg: var(--colors--fg-lo);
 
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;
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index 0726950..218841d 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -2,20 +2,20 @@
     @include store((
         --dims: (
             --pad-x: 3rem,
-            --pad-y: $line-height * 3rem
+            --pad-y: $line-height * 2rem
         )
     ));
 
     @include store((
         --dims: (
             --pad-x: 2rem,
-            --pad-y: $line-height * 2rem
+            --pad-y: $line-height * 1.5rem
         )
     ), 'md');
 
     @include store((
         --dims: (
-            --pad-x: 1rem,
+            --pad-x: 5%,
             --pad-y: $line-height * 1rem
         )
     ), 'sm');
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
index b824005..7683d44 100644
--- a/assets/css/layouts/_landing.scss
+++ b/assets/css/layouts/_landing.scss
@@ -27,18 +27,11 @@
         }
 
         @include iro-responsive-env(('md', 'lg')) {
+            padding-right: iro-responsive-set((0, 6rem));
+            padding-left:  iro-responsive-set((0, 6rem));
+
             @include element('banner') {
-                padding:
-                    iro-responsive-set((2rem, 6rem))
-                    iro-responsive-set((0, 6rem));
-            }
-    
-            @include element('content') {
-                padding:
-                    iro-responsive-set((2rem, 6rem))
-                    iro-responsive-set((0, 6rem))
-                    iro-responsive-set((2rem, 6rem))
-                    0;
+                padding-right: iro-responsive-set((0, 6rem));
             }
         }
 
@@ -47,9 +40,8 @@
             height:  auto;
 
             @include element('banner', 'content') {
-                width:         auto;
-                padding-right: 0;
-                padding-left:  0;
+                width:   auto;
+                padding: 0;
             }
 
             @include element('banner') {
diff --git a/assets/css/objects/_button.scss b/assets/css/objects/_button.scss
new file mode 100644
index 0000000..d97ca2d
--- /dev/null
+++ b/assets/css/objects/_button.scss
@@ -0,0 +1,23 @@
+@include namespace('button') {
+    @include store((
+        --dims: (
+            --pad-x: 1.4em,
+            --pad-y: .5em
+        ),
+        --colors: (
+            --bg: prop(--colors --fg-lo, $global: true),
+            --fg: prop(--colors --bg, $global: true),
+        )
+    ));
+
+    @include object(namespace()) {
+        display:          inline-block;
+        padding:          prop(--dims --pad-y) prop(--dims --pad-x);
+        border-radius:    10em;
+        background-color: prop(--colors --bg);
+        color:            prop(--colors --fg);
+        font-size:        1 / 16 * 14em;
+        font-weight:      500;
+        text-decoration:  none;
+    }
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 90cbe5d..89b7837 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -6,9 +6,15 @@
 
 @import 'vars';
 @import 'functions';
+@import 'fonts';
 @import 'basics';
 
+@import 'layouts/container';
+@import 'layouts/landing';
+@import 'layouts/card-grid';
+
 @import 'objects/icon';
+@import 'objects/button';
 
 @import 'components/nav';
 @import 'components/landing-banner';
@@ -16,10 +22,6 @@
 @import 'components/footer';
 @import 'components/card';
 
-@import 'layouts/landing';
-@import 'layouts/container';
-@import 'layouts/card-grid';
-
 @import 'scopes/body';
 
 @import 'utils';