6 files changed, 44 insertions, 52 deletions

diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
index 2284cf5..3ca80ff 100644
--- a/assets/css/_utils.scss
+++ b/assets/css/_utils.scss
@@ -52,6 +52,14 @@
     }
 }
 
+@include utility('mta') {
+    margin-top: auto;
+}
+
+@include utility('mla') {
+    margin-left: auto;
+}
+
 @include utility('db') {
     display: block;
 }
diff --git a/assets/css/components/_ascii.scss b/assets/css/components/_ascii.scss
deleted file mode 100644
index e6bb39f..0000000
--- a/assets/css/components/_ascii.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@include namespace('ascii') {
-    @include store((
-        --colors: (
-            --fg:     prop(--colors --fg-hi, $global: true),
-            --border: prop(--colors --fg-hi, $global: true),
-        )
-    ));
-
-    @include component(namespace()) {
-        overflow:    hidden;
-        color:       prop(--colors --fg);
-        font-family: $font-fam--mono;
-        line-height: 1.4;
-
-        &::after {
-            content:     str-repeat('░', 400);
-            display:     block;
-            margin-top:  1 / 16 * 2em;
-            padding-top: 1 / 16 * 2em;
-            border-top:  1px solid prop(--colors --border);
-            color:       prop(--colors --fg);
-        }
-
-        @include element('fixed-content') {
-            display:   inline-block;
-            position:  relative;
-            left:      50%;
-            overflow:  visible;
-            transform: translateX(-50%);
-        }
-    }
-}
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index 4e809a4..2bd1fb1 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -2,26 +2,34 @@
     @include store((
         --colors: (
             --fg:     prop(--colors --obj, $global: true),
-            --border: prop(--colors --obj-hi, $global: true),
+            --ground: prop(--colors --obj, $global: true),
         )
     ));
 
     @include component(namespace()) {
-        display:         flex;
-        position:        relative;
-        align-items:     center;
-        justify-content: space-between;
-        height:          prop(--dims --outer, $global: true);
+        position:    relative;
+        min-height:  prop(--dims --outer, $global: true);
+        margin-top:  calc(2 * #{prop(--container --dims --pad-y, $global: true)});
+        color:       prop(--colors --fg);
+        font-family: $font-fam--mono;
+        line-height: 1.4;
 
-        @include element('content') {
-            width:        100%;
-            height:       100%;
-            margin-top:   -1px;
-            margin-right: prop(--container --dims --pad-x, $global: true);
-            margin-left:  prop(--container --dims --pad-x, $global: true);
-            border-top:   1px solid prop(--colors --border);
-            color:        prop(--colors --fg);
-            line-height:  prop(--dims --outer, $global: true);
+        &::after {
+            content:     str-repeat('░', 400);
+            display:     block;
+            margin-top:  1 / 16 * 2em;
+            padding-top: 1 / 16 * 2em;
+            overflow:    hidden;
+            border-top:  1px solid prop(--colors --ground);
+            color:       prop(--colors --ground);
+        }
+
+        @include element('ascii') {
+            display:   inline-block;
+            position:  relative;
+            left:      50%;
+            overflow:  visible;
+            transform: translateX(-50%);
         }
     }
 }
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index 21f78f4..2b7775e 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -35,6 +35,12 @@
             color:            prop(--colors --inverted --fg);
         }
 
+        @include modifier('scroll-top') {
+            position: absolute;
+            right:    0;
+            bottom:   0;
+        }
+
         @include element('icon') {
             display:          flex;
             position:         relative;
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
index 1a1bc0b..9dbe2be 100644
--- a/assets/css/layouts/_section.scss
+++ b/assets/css/layouts/_section.scss
@@ -24,10 +24,6 @@
 
         @include element('head') {
             display:        flex;
-            position:       sticky;
-            z-index:        9000;
-            top:            0;
-            left:           0;
             flex-direction: row;
             justify-self:   flex-start;
             font-size:      1 / 16 * 15em;
@@ -41,6 +37,13 @@
                 margin-left:  prop(--container --dims --pad-x, $global: true);
                 border-top:   1px solid prop(--colors --border);
             }
+
+            @include modifier('sticky') {
+                position: sticky;
+                z-index:  9000;
+                top:      0;
+                left:     0;
+            }
         }
     }
 }
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 241bad5..30878fe 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -22,7 +22,6 @@
 @import 'components/landing-banner';
 @import 'components/footer';
 @import 'components/card';
-@import 'components/ascii';
 @import 'components/project';
 @import 'components/post-list';