8 files changed, 98 insertions, 58 deletions

diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
index 5e07d6f..8f8170c 100644
--- a/assets/css/_utils.scss
+++ b/assets/css/_utils.scss
@@ -18,12 +18,49 @@
 
 @include utility('mt0') {
     margin-top: 0;
+
+    @each $breakpoint in map-keys($breakpoints) {
+        @include media('<=#{$breakpoint}') {
+            @include suffix('#{$breakpoint}-lo') {
+                margin-top: 0;
+            }
+        }
+
+        @include media('>#{$breakpoint}') {
+            @include suffix('#{$breakpoint}-hi') {
+                margin-top: 0;
+            }
+        }
+    }
+}
+
+@include utility('pt0') {
+    padding-top: 0;
+
+    @each $breakpoint in map-keys($breakpoints) {
+        @include media('<=#{$breakpoint}') {
+            @include suffix('#{$breakpoint}-lo') {
+                padding-top: 0;
+            }
+        }
+
+        @include media('>#{$breakpoint}') {
+            @include suffix('#{$breakpoint}-hi') {
+                padding-top: 0;
+            }
+        }
+    }
 }
 
-@include utility('ml') {
-    margin-left: auto;
+@include utility('my-auto') {
+    margin-top:    auto;
+    margin-bottom: auto;
 }
 
 @include utility('db') {
     display: block;
 }
+
+@include utility('ar') {
+    text-align: right;
+}
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index b19ebee..9b5fe86 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -32,6 +32,7 @@ $gray6: hsl(220, 0%, 100%);
     --dims: (
         --outer:         4rem,
         --outer-spacing: 2rem,
+        --spacing-y:     3rem,
     ),
     --colors: (
         --bg-hi: $gray0, // Darker background
@@ -69,7 +70,7 @@ $gray6: hsl(220, 0%, 100%);
 
 @include store((
     --dims: (
-        --outer: 4rem
+        --outer:   4rem,
     ),
 ), 'sm');
 
@@ -84,16 +85,6 @@ $gray6: hsl(220, 0%, 100%);
     --link--hover--bg: var(--link--idle--fg);
     --link--hover--fg: #000;
 
-    --hero--back-fg: var(--colors--bg-hi);
-
-    --nav--bg:               var(--colors--bg);
-    --nav--logo--fg:         var(--colors--fg-hi);
-    --nav--item--idle--fg:   var(--colors--fg);
-    --nav--item--hover--fg:  var(--colors--fg-lo);
-    --nav--item--active--fg: var(--colors--fg-lo);
-
-    --footer--bg: var(--colors--bg);
-
     --page--link--idle--fg:    var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866;
     --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%);  // var(--fg-lo); // #f59458;
     --page--link--hover--bg:   var(--page--link--idle--fg);
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index bb8b4d2..09b03b0 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -14,7 +14,7 @@
 
     @include store((
         --dims: (
-            --pad-x: .9em,
+            --pad-x: 1em,
             --pad-y: .6em
         )
     ), 'md');
@@ -69,5 +69,14 @@
             flex:    0 0 auto;
             padding: prop(--dims --pad-y) 0 prop(--dims --pad-y) prop(--dims --pad-x);
         }
+
+        @include element('image') {
+            display:         block;
+            flex:            0 0 auto;
+            width:           4em;
+            height:          100%;
+            object-fit:      cover;
+            object-position: center center;
+        }
     }
 }
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
index 8f07c37..f6016c4 100644
--- a/assets/css/components/_landing-banner.scss
+++ b/assets/css/components/_landing-banner.scss
@@ -17,7 +17,7 @@
         }
 
         @include element('text') {
-            font-size: 1 / 16 * 17em;
+            font-size: 1 / 16 * 18em;
         }
 
         @include element('title-inner') {
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index 13614bb..b92dd9e 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -7,7 +7,7 @@
                 --bg: prop(--colors --accent --color, $global: true),
                 --fg: prop(--colors --bg-hi, $global: true),
             ),
-            --logo: (
+            --icon: (
                 --fg: prop(--colors --fg-lo, $global: true),
                 --bg: prop(--colors --bg-hi, $global: true),
                 --hover: (
@@ -24,31 +24,34 @@
         transition:       background-color .2s, color .2s;
         background-color: prop(--colors --bg);
         color:            prop(--colors --fg);
-        font-weight:      500;
+        font-weight:      450;
         text-decoration:  none;
 
-        &:hover {
-            background-color: prop(--colors --hover --bg);
-            color:            prop(--colors --hover --fg);
+        @include element('icon') {
+            display:          flex;
+            position:         relative;
+            flex:             0 0 auto;
+            align-items:      center;
+            justify-content:  center;
+            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('logo') {
-            background-color: prop(--colors --logo --bg);
-            color:            prop(--colors --logo --fg);
-
-            &:hover {
-                background-color: prop(--colors --logo --hover --bg);
-                color:            prop(--colors --logo --hover --fg);
+        @include modifier('icon-only') {
+            @include element('icon') {
+                background-color: prop(--colors --bg);
+                color:            prop(--colors --fg);
             }
         }
 
-        @include element('icon') {
-            display:         flex;
-            position:        relative;
-            align-items:     center;
-            justify-content: center;
-            width:           prop(--dims --outer, $global: true);
-            height:          100%;
+        &:hover {
+            @include multi('&', 'element' 'icon') {
+                background-color: prop(--colors --hover --bg);
+                color:            prop(--colors --hover --fg);
+            }
         }
 
         @include element('icon-symbol') {
@@ -62,6 +65,7 @@
             padding-right: prop(--dims --outer-spacing, $global: true);
             padding-left:  prop(--dims --outer-spacing, $global: true);
             line-height:   prop(--dims --outer, $global: true);
+            white-space:   nowrap;
         }
     }
 }
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index d63460b..0f569e4 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -1,22 +1,19 @@
 @include namespace('container') {
     @include store((
         --dims: (
-            --pad-x: 3rem,
-            --pad-y: $line-height * 2rem
+            --pad-x: 3rem
         )
     ));
 
     @include store((
         --dims: (
-            --pad-x: 2rem,
-            --pad-y: $line-height * 1.5rem
+            --pad-x: 2rem
         )
     ), 'md');
 
     @include store((
         --dims: (
-            --pad-x: 4%,
-            --pad-y: $line-height * 1rem
+            --pad-x: 4%
         )
     ), 'sm');
 
@@ -33,8 +30,8 @@
         }
 
         @include modifier('pad-y') {
-            padding-top:    prop(--dims --pad-y);
-            padding-bottom: prop(--dims --pad-y);
+            padding-top:    prop(--dims --spacing-y, $global: true);
+            padding-bottom: prop(--dims --spacing-y, $global: true);
         }
     }
 }
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
index a332528..aa85679 100644
--- a/assets/css/layouts/_landing.scss
+++ b/assets/css/layouts/_landing.scss
@@ -25,16 +25,14 @@
         }
 
         @include iro-responsive-env(('md', 'lg')) {
-            padding-right: iro-responsive-set((0, 6rem));
+            padding-right: iro-responsive-set((0, 3rem));
             padding-left:  iro-responsive-set((0, 6rem));
-
-            @include element('banner') {
-                padding-right: iro-responsive-set((0, 6rem));
-            }
         }
 
         @include media('<=md') {
-            display: block;
+            flex-direction:  column;
+            align-items:     stretch;
+            justify-content: center;
 
             @include element('side') {
                 display: none;
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
index 94a145b..38b20aa 100644
--- a/assets/css/layouts/_section.scss
+++ b/assets/css/layouts/_section.scss
@@ -1,17 +1,21 @@
 @include namespace('section') {
     @include layout(namespace()) {
-        display:        flex;
-        flex-direction: column;
-        align-items:    flex-start;
-        min-height:     100%;
-        margin-bottom:  calc(-1 * #{prop(--dims --outer, $global: true)});
-        padding-bottom: prop(--dims --outer, $global: true);
+        display:         flex;
+        flex-direction:  column;
+        align-items:     stretch;
+        justify-content: flex-start;
+        min-height:      100%;
+        margin-bottom:   calc(-1 * #{prop(--dims --outer, $global: true)});
+        padding-bottom:  prop(--dims --outer, $global: true);
 
         @include element('heading') {
-            position: sticky;
-            z-index:  9000;
-            top:      0;
-            left:     0;
+            display:        flex;
+            position:       sticky;
+            z-index:        9000;
+            top:            0;
+            left:           0;
+            flex-direction: row;
+            justify-self:   flex-start;
         }
     }
 }