diff --git a/src/app/Home.scss b/src/app/Home.scss index e8ba698..9339277 100644 --- 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 deleted file mode 100644 index cb6d497..0000000 --- a/src/app/components/DesktopFruits/DesktopFruits.scss +++ /dev/null @@ -1,90 +0,0 @@ -.desktop-fruits { - $num-pages: 5; - position: absolute; - top: 0; - width: 100%; - height: calc(100vh * $num-pages); - z-index: 1; - pointer-events: none; - overflow-x: hidden; - display: none; - - @media (min-width: $tablet-breakpoint) { - display: block; - } - - .fruits-theme-section { - @media (min-width: $tablet-breakpoint) { - display: block; - position: relative; - transform: translateY(100vh * 2); - width: 100%; - height: 100vh; - } - - #desktop-pomegranate-container { - position: absolute; - bottom: 0; - right: -100px; - z-index: 1; - height: fit-content; - width: calc(160px + 8vw); - - #desktop-pomegranate { - transform: rotate(-20deg); - object-fit: contain; - width: 100%; - height: fit-content; - } - - @media (min-width: $tablet-breakpoint) { - width: calc(120px + 6vw); - bottom: calc(10px - 5.5vw); - right: 20px; - } - } - } - - .fruits-faq-section { - display: none; - - @media (min-width: $tablet-breakpoint) { - display: block; - position: relative; - transform: translateY(100vh * 2); - width: 100%; - height: 100vh; - } - - #desktop-apricot-container { - display: flex; - position: absolute; - align-items: baseline; - justify-content: center; - gap: 10%; - bottom: -4.5%; - width: 100%; - margin-inline: auto; - z-index: 0; - - .apricot { - transform: rotate(-10deg) translateX(20%); - - &#desktop-apricot-1 { - height: 15%; - width: 15%; - } - - &#desktop-apricot-2 { - height: 20%; - width: 20%; - } - - &#desktop-apricot-3 { - height: 25%; - width: 25%; - } - } - } - } -} diff --git a/src/app/components/DesktopFruits/DesktopFruits.tsx b/src/app/components/DesktopFruits/DesktopFruits.tsx deleted file mode 100644 index aadb2b0..0000000 --- a/src/app/components/DesktopFruits/DesktopFruits.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import Image from 'next/image'; -import Pomegranate from '@/assets/images/pomegranate.webp'; -import Apricot from '@/assets/images/Apricot.webp'; -import './DesktopFruits.scss'; - -// Used to display desktop fruits that overlap with other sections -export default function DesktopFruits() { - return ( -
-
-
- Pomegranate -
-
-
-
- apricot - apricot - apricot -
-
-
- ); -} diff --git a/src/app/components/Sticker/Sticker.scss b/src/app/components/Sticker/Sticker.scss index 18acb72..3d2fe6b 100644 --- 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 index 82d2732..6bf7e1c 100644 --- 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; @@ -40,7 +39,6 @@ export default function Home() { {/* Footer is inside Apply */} - ); diff --git a/src/app/pages/FAQ/FAQ.scss b/src/app/pages/FAQ/FAQ.scss index 8aeb660..432ac3c 100644 --- 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 index 77bc588..ed43635 100644 --- 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" /> + +
+ apricot + apricot + apricot +
); } diff --git a/src/app/pages/Overview/Overview.scss b/src/app/pages/Overview/Overview.scss index 1149ce8..10847b0 100644 --- 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 index 342208c..385cb23 100644 --- 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 index ad2ec0d..3494d87 100644 --- 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);