Abstract greeter into its own class

albertguo2006 · Nov 25, 2023 · ee321d0 · ee321d0
1 parent 1474cfc
commit ee321d0
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 29 deletions.
diff --git a/src/about-us/index.html b/src/about-us/index.html
@@ -24,7 +24,17 @@
     </head>
     <body>
         <ecf-wrapper>
-            <div class="about-us-1"></div>
+            <div class="about-us-1">
+                <div class="about-us-1__bg parallax lazy-load">
+                    <div class="greeter-overlay">
+                        <div>
+                            <h1>ABOUT US</h1>
+                            <div class="orange-bar"></div>
+                        </div>
+                        <h2>ECF’s regional branches</h2>
+                    </div>
+                </div>
+            </div>
         </ecf-wrapper>
     </body>
 </html>
diff --git a/src/assets/background/about-us-1.png b/src/assets/background/about-us-1.png
diff --git a/src/assets/background/about-us-1.webp b/src/assets/background/about-us-1.webp
diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css
@@ -101,6 +101,34 @@ body,
     flex: 1 0 auto;
 }
 
+.greeter-overlay {
+    display: flex;
+    flex-direction: column;
+    row-gap: 3vh;
+    position: absolute;
+    bottom: 20vh;
+    left: 5vw;
+    width: 25%;
+    color: white;
+}
+
+/* Separate orange bar from content */
+.greeter-overlay > div > h1 {
+    margin: 0 0 1vh;
+}
+
+/* Add more emphasis to the text */
+.greeter-overlay h1 {
+    font-size: calc(var(--h1-size) * 1.25);
+    color: white;
+}
+
+/* Add more emphasis to the text */
+.greeter-overlay h2 {
+    font-size: calc(var(--h2-size) * 1.25);
+    color: white;
+}
+
 /* Nav start */
 /* TODO mobile nav */
 nav {
@@ -459,29 +487,6 @@ footer .footer__socials {
     background-image: url("../background/get-involved-1.webp");
 }
 
-.get-involved-1__overlay {
-    display: flex;
-    flex-direction: column;
-    row-gap: 2vh;
-    position: absolute;
-    bottom: 20vh;
-    left: 5vw;
-    width: 20%;
-    color: white;
-}
-
-/* Add more emphasis to the text */
-.get-involved-1__overlay > h1 {
-    font-size: calc(var(--h1-size) * 1.35);
-    color: white;
-}
-
-/* Add more emphasis to the text */
-.get-involved-1__overlay > h2 {
-    font-size: calc(var(--h2-size) * 1.35);
-    color: white;
-}
-
 .get-involved-2 {
     display: flex;
     flex-direction: column;
@@ -632,7 +637,8 @@ footer .footer__socials {
 /* Get Involved end */
 
 /* About Us start */
-.about-us-1 {
+.about-us-1__bg {
+    background-image: url("../background/about-us-1.webp");
 }
 
 /* About Us end */

diff --git a/src/get-involved/index.html b/src/get-involved/index.html
@@ -27,9 +27,11 @@
         <ecf-wrapper>
             <div class="get-involved-1">
                 <div class="get-involved-1__bg parallax lazy-load">
-                    <div class="get-involved-1__overlay">
-                        <h1>GET INVOLVED</h1>
-                        <div class="orange-bar"></div>
+                    <div class="greeter-overlay">
+                        <div>
+                            <h1>GET INVOLVED</h1>
+                            <div class="orange-bar"></div>
+                        </div>
                         <h2>donate, volunteer</h2>
                     </div>
                 </div>
@@ -45,7 +47,7 @@ <h1>UPCOMING EVENTS</h1>
                 </div>
             </div>
             <!-- If wanted, we could also just replace the manually drawn oval with static image?
-    That will make the oval not affected by the parallax affect tho -->
+That will make the oval not affected by the parallax affect tho -->
             <div class="get-involved-3">
                 <div class="get-involved-3__bg parallax lazy-load">
                     <div class="get-involved-3__oval">