diff --git a/src/components/main/CalendarSection.tsx b/src/components/main/CalendarSection.tsx index 6f81641..2ddc9e4 100644 --- a/src/components/main/CalendarSection.tsx +++ b/src/components/main/CalendarSection.tsx @@ -17,9 +17,13 @@ import { getVideos } from "../../helpers/apiRequests"; import { hosting } from "../../links"; import { highlightColor } from "../../helpers/otherVariables"; +// Hooks +import useMediaQuery from "../../hooks/useMediaQuery"; + const CalendarSection = () => { const [video, setVideo]: playerType = useState(""); const [videoData, setVideoData]: any = useState(); + const widthBounds: boolean = useMediaQuery("(max-width: 750px)"); useEffect(() => { getVideos((res: any) => { setVideoData(res); @@ -44,7 +48,8 @@ const CalendarSection = () => { {videoData diff --git a/src/components/main/MainSlider.tsx b/src/components/main/MainSlider.tsx index 9b98663..39d56df 100644 --- a/src/components/main/MainSlider.tsx +++ b/src/components/main/MainSlider.tsx @@ -36,6 +36,7 @@ const MainSlider = () => {
{ // State const [partnerData, setPartnerData]: [ @@ -34,6 +37,13 @@ const Partners = () => { getPartnerSliderData(setPartnerData); }, []); + // Width + const widthBounds: Record = { + 1200: useMediaQuery("(max-width: 1200px)"), + 860: useMediaQuery("(max-width: 860px)"), + 500: useMediaQuery("(max-width: 500px)"), + }; + return (
@@ -41,11 +51,20 @@ const Partners = () => {
{ + const [matches, setMatches] = useState(false); + + useEffect(() => { + const media = window.matchMedia(query); + if (media.matches !== matches) { + setMatches(media.matches); + } + const listener = () => setMatches(media.matches); + window.addEventListener("resize", listener); + return () => window.removeEventListener("resize", listener); + }, [matches, query]); + + return matches; +}; + +export default useMediaQuery; diff --git a/src/styles/_calendar.scss b/src/styles/_calendar.scss index 9e0f4a0..d44ef87 100644 --- a/src/styles/_calendar.scss +++ b/src/styles/_calendar.scss @@ -188,3 +188,43 @@ width: 100%; @include button-std(0, 1.4rem, true); } + +// Adaptive + +@media screen and (max-width: 1200px) { + .calendar { + max-width: 60rem; + width: 100%; + } + .calendar-table { + td { + width: 3.2rem; + height: 3.2rem; + justify-self: center; + align-self: center; + } + } + .calendar-bottom { + width: 100%; + } +} + +@media screen and (max-width: 500px) { + .calendar-table { + td { + width: unset; + height: unset; + } + + tr { + gap: 1rem; + } + } +} + +@media screen and (max-width: 800px) { + .calendars { + gap: 5rem; + padding: 2.4rem 0; + } +} diff --git a/src/styles/_general.scss b/src/styles/_general.scss index 16963f0..78b1438 100644 --- a/src/styles/_general.scss +++ b/src/styles/_general.scss @@ -19,3 +19,11 @@ body { background-size: cover; background-clip: border-box; } + +// Adaptive + +@media screen and (max-width: 700px) { + .container { + padding: 0 2rem; + } +} diff --git a/src/styles/_main.scss b/src/styles/_main.scss index f6e47e6..254905f 100644 --- a/src/styles/_main.scss +++ b/src/styles/_main.scss @@ -188,3 +188,128 @@ display: flex; align-items: center; } + +// Adaptive + +@media screen and (max-width: 1700px) { + .slider-next-white-next { + right: 1rem; + } + .slider-next-white-prev { + left: 1rem; + } +} + +@media screen and (max-width: 1500px) { + .calendars { + grid-template-columns: 2.4fr 1fr; + } +} + +@media screen and (max-width: 1300px) { + .slider-prev, + .slider-next, + .slider-next-white-prev, + .slider-next-white-next, + .swiper-slider-content-inner a { + display: none; + } + + .event-img { + min-height: unset; + width: 100%; + height: 100%; + } +} + +@media screen and (max-width: 1200px) { + .swiper-bg { + min-height: unset; + height: 100%; + } + .calendars { + display: flex; + flex-direction: column; + } + + .calendars-right { + justify-content: center; + } +} + +@media screen and (max-width: 1100px) { + .swiper-slide-inner { + min-height: 60rem; + } +} + +@media screen and (max-width: 1050px) { + .event { + max-width: unset; + } + .events-content { + grid-template-columns: 1fr 1fr; + gap: 3rem; + } + .event-img { + max-width: unset; + } +} + +@media screen and (max-width: 900px) { + .swiper-slider-content-inner { + h3 { + font-size: 1.8rem; + } + p { + font-size: 1.2rem; + } + } + .swiper-slide-inner { + min-height: 50rem; + } +} + +@media screen and (max-width: 800px) { + .partners-content { + padding-top: 3.2rem; + } + .partners-inner { + padding-bottom: 8rem; + } + .events-inner { + padding-bottom: 2.4rem; + gap: 3.2rem; + } + .main-slider { + padding-bottom: 4.8rem; + } + .swiper-bg { + img { + height: 100%; + object-fit: cover; + } + } +} + +@media screen and (max-width: 700px) { + .swiper-slide-inner { + min-height: 40rem; + } +} + +@media screen and (max-width: 550px) { + .events-content { + grid-template-columns: 1fr; + gap: 2.4rem; + } + .event-img { + max-height: 27.8rem; + } +} + +@media screen and (max-width: 500px) { + .swiper-slide-inner { + min-height: 25rem; + } +} diff --git a/src/styles/_rating.scss b/src/styles/_rating.scss index a80f33b..666f073 100644 --- a/src/styles/_rating.scss +++ b/src/styles/_rating.scss @@ -39,3 +39,17 @@ flex-direction: column; gap: 8rem; } + +// Adaptive + +nav, +footer { + display: none; +} + +@media screen and (max-width: 800px) { + .rating-inner { + padding: 2.4rem 0; + gap: 3.2rem; + } +} diff --git a/src/styles/_search-table.scss b/src/styles/_search-table.scss index da43f24..530f947 100644 --- a/src/styles/_search-table.scss +++ b/src/styles/_search-table.scss @@ -66,3 +66,39 @@ } } } + +// Adaptive + +@media screen and (max-width: 1170px) { + .search-table-wrapper { + width: 100%; + overflow: auto; + } + + .search { + width: 107rem; + } +} + +@media screen and (max-width: 1000px) { + .search-field { + flex-direction: column; + + input { + padding: 1.6rem 0 1.6rem 5rem; + } + } + .search-button { + width: 100%; + padding: 1.6rem; + font-size: 1.6rem; + } + + .search-field .loop { + left: 1.6rem; + top: 27%; + } + .search-field input { + font-size: 1.6rem; + } +} diff --git a/src/styles/_section-title.scss b/src/styles/_section-title.scss index 3f81b9f..e697596 100644 --- a/src/styles/_section-title.scss +++ b/src/styles/_section-title.scss @@ -28,6 +28,7 @@ } .deco-rotated { + top: -1rem; right: 29rem; width: 8rem; height: 200%; @@ -40,3 +41,32 @@ height: 100%; } } + +// Adaptive + +@media screen and (max-width: 1000px) { + .section-title { + padding: 1.2rem; + } + .section-title-deco { + right: -15rem; + } +} + +@media screen and (max-width: 700px) { + .section-title-deco { + right: -25rem; + } + .section-title-title { + font-size: 1.8rem; + } + .section-title-img { + width: 2.5rem; + height: 2.5rem; + + img { + width: 2.5rem; + height: 2.5rem; + } + } +} diff --git a/src/styles/_video-player.scss b/src/styles/_video-player.scss index 0e7be5a..765010f 100644 --- a/src/styles/_video-player.scss +++ b/src/styles/_video-player.scss @@ -32,3 +32,30 @@ transform: translate(-50%, -50%); } } + +// Adaptive + +@media screen and (max-width: 1500px) { + .player { + min-height: unset; + } + .play-icon { + min-height: 38rem; + } +} + +@media screen and (max-width: 800px) { + .play-icon { + min-height: 25rem; + img { + width: 5rem; + height: 5rem; + } + } +} + +@media screen and (max-width: 450px) { + .video-slide { + max-width: unset; + } +}