fix: use overflow visible for overlapping fruits and stickers

ucsddesignco · Jun 2, 2024 · 1ec82ec · 1ec82ec
1 parent c0ca664
commit 1ec82ec
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 158 deletions.
diff --git a/src/app/Home.scss b/src/app/Home.scss
@@ -5,6 +5,7 @@
 
   .main-content {
     overflow-y: scroll;
+    overflow-x: hidden;
     scroll-snap-type: none;
     width: 100%;
     position: relative;
@@ -39,11 +40,17 @@
       padding-inline: 24px;
       padding-block: $main-padding-mobile-block;
 
+      overflow-y: visible;
+
       @media (min-width: 350px) {
         padding-inline: $main-padding-mobile-inline;
       }
-      overflow: hidden;
+
       @media (min-width: $mobile-breakpoint) {
+        padding-block: $main-padding-tablet-block;
+        padding-inline: $main-padding-tablet-inline;
+      }
+      @media (min-width: $tablet-breakpoint) {
         padding-block: $main-padding-desktop-block;
         padding-inline: $main-padding-desktop-inline;
 

diff --git a/src/app/components/DesktopFruits/DesktopFruits.scss b/src/app/components/DesktopFruits/DesktopFruits.scss
diff --git a/src/app/components/DesktopFruits/DesktopFruits.tsx b/src/app/components/DesktopFruits/DesktopFruits.tsx
diff --git a/src/app/components/Sticker/Sticker.scss b/src/app/components/Sticker/Sticker.scss
@@ -53,7 +53,7 @@
     // }
 
     &.melon-sticker {
-      bottom: -30px !important;
+      bottom: -50px !important;
       right: 50px !important;
     }
 

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -9,7 +9,6 @@ import Themes from './pages/Themes/Themes';
 import FAQ from './pages/FAQ/FAQ';
 import Apply from './pages/Apply/Apply';
 import Navbar from './components/Navbar/Navbar';
-import DesktopFruits from './components/DesktopFruits/DesktopFruits';
 
 export type PageRef = React.RefObject<HTMLElement>;
 
@@ -40,7 +39,6 @@ export default function Home() {
         <FAQ faqRef={faqRef} />
         {/* Footer is inside Apply */}
         <Apply applyRef={applyRef} />
-        <DesktopFruits />
       </div>
     </main>
   );

diff --git a/src/app/pages/FAQ/FAQ.scss b/src/app/pages/FAQ/FAQ.scss
@@ -34,4 +34,36 @@
       transform: rotate(-30deg);
     }
   }
+
+  @media (min-width: $desktop-breakpoint) {
+    #apricot-container {
+      display: flex;
+      position: absolute;
+      align-items: baseline;
+      justify-content: center;
+      gap: 10%;
+      bottom: -5%;
+      width: calc(100% - 2 * $main-padding-desktop-inline);
+      z-index: 3;
+
+      .apricot {
+        transform: rotate(-10deg) translateX(20%);
+
+        &#apricot-3 {
+          height: 15%;
+          width: 15%;
+        }
+
+        &#apricot-4 {
+          height: 20%;
+          width: 20%;
+        }
+
+        &#apricot-5 {
+          height: 25%;
+          width: 25%;
+        }
+      }
+    }
+  }
 }
diff --git a/src/app/pages/FAQ/FAQ.tsx b/src/app/pages/FAQ/FAQ.tsx
@@ -49,6 +49,12 @@ export default function FAQ({ faqRef }: FAQProps) {
         id="apricot-2"
         className="apricot mobile"
       />
+
+      <div id="apricot-container">
+        <Image src={Apricot} alt="apricot" id="apricot-3" className="apricot" />
+        <Image src={Apricot} alt="apricot" id="apricot-4" className="apricot" />
+        <Image src={Apricot} alt="apricot" id="apricot-5" className="apricot" />
+      </div>
     </section>
   );
 }
diff --git a/src/app/pages/Overview/Overview.scss b/src/app/pages/Overview/Overview.scss
@@ -1,16 +1,4 @@
 #overview {
-  // This is so the section can overlap the themes section below
-  padding-bottom: calc($main-padding-mobile-block * 2);
-
-  @media (min-width: 760px) {
-    padding-bottom: $main-padding-mobile-block;
-  }
-
-  @media (min-width: $tablet-breakpoint) {
-    padding-bottom: 0;
-    padding-bottom: $main-padding-desktop-block;
-  }
-
   h2 {
     margin-bottom: 2rem;
   }

diff --git a/src/app/pages/Themes/Themes.scss b/src/app/pages/Themes/Themes.scss
@@ -2,15 +2,6 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  padding-top: 0;
-
-  @media (min-width: 760px) {
-    padding-top: $main-padding-desktop-block;
-  }
-
-  @media (min-width: $tablet-breakpoint) {
-    padding-top: $main-padding-mobile-block;
-  }
 
   h2 {
     margin-bottom: 2rem;
@@ -43,7 +34,9 @@
     }
 
     @media (min-width: $tablet-breakpoint) {
-      display: none;
+      width: calc(130px + 6vw);
+      bottom: calc(10px - 5.5vw);
+      right: 20px;
     }
   }
 }
diff --git a/src/app/styles/variables.scss b/src/app/styles/variables.scss
@@ -21,9 +21,10 @@ $nav-width: clamp(250px, 200px + 11vw, 470px);
 // Spacing
 $main-padding-mobile-block: clamp(20px, 30px + 1.2vw, 40px);
 $main-padding-mobile-inline: clamp(22px, 24px + 5.5vw, 48px);
-
-$main-padding-desktop-block: clamp(52px, 40px + 2.7vw, 80px);
-$main-padding-desktop-inline: clamp(52px, 40px + 2.7vw, 80px);
+$main-padding-tablet-block: clamp(52px, 40px + 2.7vw, 80px);
+$main-padding-tablet-inline: clamp(52px, 40px + 2.7vw, 80px);
+$main-padding-desktop-block: clamp(40px, 22px + 1.7vw, 70px);
+$main-padding-desktop-inline: clamp(40px, 22px + 1.7vw, 70px);
 
 //Font Sizes
 $h1-size: clamp(26px, calc(24px + 0.46vw), 40px);