Update

12 files changed, 99 insertions, 73 deletions

diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
index 8f8170c..e8e98d2 100644
--- a/assets/css/_utils.scss
+++ b/assets/css/_utils.scss
@@ -1,4 +1,4 @@
-@include utility('hidden') {
+@include utility('dn') {
     display: none;
 
     @each $breakpoint in map-keys($breakpoints) {
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 9b5fe86..71dc5d2 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -23,27 +23,29 @@ $subcontent--indent: 2em;
 $gray0: hsl(220, 0%, 6%);
 $gray1: hsl(220, 0%, 9%);
 $gray2: hsl(220, 0%, 15%);
-$gray3: hsl(220, 0%, 29%);
-$gray4: hsl(220, 0%, 54%);
-$gray5: hsl(220, 0%, 73%);
-$gray6: hsl(220, 0%, 100%);
+$gray3: hsl(220, 0%, 20%);
+$gray4: hsl(220, 0%, 33%);
+$gray5: hsl(220, 0%, 54%);
+$gray6: hsl(220, 0%, 73%);
+$gray7: hsl(220, 0%, 100%);
 
 @include store((
     --dims: (
         --outer:         4rem,
-        --outer-spacing: 2rem,
-        --spacing-y:     3rem,
+        --outer-spacing: 1.7rem,
+        --spacing-y:     4rem,
     ),
     --colors: (
         --bg-hi: $gray0, // Darker background
         --bg:    $gray1, // Background
         --bg-lo: $gray2, // Lighter background
     
-        --obj:   $gray3,
+        --obj-hi: $gray3,
+        --obj:    $gray4,
     
-        --fg-hi: $gray4, // Faint text
-        --fg:    $gray5, // Text
-        --fg-lo: $gray6, // Strong text
+        --fg-hi: $gray5, // Faint text
+        --fg:    $gray6, // Text
+        --fg-lo: $gray7, // Strong text
 
         --accent: (
             --h:     354,
@@ -68,11 +70,11 @@ $gray6: hsl(220, 0%, 100%);
     }
 }
 
-@include store((
+/* @include store((
     --dims: (
-        --outer:   4rem,
+        --outer: 3.5rem,
     ),
-), 'sm');
+), 'sm'); */
 
 :root {
     --heading--fg: var(--colors--fg-lo);
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 09b03b0..cb18810 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -15,7 +15,7 @@
     @include store((
         --dims: (
             --pad-x: 1em,
-            --pad-y: .6em
+            --pad-y: .7em
         )
     ), 'md');
 
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index c20bc22..c127d02 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -2,7 +2,7 @@
     @include store((
         --colors: (
             --fg:     prop(--colors --obj, $global: true),
-            --border: prop(--colors --bg-lo, $global: true),
+            --border: prop(--colors --obj-hi, $global: true),
         )
     ));
 
@@ -11,6 +11,8 @@
         align-items:     center;
         justify-content: space-between;
         height:          prop(--dims --outer, $global: true);
+        padding-right:   prop(--dims --outer, $global: true);
+        font-size:       1 / 16 * 15em;
 
         @include element('content') {
             width:        100%;
diff --git a/assets/css/components/_logo.scss b/assets/css/components/_header.scss
index 13587c8..61f6f4a 100644
--- a/assets/css/components/_logo.scss
+++ b/assets/css/components/_header.scss
@@ -1,4 +1,4 @@
-@include namespace('logo') {
+@include namespace('header') {
     @include store((
         --colors: (
             --fg: prop(--colors --fg-lo, $global: true),
@@ -11,9 +11,12 @@
     ));
 
     @include component(namespace()) {
-        position: fixed;
-        z-index:  10000;
-        top:      0;
-        left:     0;
+        display:         flex;
+        position:        fixed;
+        z-index:         10000;
+        top:             0;
+        left:            0;
+        flex-direction:  row;
+        justify-content: flex-start;
     }
 }
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
index f6016c4..58d64d7 100644
--- a/assets/css/components/_landing-banner.scss
+++ b/assets/css/components/_landing-banner.scss
@@ -10,7 +10,7 @@
         @include element('title') {
             max-width:      7em;
             margin-top:     0;
-            transform:      translateX(-.05em);
+            transform:      translateX(-.06em);
             font-family:    $font-fam--large;
             font-weight:    350;
             text-transform: none;
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index b92dd9e..774281d 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -7,13 +7,9 @@
                 --bg: prop(--colors --accent --color, $global: true),
                 --fg: prop(--colors --bg-hi, $global: true),
             ),
-            --icon: (
+            --inverted: (
                 --fg: prop(--colors --fg-lo, $global: true),
                 --bg: prop(--colors --bg-hi, $global: true),
-                --hover: (
-                    --fg: prop(--colors --bg-hi, $global: true),
-                    --bg: prop(--colors --accent --color, $global: true),
-                )
             )
         )
     ));
@@ -24,9 +20,17 @@
         transition:       background-color .2s, color .2s;
         background-color: prop(--colors --bg);
         color:            prop(--colors --fg);
+        font-size:        1rem;
         font-weight:      450;
         text-decoration:  none;
 
+        @include modifier('scroll-top') {
+            position: fixed;
+            z-index:  9000;
+            right:    0;
+            bottom:   0;
+        }
+
         @include element('icon') {
             display:          flex;
             position:         relative;
@@ -36,19 +40,16 @@
             width:            prop(--dims --outer, $global: true);
             height:           100%;
             transition:       background-color .2s, color .2s;
-            background-color: prop(--colors --icon --bg);
-            color:            prop(--colors --icon --fg);
         }
 
-        @include modifier('icon-only') {
-            @include element('icon') {
-                background-color: prop(--colors --bg);
-                color:            prop(--colors --fg);
-            }
+        @include modifier('inverted') {
+            background-color: prop(--colors --inverted --bg);
+            color:            prop(--colors --inverted --fg);
         }
-
-        &:hover {
-            @include multi('&', 'element' 'icon') {
+        
+        &:link,
+        &:visited {
+            &:hover {
                 background-color: prop(--colors --hover --bg);
                 color:            prop(--colors --hover --fg);
             }
diff --git a/assets/css/components/_section-heading.scss b/assets/css/components/_section-heading.scss
deleted file mode 100644
index 717442b..0000000
--- a/assets/css/components/_section-heading.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@include namespace('section-heading') {
-    @include store((
-        --dims: (
-            --pad-y: $line-height * 1rem
-        ),
-        --colors: (
-            --line: prop(--colors --accent --color, $global: true),
-        )
-    ));
-
-    @include component(namespace()) {
-        margin:         0 0 prop(--dims --pad-y);
-        font-family:    $font-fam--text;
-        font-size:      1 / 16 * 13em;
-        font-weight:    bold;
-        letter-spacing: .2em;
-        text-transform: uppercase;
-
-        &::before {
-            content:          '';
-            display:          inline-block;
-            width:            3em;
-            height:           2px;
-            margin-right:     1.3em;
-            background-color: prop(--colors --line);
-            vertical-align:   middle;
-        }
-    }
-}
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
index 500849e..d1169dd 100644
--- a/assets/css/layouts/_landing.scss
+++ b/assets/css/layouts/_landing.scss
@@ -10,8 +10,12 @@
 
     @include layout(namespace()) {
         display:        flex;
+        box-sizing:     border-box;
         flex-direction: row;
         align-items:    center;
+        min-height:     100%;
+        margin-bottom:  calc(-1 * #{prop(--dims --outer, $global: true)});
+        padding-bottom: prop(--dims --outer, $global: true);
 
         @include element('banner') {
             width:            70%;
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
index a005ece..0ad9a61 100644
--- a/assets/css/layouts/_section.scss
+++ b/assets/css/layouts/_section.scss
@@ -1,10 +1,11 @@
 @include namespace('section') {
-    @include layout(namespace()) {
-        box-sizing:      border-box;
-        min-height:      100%;
-        margin-bottom:   calc(-1 * #{prop(--dims --outer, $global: true)});
-        padding-bottom:  prop(--dims --outer, $global: true);
+    @include store((
+        --colors: (
+            --border: prop(--colors --obj-hi, $global: true),
+        )
+    ));
 
+    @include layout(namespace()) {
         @include modifier('no-head') {
             padding-top: prop(--dims --outer, $global: true);
         }
@@ -17,6 +18,23 @@
             left:           0;
             flex-direction: row;
             justify-self:   flex-start;
+            padding-right:  prop(--dims --outer, $global: true);
+            font-size:      1 / 16 * 15em;
+
+            &::after {
+                content:      '';
+                width:        100%;
+                height:       100%;
+                margin-right: prop(--dims --outer-spacing, $global: true);
+                margin-left:  prop(--dims --outer-spacing, $global: true);
+                border-top:   1px solid prop(--colors --border);
+            }
+        }
+
+        @include media('<=sm') {
+            @include element('head') {
+                padding-right: 0;
+            }
         }
     }
 }
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index 6fbacff..9b3a862 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -5,3 +5,29 @@
         }
     }
 }
+@include namespace('body') {
+    @include scope(namespace()) {
+        font-size: 1 / 16 * 18em;
+
+        > :first-child {
+            margin-top: 0;
+        }
+
+        h1 {
+            transform:      translateX(-.06em);
+            font-family:    $font-fam--large;
+            font-weight:    550;
+            text-transform: none;
+        }
+
+        img {
+            max-width: 100%;
+        }
+
+        @include iro-responsive-env(('xs', 'md')) {
+            h1 {
+                font-size: iro-responsive-set((1.8rem, 3rem));
+            }
+        }
+    }
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index d095dec..1d19aae 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -18,9 +18,8 @@
 @import 'objects/button';
 
 @import 'components/outer-button';
-@import 'components/logo';
+@import 'components/header';
 @import 'components/landing-banner';
-@import 'components/section-heading';
 @import 'components/footer';
 @import 'components/card';