fix: use overflow clip to allow fruits to overlap section below

ucsddesignco · Jun 2, 2024 · d948803 · d948803
1 parent 023b8f7
commit d948803
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 19 deletions.
diff --git a/src/app/Home.scss b/src/app/Home.scss
@@ -37,14 +37,11 @@
       scroll-snap-align: center;
       padding-block: $main-padding-mobile-block;
       padding-inline: $main-padding-mobile-inline;
-
-      overflow-x: hidden;
-
-      @media (min-width: $tablet-breakpoint) {
-        height: 100vh;
-      }
+      overflow: hidden;
 
       @media (min-width: $mobile-breakpoint) {
+        overflow: clip;
+        overflow-clip-margin: 100px;
         padding-block: $main-padding-desktop-block;
         padding-inline: $main-padding-desktop-inline;
 

diff --git a/src/app/components/Overview/Squash/Squash.scss b/src/app/components/Overview/Squash/Squash.scss
@@ -7,6 +7,7 @@
   align-items: flex-end;
   bottom: calc(60% + 7vw);
   left: 55%;
+  z-index: 1;
 
   @media (min-width: 500px) {
     bottom: calc(18% + 7vw);

diff --git a/src/app/pages/FAQ/FAQ.scss b/src/app/pages/FAQ/FAQ.scss
@@ -15,7 +15,6 @@
   }
 
   @media (min-width: $mobile-breakpoint) {
-    overflow: hidden;
     h2 {
       margin-bottom: calc($main-padding-mobile-block);
     }
@@ -55,6 +54,7 @@
       gap: 10%;
       bottom: -5%;
       width: calc(100% - 2 * $main-padding-desktop-inline);
+      z-index: 1;
 
       .apricot {
         transform: rotate(-10deg);

diff --git a/src/app/pages/Landing/Landing.scss b/src/app/pages/Landing/Landing.scss
@@ -44,10 +44,10 @@
   .add-me-to-cart {
     margin-inline: auto;
     width: 80%;
-    max-width: 400px;
+    max-width: 300px;
     color: $primary-white;
     background-color: $primary-black;
-    padding-block: 20px;
+    padding-block: 15px;
     transition: background-color 0.3s;
     border: 2px solid $primary-black;
     border-radius: 5px;

diff --git a/src/app/pages/Overview/Overview.scss b/src/app/pages/Overview/Overview.scss
@@ -1,8 +1,4 @@
 #overview {
-  overflow: hidden;
-  // Account for additional padding for theme page to allow squash to be visible
-  padding-bottom: calc(2 * $main-padding-mobile-block);
-
   @media (min-width: $tablet-breakpoint) {
     padding-bottom: 0;
     padding-bottom: $main-padding-desktop-block;

diff --git a/src/app/pages/Themes/Themes.scss b/src/app/pages/Themes/Themes.scss
@@ -2,8 +2,6 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  padding-top: 0;
-  overflow: hidden;
 
   @media (min-width: $tablet-breakpoint) {
     padding-top: $main-padding-mobile-block;
@@ -30,7 +28,6 @@
 
   .pomegranate-container {
     position: absolute;
-    // bottom: calc(-15% - 5vw);
     bottom: 0;
     right: -100px;
     z-index: 1;
@@ -45,9 +42,9 @@
     }
 
     @media (min-width: $tablet-breakpoint) {
-      right: auto;
-      bottom: max(calc(-75px - 6.5vw), -200px);
-      left: 150px;
+      width: calc(120px + 6vw);
+      bottom: calc(10px - 5.5vw);
+      right: 150px;
     }
   }
 }