From 70e64d66513688d5dbfb2505f0602aad6392295f Mon Sep 17 00:00:00 2001 From: Aaron Chan <42254254+aaronchan32@users.noreply.github.com> Date: Sun, 2 Jun 2024 18:59:49 -0700 Subject: [PATCH] fix: styling fixes --- src/app/Home.scss | 3 +-- src/app/components/Fruits/Fruits.scss | 10 +++++++- src/app/components/Fruits/Fruits.tsx | 6 ++--- .../Navbar/Hamburger/Hamburger.scss | 4 +-- .../components/ThemesSlider/ThemesSlider.scss | 8 +++++- .../components/ThemesSlider/ThemesSlider.tsx | 24 +++++++++++++++--- src/app/pages/Landing/Landing.scss | 12 ++++++++- src/app/pages/Landing/Landing.tsx | 25 +++++++++++-------- 8 files changed, 69 insertions(+), 23 deletions(-) diff --git a/src/app/Home.scss b/src/app/Home.scss index 8ea6693..6041b3a 100644 --- a/src/app/Home.scss +++ b/src/app/Home.scss @@ -42,7 +42,7 @@ border: 1px solid $outline-gray; margin-block: $main-padding-mobile-block; - @media (min-width: $mobile-breakpoint) { + @media (min-width: $tablet-breakpoint) { display: none; } } @@ -52,7 +52,6 @@ } @media (min-width: $mobile-breakpoint) { - padding-block: $main-padding-tablet-block; padding-inline: $main-padding-tablet-inline; } @media (min-width: $tablet-breakpoint) { diff --git a/src/app/components/Fruits/Fruits.scss b/src/app/components/Fruits/Fruits.scss index 0f20bdd..87286b6 100644 --- a/src/app/components/Fruits/Fruits.scss +++ b/src/app/components/Fruits/Fruits.scss @@ -2,7 +2,9 @@ svg { display: none; } - height: min(60dvh, 340px); + // height: min(60dvh, 340px); + height: 100%; + margin-bottom: 1rem; // width: calc(80dvw - 2 * $main-padding-mobile-inline); // margin-inline: auto; // margin-block: 2.5dvh; @@ -16,6 +18,8 @@ display: block; position: absolute; width: 100% !important; + margin-top: auto; + align-self: flex-end; @media (min-width: $tablet-breakpoint) { display: none; @@ -27,6 +31,10 @@ position: absolute; width: 100%; + path { + stroke-width: 5; + } + @media (min-width: $tablet-breakpoint) { display: block; } diff --git a/src/app/components/Fruits/Fruits.tsx b/src/app/components/Fruits/Fruits.tsx index b428e41..9a6fdc2 100644 --- a/src/app/components/Fruits/Fruits.tsx +++ b/src/app/components/Fruits/Fruits.tsx @@ -76,7 +76,7 @@ export default function Fruits() { friction: 0, // Adjust this value, 0 means no friction restitution: 0.1, render: { - fillStyle: 'transparent' + fillStyle: 'red' } } ); @@ -91,7 +91,7 @@ export default function Fruits() { friction: 0, // Adjust this value, 0 means no friction restitution: 0.1, render: { - fillStyle: 'transparent' + fillStyle: 'red' } } ); @@ -464,7 +464,7 @@ export default function Fruits() { const cherryShape = createEllipseVertices({ cx: 0, cy: 0, - ry: scene.current?.clientWidth * cherryScale * 1, + ry: scene.current?.clientWidth * cherryScale * 1 + 20, rx: scene.current?.clientWidth * cherryScale * 1 * cherryRatio, steps: 20 }); diff --git a/src/app/components/Navbar/Hamburger/Hamburger.scss b/src/app/components/Navbar/Hamburger/Hamburger.scss index 4e31123..0cbffdf 100644 --- a/src/app/components/Navbar/Hamburger/Hamburger.scss +++ b/src/app/components/Navbar/Hamburger/Hamburger.scss @@ -9,8 +9,8 @@ padding-inline: calc($main-padding-mobile-inline/2 - $hamburger-width/2); @media (min-width: $mobile-breakpoint) { - padding-block: $main-padding-tablet-block; - padding-right: calc($main-padding-tablet-inline/2 - $hamburger-width/2); + padding-block: calc($main-padding-tablet-block/2); + padding-inline: calc($main-padding-tablet-inline/2 - $hamburger-width/2); } .container { diff --git a/src/app/components/ThemesSlider/ThemesSlider.scss b/src/app/components/ThemesSlider/ThemesSlider.scss index f253d7e..82c78c9 100644 --- a/src/app/components/ThemesSlider/ThemesSlider.scss +++ b/src/app/components/ThemesSlider/ThemesSlider.scss @@ -27,6 +27,11 @@ grid-template-columns: 1fr; } + .theme-slide { + margin-bottom: 0; + margin-top: 2.5rem; + } + .arrows { display: none; } @@ -83,7 +88,8 @@ max-height: 575px; display: block; position: absolute; - background: $right-hide-slides-gradient; + // background: $right-hide-slides-gradient; + background: $hide-slides-gradient; } } diff --git a/src/app/components/ThemesSlider/ThemesSlider.tsx b/src/app/components/ThemesSlider/ThemesSlider.tsx index 4a0da4a..1137748 100644 --- a/src/app/components/ThemesSlider/ThemesSlider.tsx +++ b/src/app/components/ThemesSlider/ThemesSlider.tsx @@ -7,7 +7,7 @@ import './ThemesSlider.scss'; import ThemeSlide from './ThemeSlide/ThemeSlide'; import SliderArrow from './SliderArrow/SliderArrow'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; export type SlideContent = { theme: string; @@ -26,13 +26,14 @@ export default function ThemesSlider({ }) { const [currentSlide, setCurrentSlide] = useState(0); const [loaded, setLoaded] = useState(false); + const [isTablet, setIsTablet] = useState(false); const [sliderRef, instanceRef] = useKeenSlider({ loop: true, initial: 0, breakpoints: { '(min-width: 550px)': { - slides: { origin: 'center', perView: 1.5, spacing: 10 } + slides: { origin: 'center', perView: 1.5, spacing: 0 } }, '(min-width: 979px)': { slides: { perView: 1.5, spacing: 10 } @@ -55,10 +56,27 @@ export default function ThemesSlider({ } }); + useEffect(() => { + const checkTablet = () => { + if (window.innerWidth <= 979) { + setIsTablet(true); + } else { + setIsTablet(false); + } + }; + + checkTablet(); + window.addEventListener('resize', checkTablet); + return () => window.removeEventListener('resize', checkTablet); + }, []); + //TODO: add aria controls and labels to slide navigation return ( -
+
{slidesContent.map(slide => (
diff --git a/src/app/pages/Landing/Landing.scss b/src/app/pages/Landing/Landing.scss index fe562e0..775541d 100644 --- a/src/app/pages/Landing/Landing.scss +++ b/src/app/pages/Landing/Landing.scss @@ -1,4 +1,10 @@ #landing { + height: calc(100dvh + calc(clamp(20px, 30px + 1.2vw, 40px))); + + display: flex; + flex-direction: column; + justify-content: space-between; + h1, h3 { width: fit-content; @@ -21,9 +27,13 @@ .mobile-header { width: fit-content; - margin-inline: auto; + text-align: left; margin-block-start: calc($main-padding-mobile-inline + 25px); + margin-inline: auto; + @media (min-width: $mobile-breakpoint) { + margin-inline: 0; + } @media (min-width: $mobile-breakpoint) { margin-block-start: calc(50px); } diff --git a/src/app/pages/Landing/Landing.tsx b/src/app/pages/Landing/Landing.tsx index f84d06d..c28eecd 100644 --- a/src/app/pages/Landing/Landing.tsx +++ b/src/app/pages/Landing/Landing.tsx @@ -47,17 +47,22 @@ export default function Landing({ landingRef }: LandingProps) { -