Move gradient to where we can use variables; set colors based on original logo

web/themes/custom/geofresco/src/global/_base.scss

@@ -20,6 +20,20 @@
   width: -webkit-max-content; /* Chrome */
 }
 
+// Add a gradient across only a portion of the vertical width of the navbar.
+.navbar {
+  background: linear-gradient(
+    $body-background-color,
+    $body-background-color 20px,
+    $light-green 20px,
+    $green 40px,
+    $green 60px,
+    $body-background-color 60px,
+    $body-background-color
+  );
+}
+
+
 // Style the wordmark (logo)
 .navbar-item .wordmark {
   max-height: 3rem; // 4rem

web/themes/custom/geofresco/src/global/global.scss

@@ -3,6 +3,8 @@
 // Set brand colors.
 $blue: #4391E0;
 $red: #a70c20;
+$light-green: #65AB1F;
+$green: #478D00;
 
 // Update Bulma's global variables.
 $primary: $blue;

web/themes/custom/geofresco/src/global/overrides.scss

@@ -15,18 +15,6 @@
 }
 */
 
-.navbar {
-  background: linear-gradient(
-    white,
-    white 20px,
-    lightgreen 20px,
-    green 40px,
-    green 60px,
-    white 60px,
-    white
-  );
-}
-
 .footer {
   background-image: url('/themes/custom/geofresco/images/grassland-wark-forest.jpg');
   background-position: center;