Various improvements: CSS classes, favicon, design

1 files changed, 19 insertions, 8 deletions

diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index a29ad6d..4883605 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -4,6 +4,8 @@ $code-block-font-size: $font-size;
 $line-height: 1.5;
 $code-block-line-height: 1.4;
 
+$content-width: 75ch;
+
 $page-item-prefix-max-chars: 3ch;
 $page-item-prefix-pad: 2ch;
 $page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad;
@@ -13,31 +15,40 @@ $subcontent-indent: 4ch;
 $breakpoint-sm: 700px;
 
 :root {
-  --gray1: hsl(270, 0%, 9.7%);
+  --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%, 83%);
   --gray6: hsl(270, 2%, 100%);
 
+  --bg-minus: var(--gray0);
   --bg: var(--gray1);
   --bg-plus: var(--gray2);
   --fg-minus: var(--gray3);
   --fg: var(--gray4);
-  --fg-plus: var(--gray6);
+  --fg-plus: var(--gray5);
+  --fg-plus-2: var(--gray6);
+
+  --heading-fg: var(--fg-plus-2);
 
   --select-bg: hsla(270, 2%, 100%, 0.996);
-  --select-fg: var(--gray1);
+  --select-fg: var(--bg-minus);
 
   --code-fg: var(--fg-minus);
   --code-block-fg: var(--fg-minus);
 
   --page-item-prefix-fg: var(--fg-minus);
 
-  --link-idle-fg: var(--gray6); //#90acf2; //var(--gray6);
-  --link-visited-fg: var(--gray5); //#bc9df2; //var(--gray5);
-  --link-hover-bg: var(--gray6);
-  --link-hover-fg: var(--gray1);
+  --link-idle-fg: var(--fg-plus-2); //#90acf2; //var(--gray6);
+  --link-visited-fg: var(--fg-plus); //#bc9df2; //var(--gray5);
+  --link-hover-bg: var(--fg-plus-2);
+  --link-hover-fg: var(--bg-minus);
 
-  --heading: var(--fg-plus);
+  --nav-bg: var(--bg-minus);
+  --nav-logo-fg: var(--fg-minus);
+  --nav-item-idle-fg: var(--fg);
+  --nav-item-hover-fg: var(--fg-plus-2);
+  --nav-item-active-fg: var(--fg-plus-2);
 }