Update

13 files changed, 187 insertions, 160 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index 3e67b76..b739d2a 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -1,10 +1,10 @@
 ::selection {
-    background-color: var(--select--bg);
-    color:            var(--select--fg);
+    background-color: prop(--colors --select --bg);
+    color:            prop(--colors --select --fg);
 }
 
 img::selection {
-    background-color: var(--select--img-bg);
+    background-color: prop(--colors --select --img-bg);
 }
 
 html,
@@ -26,6 +26,7 @@ html {
     font-family:      $font-fam--text;
     font-size:        1em / 16px * $font-size;
     line-height:      $line-height;
+    scroll-behavior:  smooth;
 }
 
 body {
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 1063dc8..b19ebee 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -30,7 +30,8 @@ $gray6: hsl(220, 0%, 100%);
 
 @include store((
     --dims: (
-        --outer: 4.5rem,
+        --outer:         4rem,
+        --outer-spacing: 2rem,
     ),
     --colors: (
         --bg-hi: $gray0, // Darker background
@@ -44,11 +45,17 @@ $gray6: hsl(220, 0%, 100%);
         --fg-lo: $gray6, // Strong text
 
         --accent: (
-            --h: 354,
-            --s: 84%,
-            --l: 55%,
+            --h:     354,
+            --s:     84%,
+            --l:     55%,
             --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
-        )
+        ),
+
+        --select: (
+            --bg:     hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .996),
+            --img-bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .5),
+            --fg:     var(--colors--bg-hi),
+        ),
     )
 ));
 
@@ -69,30 +76,26 @@ $gray6: hsl(220, 0%, 100%);
 :root {
     --heading--fg: var(--colors--fg-lo);
 
-    --select--bg:     hsla(270, 2%, 100%, .996);
-    --select--img-bg: hsla(270, 2%, 100%, .5);
-    --select--fg:     var(--colors--bg-hi);
-
     --code--fg: var(--colors--fg-hi);
 
     --code-block--fg: var(--colors--fg-hi);
 
-    --link--idle--fg: var(--colors--fg-lo);
+    --link--idle--fg:  var(--colors--fg-lo);
     --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--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--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);
-    --page--link--hover--fg: #000;
+    --page--link--hover--bg:   var(--page--link--idle--fg);
+    --page--link--hover--fg:   #000;
 }
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 6260518..bb8b4d2 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -12,6 +12,13 @@
         )
     ));
 
+    @include store((
+        --dims: (
+            --pad-x: .9em,
+            --pad-y: .6em
+        )
+    ), 'md');
+
     @include component(namespace()) {
         display:          flex;
         position:         relative;
@@ -29,9 +36,7 @@
             @include element('content') {
                 @include modifier('flip') {
                     visibility: visible;
-                    transition:
-                        visibility 0s,
-                        opacity    .2s;
+                    transition: visibility 0s, opacity .2s;
                     opacity:    1;
                 }
             }
@@ -48,9 +53,7 @@
                 top:              0;
                 left:             0;
                 height:           100%;
-                transition:
-                    visibility 0s linear .2s,
-                    opacity    .2s;
+                transition:       visibility 0s linear .2s, opacity .2s;
                 opacity:          0;
                 background-color: prop(--colors --flip --bg);
             }
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index db30fcd..c20bc22 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -1,17 +1,25 @@
 @include namespace('footer') {
     @include store((
-        --dims: (
-            --pad-y: .8em
-        ),
         --colors: (
-            --fg: prop(--colors --obj, $global: true)
+            --fg:     prop(--colors --obj, $global: true),
+            --border: prop(--colors --bg-lo, $global: true),
         )
     ));
 
     @include component(namespace()) {
-        padding-top:    prop(--dims --pad-y);
-        padding-bottom: prop(--dims --pad-y);
-        color:          prop(--colors --fg);
-        text-align:     right;
+        display:         flex;
+        align-items:     center;
+        justify-content: space-between;
+        height:          prop(--dims --outer, $global: true);
+
+        @include element('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);
+            color:        prop(--colors --fg);
+            line-height:  prop(--dims --outer, $global: true);
+        }
     }
 }
diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss
index 412ca8a..8f07c37 100644
--- a/assets/css/components/_landing-banner.scss
+++ b/assets/css/components/_landing-banner.scss
@@ -7,17 +7,19 @@
     ));
 
     @include component(namespace()) {
-        font-size: 1 / 16 * 17em;
-
         @include element('title') {
             max-width:      7em;
             margin-top:     0;
-            transform:      translateX(-.04em);
+            transform:      translateX(-.05em);
             font-family:    $font-fam--large;
             font-weight:    350;
             text-transform: none;
         }
 
+        @include element('text') {
+            font-size: 1 / 16 * 17em;
+        }
+
         @include element('title-inner') {
             background-image: linear-gradient(
                 to top,
@@ -33,9 +35,15 @@
             font-weight: 550;
         }
 
+        @include media('<=md') {
+            @include element('title') {
+                max-width: none;
+            }
+        }
+
         @include iro-responsive-env(('md', 'lg')) {
             @include element('title') {
-                font-size: iro-responsive-set((2.6rem, 3rem));
+                font-size: iro-responsive-set((2.6rem, 3.4rem));
             }
         }
     }
diff --git a/assets/css/components/_logo.scss b/assets/css/components/_logo.scss
new file mode 100644
index 0000000..13587c8
--- /dev/null
+++ b/assets/css/components/_logo.scss
@@ -0,0 +1,19 @@
+@include namespace('logo') {
+    @include store((
+        --colors: (
+            --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),
+            )
+        )
+    ));
+
+    @include component(namespace()) {
+        position: fixed;
+        z-index:  10000;
+        top:      0;
+        left:     0;
+    }
+}
diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss
deleted file mode 100644
index d0a255e..0000000
--- a/assets/css/components/_nav.scss
+++ /dev/null
@@ -1,109 +0,0 @@
-@include namespace('nav') {
-    @include store((
-        --dims: (
-            --font-size: 15px,
-            --pad-x:     2.5rem,
-            --item: (
-                --pad-x: 1rem,
-            ),
-        ),
-        --colors: (
-            --bg: prop(--colors --bg-hi, $global: true),
-            --logo: (
-                --idle: (
-                    --fg: prop(--colors --accent --color, $global: true),
-                ),
-                --hover: (
-                    --fg: prop(--colors --fg-lo, $global: true),
-                )
-            ),
-            --item: (
-                --idle: (
-                    --fg: prop(--colors --fg, $global: true),
-                ),
-                --hover: (
-                    --fg: prop(--colors --fg-lo, $global: true),
-                ),
-                --active: (
-                    --fg: prop(--colors --fg-lo, $global: true),
-                )
-            )
-        )
-    ));
-
-    @include store((
-        --dims: (
-            --pad-x: prop(--container --dims --pad-x, $global: true),
-        )
-    ), 'md');
-
-    @include store((
-        --dims: (
-            --item: (
-                --pad-x: .75em,
-            ),
-        )
-    ), 'sm');
-
-    @include component(namespace()) {
-        display:          flex;
-        position:         fixed;
-        z-index:          10000;
-        top:              0;
-        left:             0;
-        height:           prop(--dims --outer, $global: true);
-        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') {
-            color:           prop(--colors --logo --idle --fg);
-            font-family:     $font-fam--mono;
-            text-decoration: none;
-
-            &:link,
-            &:visited {
-                &:hover {
-                    background-color: transparent;
-                    color:            prop(--colors --logo --hover --fg);
-                }
-            }
-        }
-
-        @include element('logo-symbol') {
-            display: block;
-            width:   $line-height * .9em;
-            height:  $line-height * 1em;
-        }
-
-        @include element('item') {
-            margin:          0 calc(-1 * #{prop(--dims --item --pad-x)}) 0 prop(--dims --item --pad-x);
-            padding:         0 prop(--dims --item --pad-x);
-            color:           prop(--colors --item --idle --fg);
-            text-decoration: none;
-            text-transform:  uppercase;
-
-            &:hover {
-                background-color: transparent;
-                color:            prop(--colors --item --hover --fg);
-                text-decoration:  underline;
-            }
-
-            @include modifier('active') {
-                border-color: prop(--colors --item --active --fg);
-                color:        prop(--colors --item --active --fg);
-                font-weight:  bold;
-            }
-        }
-
-        @include media('<=md') {
-            width: 100%;
-        }
-    }
-}
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
new file mode 100644
index 0000000..13614bb
--- /dev/null
+++ b/assets/css/components/_outer-button.scss
@@ -0,0 +1,67 @@
+@include namespace('outer-button') {
+    @include store((
+        --colors: (
+            --fg: prop(--colors --bg-hi, $global: true),
+            --bg: prop(--colors --fg-lo, $global: true),
+            --hover: (
+                --bg: prop(--colors --accent --color, $global: true),
+                --fg: prop(--colors --bg-hi, $global: true),
+            ),
+            --logo: (
+                --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),
+                )
+            )
+        )
+    ));
+
+    @include component(namespace()) {
+        display:          flex;
+        height:           prop(--dims --outer, $global: true);
+        transition:       background-color .2s, color .2s;
+        background-color: prop(--colors --bg);
+        color:            prop(--colors --fg);
+        font-weight:      500;
+        text-decoration:  none;
+
+        &:hover {
+            background-color: prop(--colors --hover --bg);
+            color:            prop(--colors --hover --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 element('icon') {
+            display:         flex;
+            position:        relative;
+            align-items:     center;
+            justify-content: center;
+            width:           prop(--dims --outer, $global: true);
+            height:          100%;
+        }
+
+        @include element('icon-symbol') {
+            display: block;
+            width:   1.5em;
+            height:  1.5em;
+        }
+
+        @include element('content') {
+            height:        100%;
+            padding-right: prop(--dims --outer-spacing, $global: true);
+            padding-left:  prop(--dims --outer-spacing, $global: true);
+            line-height:   prop(--dims --outer, $global: true);
+        }
+    }
+}
diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss
index 8e9091a..cbc4388 100644
--- a/assets/css/layouts/_card-grid.scss
+++ b/assets/css/layouts/_card-grid.scss
@@ -1,7 +1,13 @@
 @include namespace('card-grid') {
+    @include store((
+        --dims: (
+            --card-width: 17em
+        )
+    ));
+
     @include layout(namespace()) {
         display:               grid;
-        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
-        gap:                   .7rem;
+        grid-template-columns: repeat(auto-fit, minmax(#{prop(--dims --card-width)}, 1fr));
+        gap:                   .6rem;
     }
 }
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
index 03af39f..a332528 100644
--- a/assets/css/layouts/_landing.scss
+++ b/assets/css/layouts/_landing.scss
@@ -13,19 +13,15 @@
         box-sizing:     border-box;
         flex-direction: row;
         align-items:    center;
-        min-height:     100%;
-        padding-bottom: prop(--dims --outer, $global: true);
 
         @include element('banner') {
-            flex-shrink:      1.2;
-            width:            100%;
+            width:            70%;
             max-width:        prop(--dims --banner-width);
             background-color: prop(--colors --banner-bg);
         }
 
         @include element('content') {
-            width:     100%;
-            min-width: 0;
+            width: 100%;
         }
 
         @include iro-responsive-env(('md', 'lg')) {
@@ -38,9 +34,15 @@
         }
 
         @include media('<=md') {
-            display:        block;
-            height:         auto;
-            padding-bottom: 0;
+            display: block;
+
+            @include element('side') {
+                display: none;
+
+                @include sibling-element('side') {
+                    display: block;
+                }
+            }
 
             @include element('banner', 'content') {
                 width:   auto;
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
new file mode 100644
index 0000000..94a145b
--- /dev/null
+++ b/assets/css/layouts/_section.scss
@@ -0,0 +1,17 @@
+@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);
+
+        @include element('heading') {
+            position: sticky;
+            z-index:  9000;
+            top:      0;
+            left:     0;
+        }
+    }
+}
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index 7adda03..6fbacff 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -1,7 +1,7 @@
 @include namespace('body') {
     @include scope(namespace()) {
         > :first-child {
-            margin-top: 0;
+            //margin-top: 0;
         }
     }
 }
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 89b7837..d095dec 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -10,13 +10,15 @@
 @import 'basics';
 
 @import 'layouts/container';
+@import 'layouts/section';
 @import 'layouts/landing';
 @import 'layouts/card-grid';
 
 @import 'objects/icon';
 @import 'objects/button';
 
-@import 'components/nav';
+@import 'components/outer-button';
+@import 'components/logo';
 @import 'components/landing-banner';
 @import 'components/section-heading';
 @import 'components/footer';