Add landing background color that matches the landing image.

code4sac · Nov 15, 2023 · cd1d074 · cd1d074
1 parent aee82f1
commit cd1d074
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 26 deletions.
diff --git a/src/components/home/homeSectionLandingImage.jsx b/src/components/home/homeSectionLandingImage.jsx
@@ -7,27 +7,25 @@ import "@/styles/pages/home.scss"
  * @constructor
  */
 export default function HomeSectionLandingImage({ sectionType }) {
-  return (
-    <section className={`home-section-${SectionType.dark} home-landing-image`}>
-      <div className={`home-landing-container`}>
-        <h1 className={`home-landing-heading`}>
-          <span>We are</span> <br />
-          Open Sacramento
-        </h1>
-        <p className={`home-section-paragraph`}>
-          Join us to address civic challenges and enhance public services for
-          Sacramento residents through technology and open data. Volunteer now for a
-          better future!
-        </p>
-        <div className={`home-buttons-group`}>
-          <a href="" className={`home-button`}>Get Started</a>
-          <a href="" className={`home-button home-button-alt`}> View Projects</a>
-        </div>
+    return (
+      <div className={'home-landing-background'}>
+        <section className={`home-landing-image`}>
+          <div className={`home-landing-container`}>
+            <h1 className={`home-landing-heading`}>
+              <span>We are</span> <br />
+              Open Sacramento
+            </h1>
+            <p className={`home-section-paragraph`}>
+              Join us to address civic challenges and enhance public services for
+              Sacramento residents through technology and open data. Volunteer now for a
+              better future!
+            </p>
+            <div className={`home-buttons-group`}>
+              <a href="" className={`home-button`}>Get Started</a>
+              <a href="" className={`home-button home-button-alt`}> View Projects</a>
+            </div>
+          </div>
+        </section>
       </div>
-      <img
-        src="/img/towerbridgenight.png"
-        alt="Tower Bridge"
-        className={`home-section-landing-image`} />
-    </section>
   )
 }
diff --git a/styles/abstracts/variables.scss b/styles/abstracts/variables.scss
@@ -10,7 +10,7 @@ $primary-500: #112971;
 $secondary-500: #ffc107;
 $neutral-900: #060718;
 $primary-900: #00081f;
-$hero-background-color: #030303;
+$landing-background-color: #030303;
 
 /* 
 Screen breakpoints

diff --git a/styles/components/navigation-bar.scss b/styles/components/navigation-bar.scss
@@ -16,7 +16,7 @@ $toolbar-height: 84px;
   width: 100%;
   height: $toolbar-height;
   color: $secondary-50;
-  background: $hero-background-color;
+  background: $landing-background-color;
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
   z-index: 4;
   // overflow: hidden;
@@ -159,7 +159,7 @@ img {
 .navbar-extended-mobile-container {
   height: 100%;
   color: $secondary-50;
-  background: $hero-background-color;
+  background: $landing-background-color;
 }
 
 .navbar-extended-desktop-left-container {

diff --git a/styles/pages/home.scss b/styles/pages/home.scss
@@ -22,6 +22,11 @@ Home page layout
   }
 }
 
+.home-landing-background {
+  background-color: $landing-background-color;
+  color: $neutral-50;
+}
+
 .home-landing-container {
   width: 40%;
   min-height: 721px;
@@ -30,6 +35,7 @@ Home page layout
   flex-direction: column;
   justify-content: center;
   gap: 24px;
+  color: $neutral-50;
 
   @media (max-width: $screen-xl) {
     width: 70%;
@@ -66,8 +72,6 @@ Home page layout
 
 .home-section-landing-image {
   display: none;
-  background: $hero-background-color;
-
   @media (max-width: $screen-sm) {
     display: block;
     width: 100%;