From 7182d2b3d2d97ea5783aedc9784f640a32e8cbf9 Mon Sep 17 00:00:00 2001
From: Nick Colley <nick.colley@hippodigital.co.uk>
Date: Fri, 25 Nov 2022 12:38:40 +0000
Subject: [PATCH] fix: contrast for active navigation

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.
---
 src/scss/themes/_base.scss | 14 +++++++-------
 src/scss/variables.scss    |  7 +++----
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/scss/themes/_base.scss b/src/scss/themes/_base.scss
index d22c938b0..cb166f457 100644
--- 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
index ad37a4858..64ba3224b 100644
--- 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;
   }