5 files changed, 30 insertions, 34 deletions

diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 71dc5d2..756ddb8 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -31,9 +31,7 @@ $gray7: hsl(220, 0%, 100%);
 
 @include store((
     --dims: (
-        --outer:         4rem,
-        --outer-spacing: 1.7rem,
-        --spacing-y:     4rem,
+        --outer: 4rem,
     ),
     --colors: (
         --bg-hi: $gray0, // Darker background
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index 225cd29..fcea457 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -18,8 +18,8 @@
             width:        100%;
             height:       100%;
             margin-top:   -1px;
-            margin-right: prop(--dims --outer-spacing, $global: true);
-            margin-left:  prop(--dims --outer-spacing, $global: true);
+            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);
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index 774281d..d636f7d 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -11,6 +11,9 @@
                 --fg: prop(--colors --fg-lo, $global: true),
                 --bg: prop(--colors --bg-hi, $global: true),
             )
+        ),
+        --dims: (
+            --pad-x: 1.7rem,
         )
     ));
 
@@ -31,6 +34,11 @@
             bottom:   0;
         }
 
+        @include modifier('inverted') {
+            background-color: prop(--colors --inverted --bg);
+            color:            prop(--colors --inverted --fg);
+        }
+
         @include element('icon') {
             display:          flex;
             position:         relative;
@@ -39,20 +47,6 @@
             justify-content:  center;
             width:            prop(--dims --outer, $global: true);
             height:           100%;
-            transition:       background-color .2s, color .2s;
-        }
-
-        @include modifier('inverted') {
-            background-color: prop(--colors --inverted --bg);
-            color:            prop(--colors --inverted --fg);
-        }
-        
-        &:link,
-        &:visited {
-            &:hover {
-                background-color: prop(--colors --hover --bg);
-                color:            prop(--colors --hover --fg);
-            }
         }
 
         @include element('icon-symbol') {
@@ -63,10 +57,18 @@
 
         @include element('content') {
             height:        100%;
-            padding-right: prop(--dims --outer-spacing, $global: true);
-            padding-left:  prop(--dims --outer-spacing, $global: true);
+            padding-right: prop(--dims --pad-x);
+            padding-left:  prop(--dims --pad-x);
             line-height:   prop(--dims --outer, $global: true);
             white-space:   nowrap;
         }
+        
+        &:link,
+        &:visited {
+            &:hover {
+                background-color: prop(--colors --hover --bg);
+                color:            prop(--colors --hover --fg);
+            }
+        }
     }
 }
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index 0f569e4..ae23042 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -1,19 +1,15 @@
 @include namespace('container') {
     @include store((
         --dims: (
-            --pad-x: 3rem
+            --pad-x: 2rem,
+            --pad-y: 4rem,
         )
     ));
 
     @include store((
         --dims: (
-            --pad-x: 2rem
-        )
-    ), 'md');
-
-    @include store((
-        --dims: (
-            --pad-x: 4%
+            --pad-x: 1rem,
+            --pad-y: 3rem,
         )
     ), 'sm');
 
@@ -30,8 +26,8 @@
         }
 
         @include modifier('pad-y') {
-            padding-top:    prop(--dims --spacing-y, $global: true);
-            padding-bottom: prop(--dims --spacing-y, $global: true);
+            padding-top:    prop(--dims --pad-y);
+            padding-bottom: prop(--dims --pad-y);
         }
     }
 }
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
index 3450858..70ace4c 100644
--- a/assets/css/layouts/_section.scss
+++ b/assets/css/layouts/_section.scss
@@ -2,7 +2,7 @@
     @include store((
         --colors: (
             --border: prop(--colors --obj-hi, $global: true),
-        )
+        ),
     ));
 
     @include layout(namespace()) {
@@ -33,8 +33,8 @@
                 width:        100%;
                 height:       100%;
                 margin-top:   -1px;
-                margin-right: prop(--dims --outer-spacing, $global: true);
-                margin-left:  prop(--dims --outer-spacing, $global: true);
+                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);
             }
         }