feat(Core/Client): Home Responsive

NeuronCore · Jul 20, 2023 · c560df1 · c560df1
1 parent a8a356d
commit c560df1
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 3 deletions.
diff --git a/apps/client/src/pages/index.tsx b/apps/client/src/pages/index.tsx
@@ -134,13 +134,21 @@ const Home = () =>
                     </div>
                     <div className={styles.homeBlogsListSwiper}>
                         <Swiper
-                            slidesPerView={3}
-                            spaceBetween={30}
+                            slidesPerView={1}
                             grabCursor
                             keyboard={{ enabled: true }}
-                            onSlideChange={(swiper) => setBlog(swiper.realIndex)}
+                            onSlideChange={(swiper) =>
+                            {
+                                swiper.slideTo(blogs.length <= swiper.realIndex ? 0 : swiper.realIndex);
+                                setBlog(blogs.length <= swiper.realIndex ? 0 : swiper.realIndex);
+                            }}
                             autoplay={{ delay: 2500, disableOnInteraction: false }}
                             modules={[ Keyboard, Autoplay ]}
+                            breakpoints={{
+                                0: { slidesPerView: 1 },
+                                800: { slidesPerView: 2, spaceBetween: 0 },
+                                1100: { slidesPerView: 3 }
+                            }}
                         >
                             {
                                 blogs.map((item, index: number) =>

diff --git a/apps/client/src/styles/pages/home.module.scss b/apps/client/src/styles/pages/home.module.scss
@@ -451,6 +451,16 @@
             font-size: 7rem;
             color: var(--color-primary-light);
             text-align: center;
+
+            @media only screen and (max-width: 750px)
+            {
+                font-size: 5rem;
+            }
+
+            @media only screen and (max-width: 550px)
+            {
+                font-size: 4rem;
+            }
         }
 
         &Filter
@@ -521,6 +531,13 @@
             width: 100%;
             height: 60vh;
 
+            @media only screen and (max-width: 650px)
+            {
+                flex-direction: column-reverse;
+
+                height: fit-content;
+            }
+
             &Content
             {
                 display: flex;
@@ -533,6 +550,11 @@
 
                 width: 100%;
 
+                @media only screen and (max-width: 650px)
+                {
+                    position: relative;
+                }
+
                 &::before
                 {
                     content: '';
@@ -565,6 +587,38 @@
                     margin-left: 20rem;
                     width: 30vw;
 
+                    @media only screen and (max-width: 1450px)
+                    {
+                        margin-left: 10rem;
+                    }
+
+                    @media only screen and (max-width: 1250px)
+                    {
+                        margin-left: 5rem;
+                    }
+
+                    @media only screen and (max-width: 1150px)
+                    {
+                        padding-left: 0;
+                    }
+
+                    @media only screen and (max-width: 1100px)
+                    {
+                        width: 40vw;
+                    }
+
+                    @media only screen and (max-width: 900px)
+                    {
+                        padding: 4rem 0;
+                    }
+
+                    @media only screen and (max-width: 650px)
+                    {
+                        margin: 0;
+                        width: 100%;
+                        padding: 5rem 2rem;
+                    }
+
                     & > h3
                     {
                         font-size: 5rem;
@@ -593,6 +647,22 @@
                 width: 58.75vw;
                 height: 60vh;
 
+                @media only screen and (max-width: 1550px)
+                {
+                    width: 60vw;
+                }
+
+                @media only screen and (max-width: 1100px)
+                {
+                    width: 50vw;
+                }
+
+                @media only screen and (max-width: 650px)
+                {
+                    width: 100%;
+                    height: fit-content;
+                }
+
                 &Item
                 {
                     display: flex;
@@ -607,6 +677,12 @@
                     position: relative;
                     transition: all .2s;
 
+                    @media only screen and (max-width: 1400px)
+                    {
+                        height: 22rem;
+                        width: 18rem;
+                    }
+
                     & > div
                     {
                         display: flex;
@@ -771,6 +847,12 @@
                     {
                         height: 40rem;
                         width: 30rem;
+
+                        @media only screen and (max-width: 1400px)
+                        {
+                            height: 30rem;
+                            width: 25rem;
+                        }
                     }
                 }
 
@@ -1036,6 +1118,16 @@
             color: var(--color-primary-light);
             text-align: center;
             font-weight: lighter;
+
+            @media only screen and (max-width: 750px)
+            {
+                font-size: 5rem;
+            }
+
+            @media only screen and (max-width: 550px)
+            {
+                font-size: 4rem;
+            }
         }
 
         &List
@@ -1306,6 +1398,7 @@
             flex-direction: column;
             gap: 5rem;
 
+            padding: 0 2rem;
             width: 100%;
             max-width: 80rem;
         }