fix: contrast for active navigation (#2274)

Increase the background contrast for the selected page. Increase the prominance of the indictor bar so we dont need to rely on the background to have a strong contrast difference.
nolanlawson · Dec 2, 2022 · da28e98 · da28e98
1 parent 7417e89
commit da28e98
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 11 deletions.
diff --git a/src/scss/themes/_base.scss b/src/scss/themes/_base.scss
@@ -26,21 +26,21 @@
   --form-border: #{darken($border-color, 10%)};
 
   --nav-bg: #{$main-theme-color};
-  --nav-active-bg: #{lighten($main-theme-color, 9%)};
+  --nav-active-bg: #{lighten($main-theme-color, 3%)};
   --nav-border: #{darken($main-theme-color, 10%)};
   --nav-a-border: #{$main-theme-color};
   --nav-a-selected-border: #{$secondary-text-color};
-  --nav-a-selected-bg: #{lighten($main-theme-color, 10%)};
-  --nav-a-selected-active-bg: #{lighten($main-theme-color, 17%)};
+  --nav-a-selected-bg: #{lighten($main-theme-color, 3%)};
+  --nav-a-selected-active-bg: var(--nav-a-selected-bg-hover);
   --nav-svg-fill: #{$secondary-text-color};
   --nav-text-color: #{$secondary-text-color};
   --nav-indicator-bg: #{rgba($secondary-text-color, 0.8)};
-  --nav-indicator-bg-hover: #{rgba($secondary-text-color, 0.85)};
+  --nav-indicator-bg-hover: #{rgba($secondary-text-color, 0.6)};
 
   --nav-a-selected-border-hover: #{$secondary-text-color};
-  --nav-a-selected-bg-hover: #{lighten($main-theme-color, 15%)};
-  --nav-a-bg-hover: #{lighten($main-theme-color, 5%)};
-  --nav-a-border-hover: #{$main-theme-color};
+  --nav-a-selected-bg-hover: #{lighten($main-theme-color, 4.5%)};
+  --nav-a-bg-hover: #{lighten($main-theme-color, 1.5%)};
+  --nav-a-border-hover: #{rgba($secondary-text-color, 0.6)};
   --nav-svg-fill-hover: #{$secondary-text-color};
   --nav-text-color-hover: #{$secondary-text-color};
 

diff --git a/src/scss/variables.scss b/src/scss/variables.scss
@@ -21,9 +21,9 @@
   //
 
   --nav-font-size: 1rem;
-  --nav-indicator-height: 2px;
+  --nav-indicator-height: 3px;
   --nav-border-bottom: 0px;
-  --nav-icon-pad-v: 15px;
+  --nav-icon-pad-v: 14px;
   --nav-icon-pad-h: 20px;
   --nav-icon-size: 20px;
 
@@ -46,10 +46,9 @@
   --main-border-size: 1px;
 
   @media (max-width: 991px) {
-    --nav-icon-pad-v: 20px;
+    --nav-icon-pad-v: 18px;
     --nav-icon-pad-h: 10px;
     --nav-icon-size: 25px;
-    --nav-indicator-height: 3px;
     --nav-border-bottom: 0px;
   }