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 ( -