Update

11 files changed, 140 insertions, 63 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;
         }
     }
 }
diff --git a/metadata/metadata.yaml b/metadata/metadata.yaml
index 972de8d..6980efb 100644
--- a/metadata/metadata.yaml
+++ b/metadata/metadata.yaml
@@ -56,6 +56,7 @@ profiles:
     featured: true
 
   - platform: GitHub
+    icon:     git-branch
     username: volpeon
     url:      "https://github.com/volpeon"
 
diff --git a/templates/layouts/index.html b/templates/layouts/index.html
index 3145b69..d39e70a 100644
--- a/templates/layouts/index.html
+++ b/templates/layouts/index.html
@@ -14,7 +14,7 @@
     </header>
 
     <section class="l-landing__content">
-      <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body">
+      <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body u-pt0@md-lo">
         <div class="l-card-grid">
           $for(profiles)$
             $if(it.featured)$
@@ -64,18 +64,50 @@ $body$
         </span>
       </a>
     </header>
+
+    <div class="l-container l-container--pad-x l-container--pad-y l-card-grid u-my-auto">
+      <a class="l-card-grid__card c-card" href="projects/blobfox-emojis/">
+        <div class="c-card__content">
+          <small class="u-db">Emojis</small>
+          <strong class="u-db">Blobfox</strong>
+        </div>
+        <svg class="c-card__icon o-icon">
+          <use href="#icon-arrow-right"></use>
+        </svg>
+      </a>
+
+      <a class="l-card-grid__card c-card" href="projects/bunhd-emojis/">
+        <div class="c-card__content">
+          <small class="u-db">Emojis</small>
+          <strong class="u-db">BunHD</strong>
+        </div>
+        <svg class="c-card__icon o-icon">
+          <use href="#icon-arrow-right"></use>
+        </svg>
+      </a>
+
+      <!--<a class="l-card-grid__card c-card" href="#">
+        <div class="c-card__content">
+          <small class="u-db">Icons</small>
+          <strong class="u-db">iro</strong>
+        </div>
+        <svg class="c-card__icon o-icon">
+          <use href="#icon-arrow-right"></use>
+        </svg>
+      </a>-->
+    </div>
   </section>
 
   <footer class="c-footer">
-    <div class="c-footer__content">
-      9thPK7O3xn
-    </div>
-    <a class="c-outer-button" href="#">
+    <a class="c-outer-button c-outer-button--icon-only" href="#" title="To the top">
       <span class="c-outer-button__icon">
         <svg class="c-outer-button__icon-symbol o-icon">
           <use href="#icon-arrow-up"></use>
         </svg>
       </span>
     </a>
+    <div class="c-footer__content u-ar">
+      9thPK7O3xn
+    </div>
   </footer>
 </main>
diff --git a/templates/symbols.svg b/templates/symbols.svg
index 902cc35..a5907e1 100644
--- a/templates/symbols.svg
+++ b/templates/symbols.svg
@@ -15,6 +15,10 @@
          <path d="m12.25 7.25-4.5-4.5-4.5 4.5m4.5-4.5v10.5" fill="none" stroke="currentColor" />
       </symbol>
 
+      <symbol id="icon-arrow-right" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path d="m8.75 3.75 4.5 4.5-4.5 4.5m-6-4.5h10.5" fill="none" stroke="currentColor" />
+      </symbol>
+
       <symbol id="icon-envelope" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
          <path
             d="m1.25 3.5c0-0.4155 0.3345-0.75 0.75-0.75h12c0.4155 0 0.75 0.3345 0.75 0.75v8.5c0 0.4155-0.3345 0.75-0.75 0.75h-12c-0.4155 0-0.75-0.3345-0.75-0.75zm0 0.25 5.2845 4.3681c1.0065 0.83198 1.9181 0.82912 2.9676-0.03704l5.2479-4.3311"