WIP: Redesign

1 files changed, 52 insertions, 65 deletions

diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index ea831a6..ae8a7a8 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -1,88 +1,75 @@
-$font-fam--text: 'Iosevka Aile', 'IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans',
-    Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif;
-$font-fam--mono: 'Iosevka Term SS09', 'Lucida Console', 'Courier New', Courier,
-    monospace;
-$font-size: 16px;
-$line-height: 1.7;
-
-$code-block--font-size: 16px;
-$code-block--line-height: 1.4;
-
-$content--width: 42em;
-$content--h1--font-size: $font-size + 1;
-
-$subcontent--indent: 2em;
-
-$container--pad-h: 2rem;
-$container--pad-h--sm: 1rem;
-$container--pad-v: $line-height * 2rem;
-$container--pad-v--sm: $line-height * 1rem;
-
-$nav--font-size: $font-size - 1;
-$nav--item--spacing: 2em;
-$nav--item--spacing--sm: 1.5em;
-$nav--item--pad-h: .5em;
-$nav--item--pad-v: .9em;
-
-$footer--pad-v: .8em;
-
-$page--item-prefix--max-chars: 1.5em;
-$page--item-prefix--pad: 1em;
-$page--item-prefix--width: $page--item-prefix--max-chars + $page--item-prefix--pad;
-
-$page--item-prefix--max-chars--sm: 1em;
-$page--item-prefix--width--sm: $page--item-prefix--max-chars--sm + $page--item-prefix--pad;
+$iro-root-size: 16px;
 
 $breakpoints: (
-    xs: 380px,
+    xs: 320px,
     sm: 700px,
+    md: 1100px,
 );
 
-:root {
-    --gray0: hsl(270, 0%, 7%);
-    --gray1: hsl(270, 0%, 10%);
-    --gray2: hsl(270, 1%, 29%);
-    --gray3: hsl(270, 2%, 54%);
-    --gray4: hsl(270, 2%, 73%);
-    --gray5: hsl(270, 2%, 100%);
-
-    //
-
-    --bg-hi: var(--gray0); // Lighter background
-    --bg:    var(--gray1); // Background
-
-    --obj:   var(--gray2);
+$unit-intervals: (
+    'px':  1,
+    'em':  .01,
+    'rem': .01,
+    '':    0
+);
 
-    --fg-hi: var(--gray3); // Faint text
-    --fg:    var(--gray4); // Text
-    --fg-lo: var(--gray5); // Strong text
+$font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+$font-fam--large: 'Garet Variable', $font-fam--text;
+$font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
+$font-size: 16px;
+$line-height: 1.7;
+$content--width: 56rem;
+$subcontent--indent: 2em;
 
-    //
+$gray0: hsl(220, 0%, 7%);
+$gray1: hsl(220, 0%, 10%);
+$gray2: hsl(220, 0%, 29%);
+$gray3: hsl(220, 0%, 54%);
+$gray4: hsl(220, 0%, 73%);
+$gray5: hsl(220, 0%, 100%);
+
+@include store((
+    --colors: (
+        --bg-hi: $gray0, // Lighter background
+        --bg:    $gray1, // Background
+    
+        --obj:   $gray2,
+    
+        --fg-hi: $gray3, // Faint text
+        --fg:    $gray4, // Text
+        --fg-lo: $gray5, // Strong text
+
+        --accent: hsl(354, 84%, 55%),
+    )
+));
 
-    --heading--fg: var(--fg-lo);
+: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(--bg-hi);
+    --select--fg:     var(--colors--bg-hi);
 
-    --code--fg: var(--fg-hi);
+    --code--fg: var(--colors--fg-hi);
 
-    --code-block--fg: var(--fg-hi);
+    --code-block--fg: var(--colors--fg-hi);
 
-    --link--idle--fg: var(--fg-lo);
+    --link--idle--fg: var(--colors--fg-lo);
     --link--hover--bg: var(--link--idle--fg);
     --link--hover--fg: #000;
 
-    --nav--bg: var(--bg-hi);
-    --nav--logo--fg: var(--fg-hi);
-    --nav--item--idle--fg: var(--fg);
-    --nav--item--hover--fg: var(--fg-lo);
-    --nav--item--active--fg: var(--fg-lo);
+    --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);
 
-    --page--item-prefix--fg: var(--fg-hi);
+    --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(--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%);  // var(--fg-lo); // #f59458;
+    --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;
 }