feat: adjusted responsiveness

thepurplebubble · Dec 23, 2023 · 6321873 · 6321873
1 parent c22bf83
commit 6321873
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 83 deletions.
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -31,12 +31,17 @@ import "../styles/index.css";
             >
               Help Contribute
             </a>
-            <button type="button" class="home-button button" id="email-form-button" form-button
-              >Sign Up For Newsletter</button
+            <button
+              type="button"
+              class="home-button button"
+              id="email-form-button"
+              form-button>Sign Up For Newsletter</button
             >
           </div>
         </div>
-        <button class="chevron-button" id="chevron-button"></button>
+        <div class="chevron-container">
+          <button class="chevron-button" id="chevron-button"></button>
+        </div>
         <div class="home-features">
           <div class="home-container1">
             <div
@@ -162,48 +167,3 @@ import "../styles/index.css";
   });
 </script>
 
-<style>
-  @media (max-width: 1000px) {
-    .home-container {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-    .home-container1 {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-    .home-container2 {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-    .home-btn-group {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-    .home-text1 {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-    .home-features {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-    .home-lottie-node {
-      align-items: center;
-      width: 100%;
-      height: 100%;
-    }
-  }
-</style>
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -113,22 +113,3 @@ img {
 html {
   scroll-behavior: smooth;
 }
-
-.hero {
-  width: 100%;
-  height: 757px;
-  display: flex;
-  padding: var(--dl-space-space-threeunits);
-  position: relative;
-  min-height: 80vh;
-  align-items: center;
-  flex-direction: column;
-  background-size: cover;
-  justify-content: center;
-  background-image: url("https://cdn.purplebubble.org/background.png");
-}
-
-.hero h1 {
-  color: var(--dl-color-gray-white);
-  font-size: 3rem;
-}
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -36,6 +36,27 @@
   --dl-space-space-oneandhalfunits: 24px;
 }
 
+.hero {
+  width: 100%;
+  height: 757px;
+  display: flex;
+  padding: var(--dl-space-space-threeunits);
+  position: relative;
+  min-height: 80vh;
+  align-items: center;
+  flex-direction: column;
+  background-size: cover;
+  justify-content: center;
+  background-image: url("https://cdn.purplebubble.org/background.png");
+}
+
+.hero h1 {
+  color: var(--dl-color-gray-white);
+  font-size: 3rem;
+  text-align: center;
+}
+
+
 .button {
   color: var(--dl-color-gray-black);
   display: inline-block;
@@ -378,18 +399,28 @@
   height: 504px;
 }
 
+.chevron-container {
+  margin-bottom: var(--dl-space-space-threeunits);
+  transform: translateY(-5rem);
+  width: 4em;
+  height: 4em;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
 .chevron-button {
   width: 4em;
   height: 4em;
   fill: var(--dl-color-gray-white);
-  transform: translateY(-5em);
   background-image: url("/chevron.svg");
   background-repeat: no-repeat;
   background-size: contain;
 }
 
 .chevron-button:hover {
-  transform: translateY(-5em) scale(1.1);
+  transform: scale(1.1);
 }
 
 @media (max-width: 1600px) {
@@ -418,20 +449,67 @@
 }
 
 @media (max-width: 991px) {
-  .home-hero {
-    flex-direction: column;
-  }
-
   .home-text {
     text-align: center;
   }
 
   .home-text1 {
     text-align: center;
   }
+
+  .home-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .home-container1 {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .home-container2 {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .home-text1 {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .home-features {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .home-lottie-node {
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 768px) {
+  .home-hero {
+    flex-direction: column;
+  }
+
+  .home-btn-group {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .home-button {
+    margin-top: var(--dl-space-space-unit);
+    margin-left: 0px;
+  }
+
   .home-hero {
     padding-left: var(--dl-space-space-twounits);
     padding-right: var(--dl-space-space-twounits);
@@ -441,6 +519,10 @@
     padding-left: var(--dl-space-space-twounits);
     padding-right: var(--dl-space-space-twounits);
   }
+
+  .chevron-container {
+    display: none;
+  }
 }
 
 @media (max-width: 479px) {
@@ -452,15 +534,6 @@
     padding-right: var(--dl-space-space-unit);
   }
 
-  .home-btn-group {
-    flex-direction: column;
-  }
-
-  .home-button {
-    margin-top: var(--dl-space-space-unit);
-    margin-left: 0px;
-  }
-
   .home-features {
     padding-top: var(--dl-space-space-twounits);
     padding-left: var(--dl-space-space-unit);