1 files changed, 20 insertions, 17 deletions

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;
 }