Design

3 files changed, 20 insertions, 19 deletions

diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
index 3ca80ff..e153845 100644
--- a/assets/css/_utils.scss
+++ b/assets/css/_utils.scss
@@ -52,25 +52,24 @@
     }
 }
 
-@include utility('mta') {
-    margin-top: auto;
-}
+@include utility('pb0') {
+    padding-bottom: 0;
+
+    @each $breakpoint in map-keys($breakpoints) {
+        @include media('<=#{$breakpoint}') {
+            @include suffix('#{$breakpoint}-lo') {
+                padding-bottom: 0;
+            }
+        }
 
-@include utility('mla') {
-    margin-left: auto;
+        @include media('>#{$breakpoint}') {
+            @include suffix('#{$breakpoint}-hi') {
+                padding-bottom: 0;
+            }
+        }
+    }
 }
 
 @include utility('db') {
     display: block;
 }
-
-@include utility('vh') {
-    position: absolute;
-    width:    0;
-    height:   0;
-    overflow: hidden;
-}
-
-@include utility('ar') {
-    text-align: right;
-}
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index da471e7..9cc0d17 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -9,7 +9,7 @@
     @include component(namespace()) {
         position:    relative;
         min-height:  prop(--dims --outer, $global: true);
-        margin-top:  calc(2 * #{prop(--container --dims --pad-y, $global: true)});
+        margin-top:  prop(--dims --outer, $global: true);
         overflow:    hidden;
         color:       prop(--colors --fg);
         font-family: $font-fam--mono;
diff --git a/templates/base.html b/templates/base.html
index 466f7c8..5dc57e2 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -66,8 +66,10 @@ ${layouts/page()}
 
 
         <footer class="c-footer">
-            <pre class="c-footer__ascii u-dn@sm-lo">${layouts/ascii_fox()}</pre>
-            <pre class="c-footer__ascii u-dn@sm-hi">${layouts/ascii_fox_small()}</pre>
+            <div class="l-container l-container--pad-y u-pb0">
+                <pre class="c-footer__ascii u-dn@sm-lo">${layouts/ascii_fox()}</pre>
+                <pre class="c-footer__ascii u-dn@sm-hi">${layouts/ascii_fox_small()}</pre>
+            </div>
 
             <a class="c-outer-button c-outer-button--scroll-top" href="#" title="To the top">
                 <span class="c-outer-button__icon">