From dc6b12fc7ab37309767ab38c89bc16c3b100defc Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 31 Jan 2023 23:15:19 -0800
Subject: [PATCH] Fix gradient on About page for dark mode

---
 components/AboutPage/index.scss | 29 ++---------------
 styles/themes.scss              |  8 +++++
 styles/variables.scss           | 56 +++++++++++++++++++++++++++++++++
 3 files changed, 66 insertions(+), 27 deletions(-)

diff --git a/components/AboutPage/index.scss b/components/AboutPage/index.scss
index 14cc2ec3..68f21a12 100644
--- a/components/AboutPage/index.scss
+++ b/components/AboutPage/index.scss
@@ -16,20 +16,7 @@
       right: -18vw;
       top: $unit-4x * -1;
       z-index: 1;
-      background-image: linear-gradient(
-          90deg,
-          rgba(245, 245, 245, 1) 5%,
-          rgba(245, 245, 245, 0.2) 50%,
-          rgba(245, 245, 245, 0.2) 70%,
-          rgba(245, 245, 245, 1) 95%
-        ),
-        linear-gradient(
-          rgba(245, 245, 245, 1) 5%,
-          rgba(245, 245, 245, 0.4) 40%,
-          rgba(245, 245, 245, 0.4) 78%,
-          rgba(245, 245, 245, 1) 95%
-        ),
-        url('/images/about-hero.jpg');
+      background-image: var(--hero-gradient), url('/images/about-hero.jpg');
 
       @include breakpoint(tablet) {
         right: -14vw;
@@ -47,19 +34,7 @@
           left: 0;
           right: 0;
           bottom: 0;
-          background: linear-gradient(
-              90deg,
-              rgba(245, 245, 245, 1) 0%,
-              rgba(245, 245, 245, 0) 50%,
-              rgba(245, 245, 245, 0) 70%,
-              rgba(245, 245, 245, 1) 95%
-            ),
-            linear-gradient(
-              rgba(245, 245, 245, 1) 0%,
-              rgba(245, 245, 245, 0) 40%,
-              rgba(245, 245, 245, 0) 78%,
-              rgba(245, 245, 245, 1) 95%
-            );
+          background: var(--hero-gradient-overlay);
           z-index: 3;
         }
       }
diff --git a/styles/themes.scss b/styles/themes.scss
index f6a4833e..e31e9761 100644
--- a/styles/themes.scss
+++ b/styles/themes.scss
@@ -135,6 +135,10 @@
   --light-hover-bg: #{$light-bg-20};
   --light-text: #{$light-text-10};
   --light-hover-text: #{$light-text-20};
+
+  // Gradients
+  --hero-gradient: #{$hero--gradient--light};
+  --hero-gradient-overlay: #{$hero--gradient--light--overlay};
 }
 
 [data-theme='dark'] {
@@ -275,4 +279,8 @@
   --light-hover-bg: #{$light-bg-00};
   --light-text: #{$light-text-10};
   --light-hover-text: #{$light-text-00};
+
+  // Gradients
+  --hero-gradient: #{$hero--gradient--dark};
+  --hero-gradient-overlay: #{$hero--gradient--dark--overlay};
 }
diff --git a/styles/variables.scss b/styles/variables.scss
index 4ae4b0dd..48446012 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -338,3 +338,59 @@ $hover-shadow: rgba(0, 0, 0, 0.08) 0px 0px 14px;
 $duration-modal-open: 0.48s;
 $duration-color-fade: 0.24s;
 $duration-zoom: 0.18s;
+
+// Gradients
+$hero--gradient--light: linear-gradient(
+    90deg,
+    rgba(245, 245, 245, 1) 5%,
+    rgba(245, 245, 245, 0.2) 50%,
+    rgba(245, 245, 245, 0.2) 70%,
+    rgba(245, 245, 245, 1) 95%
+  ),
+  linear-gradient(
+    rgba(245, 245, 245, 1) 5%,
+    rgba(245, 245, 245, 0.4) 40%,
+    rgba(245, 245, 245, 0.4) 78%,
+    rgba(245, 245, 245, 1) 95%
+  );
+$hero--gradient--light--overlay: linear-gradient(
+    90deg,
+    rgba(245, 245, 245, 1) 0%,
+    rgba(245, 245, 245, 0) 50%,
+    rgba(245, 245, 245, 0) 70%,
+    rgba(245, 245, 245, 1) 95%
+  ),
+  linear-gradient(
+    rgba(245, 245, 245, 1) 0%,
+    rgba(245, 245, 245, 0) 40%,
+    rgba(245, 245, 245, 0) 78%,
+    rgba(245, 245, 245, 1) 95%
+  );
+
+$hero--gradient--dark: linear-gradient(
+    90deg,
+    rgba(25, 25, 25, 1) 5%,
+    rgba(25, 25, 25, 0.2) 50%,
+    rgba(25, 25, 25, 0.2) 70%,
+    rgba(25, 25, 25, 1) 95%
+  ),
+  linear-gradient(
+    rgba(25, 25, 25, 1) 5%,
+    rgba(25, 25, 25, 0.4) 40%,
+    rgba(25, 25, 25, 0.4) 78%,
+    rgba(25, 25, 25, 1) 95%
+  );
+
+$hero--gradient--dark--overlay: linear-gradient(
+    90deg,
+    rgba(25, 25, 25, 1) 0%,
+    rgba(25, 25, 25, 0) 50%,
+    rgba(25, 25, 25, 0) 70%,
+    rgba(25, 25, 25, 1) 95%
+  ),
+  linear-gradient(
+    rgba(25, 25, 25, 1) 0%,
+    rgba(25, 25, 25, 0) 40%,
+    rgba(25, 25, 25, 0) 78%,
+    rgba(25, 25, 25, 1) 95%
+  );