main page adaptive ?not nav & footer

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 = () => {
               <Swiper
                 modules={[]}
                 spaceBetween={24}
-                slidesPerView={3}
+                autoHeight={true}
+                slidesPerView={widthBounds ? 2 : 3}
                 loop={false}
               >
                 {videoData

src/components/main/MainSlider.tsx

@@ -36,6 +36,7 @@ const MainSlider = () => {
     <section className="main-slider">
       <Swiper
         modules={[Navigation, Autoplay]}
+        autoHeight={true}
         spaceBetween={0}
         slidesPerView={1}
         autoplay={{ delay: 6000 }}

src/components/main/PartnersSection.tsx

@@ -1,6 +1,6 @@
 // Modules
 import { Swiper, SwiperSlide } from "swiper/react";
-import { Navigation, Autoplay } from "swiper";
+import { Navigation, Autoplay, FreeMode } from "swiper";
 import { v4 as uuidv4 } from "uuid";
 import { useState, useEffect } from "react";
 import Skeleton from "react-loading-skeleton";
@@ -22,6 +22,9 @@ import { partnersType } from "../../types/partnersType";
 import { getPartnerSliderData } from "../../helpers/apiRequests";
 import { highlightColor } from "../../helpers/otherVariables";
 
+// Hooks
+import useMediaQuery from "../../hooks/useMediaQuery";
+
 const Partners = () => {
   // State
   const [partnerData, setPartnerData]: [
@@ -34,6 +37,13 @@ const Partners = () => {
     getPartnerSliderData(setPartnerData);
   }, []);
 
+  // Width
+  const widthBounds: Record<number, boolean> = {
+    1200: useMediaQuery("(max-width: 1200px)"),
+    860: useMediaQuery("(max-width: 860px)"),
+    500: useMediaQuery("(max-width: 500px)"),
+  };
+
   return (
     <section className="partners">
       <div className="container">
@@ -41,11 +51,20 @@ const Partners = () => {
           <SectionTitle title={"Партнеры"} />
           <div className="partners-content">
             <Swiper
-              modules={[Navigation, Autoplay]}
+              modules={[Navigation, Autoplay, FreeMode]}
               autoplay={{ delay: 3000 }}
               spaceBetween={0}
-              slidesPerView={4}
+              slidesPerView={
+                widthBounds["500"]
+                  ? 1
+                  : widthBounds["860"]
+                  ? 2
+                  : widthBounds["1200"]
+                  ? 3
+                  : 4
+              }
               loop={true}
+              freeMode={!widthBounds["500"]}
               navigation={{
                 nextEl: ".slider-next",
                 prevEl: ".slider-prev",

src/hooks/useMediaQuery.tsx

@@ -0,0 +1,21 @@
+import { useState, useEffect } from "react";
+
+// query e.g.  "(max-width: 1300px)"
+
+const useMediaQuery = (query: string) => {
+  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;

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;
+  }
+}

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;
+  }
+}

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;
+  }
+}

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;
+  }
+}

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;
+  }
+}

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;
+    }
+  }
+}

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;
+  }
+}