responsive styling

src/components/aside/AsideNews.tsx

@@ -17,20 +17,20 @@ interface Props {
 
 const AsideNews = ({ title, date, img, category, link }: Props) => {
   return (
-    <div className="aside-news">
+    <Link to={link} className="aside-news">
       <div className="aside-news-wrapper">
-        <Link to={link} className="aside-news-image">
+        <div className="aside-news-image">
           <LazyLoadImage
             src={img}
             alt="image"
             useIntersectionObserver
             effect="blur"
           />
-        </Link>
+        </div>
         <div className="aside-news-info">
           <div className="aside-news-info-inner">
             <div className="aside-news-status">
-              <NewsCategory title={category} id={1} />
+              <NewsCategory title={category} />
               <NewsDate date={date} />
             </div>
             <Link to={link}>
@@ -39,7 +39,7 @@ const AsideNews = ({ title, date, img, category, link }: Props) => {
           </div>
         </div>
       </div>
-    </div>
+    </Link>
   );
 };
 

src/components/global/NewsCategory.tsx

@@ -3,15 +3,10 @@ import { Link } from "react-router-dom";
 
 interface Props {
   title: string;
-  id: number;
 }
 
-const NewsCategory = ({ title, id }: Props) => {
-  return (
-    <Link to={`/category/${id}`} className="news-category">
-      {title}
-    </Link>
-  );
+const NewsCategory = ({ title }: Props) => {
+  return <p className="news-category">{title}</p>;
 };
 
 export default NewsCategory;

src/components/news/News.tsx

@@ -1,29 +1,34 @@
 // Modules
-import { Link } from 'react-router-dom';
-import { LazyLoadImage } from 'react-lazy-load-image-component';
-import { v4 as uuidv4 } from 'uuid';
+import { Link } from "react-router-dom";
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import { v4 as uuidv4 } from "uuid";
 
 // Components
-import NewsCategory from '../global/NewsCategory';
-import NewsDate from '../global/NewsDate';
-import { IPostsData } from '../../types/data.types';
+import NewsCategory from "../global/NewsCategory";
+import NewsDate from "../global/NewsDate";
+import { IPostsData } from "../../types/data.types";
 
 interface Props {
-  id: IPostsData['id'];
-  title: IPostsData['title'];
-  text: IPostsData['content_html'];
-  categories: IPostsData['categories'];
-  date: IPostsData['published_at'];
-  img: IPostsData['featured_images'][0]['path'];
+  id: IPostsData["id"];
+  title: IPostsData["title"];
+  text: IPostsData["content_html"];
+  categories: IPostsData["categories"];
+  date: IPostsData["published_at"];
+  img: IPostsData["featured_images"][0]["path"];
 }
 
 const News = ({ id, title, text, categories, date, img }: Props) => {
   return (
-    <div className="news">
+    <Link to={`/news/${id}`}>
       <div className="news-wrapper">
-        <Link to={`/news/${id}`} className="news-image">
-          <LazyLoadImage src={img} alt="image" useIntersectionObserver effect="blur" />
-        </Link>
+        <div className="news-image">
+          <LazyLoadImage
+            src={img}
+            alt="image"
+            useIntersectionObserver
+            effect="blur"
+          />
+        </div>
         <div className="news-info">
           <div className="news-info-inner">
             <Link to={`/news/${id}`}>
@@ -32,18 +37,21 @@ const News = ({ id, title, text, categories, date, img }: Props) => {
             <div className="news-status">
               <div className="news-status-left">
                 {categories.map((category) => {
-                  return <NewsCategory key={uuidv4()} title={category.name} id={category.id} />;
+                  return <NewsCategory key={uuidv4()} title={category.name} />;
                 })}
               </div>
               <div className="news-status-right">
                 <NewsDate date={date} />
               </div>
             </div>
-            <div className="news-text" dangerouslySetInnerHTML={{ __html: text }}></div>
+            <div
+              className="news-text"
+              dangerouslySetInnerHTML={{ __html: text }}
+            ></div>
           </div>
         </div>
       </div>
-    </div>
+    </Link>
   );
 };
 

src/styles/_aside.scss

@@ -27,7 +27,6 @@
 
 @media (max-width: 450px) {
   .aside-wrapper {
-    gap: 3.2rem;
     padding: 2.4rem 0.8rem;
   }
 }
@@ -37,11 +36,3 @@
     gap: 0rem;
   }
 }
-
-// @media (max-width: 1024px) {
-//   .aside {
-//     flex-direction: row;
-//     align-items: flex-start;
-//     gap: 2.4rem;
-//   }
-// }

src/styles/_asideNews.scss

@@ -1,5 +1,7 @@
 .aside-news-wrapper {
-  display: flex;
+  display: grid;
+  grid-template-columns: 40% auto;
+  grid-template-rows: 12.4rem;
   gap: 1.6rem;
 }
 
@@ -11,6 +13,7 @@
 }
 
 .aside-news-info-inner {
+  width: 100%;
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
@@ -45,3 +48,36 @@
   font-weight: 400;
   color: $body;
 }
+
+.aside-news-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+
+  span {
+    width: 100%;
+    height: 100%;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .aside-news-wrapper {
+    grid-template-columns: 25% 1fr;
+  }
+}
+
+@media screen and (max-width: 750px) {
+  .aside-news-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+  .aside-news-image {
+    height: 16rem;
+  }
+}

src/styles/_footer.scss

@@ -96,8 +96,19 @@
   }
 }
 
-// @media (max-width: 390px) {
-//   .footer-nav-list {
-//     grid-template-columns: auto;
-//   }
-// }
+@media (max-width: 400px) {
+  .footer-wrapper {
+    gap: 2.4rem;
+  }
+  .footer-nav-list {
+    gap: 1.6rem;
+  }
+  .footer-nav-list-item {
+    a {
+      font-size: 1.6rem;
+    }
+  }
+  .footer-info-item-title {
+    font-size: 1.6rem;
+  }
+}

src/styles/_main.scss

@@ -59,6 +59,16 @@
   }
 
   &__big {
+    min-height: 16rem;
+    span {
+      width: 100%;
+      height: 100%;
+    }
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
     &-overlay {
       padding: 2.4rem;
     }
@@ -139,3 +149,11 @@
     }
   }
 }
+
+@media screen and (max-width: 500px) {
+  .main-content-item__big {
+    h2 {
+      font-size: 1.4rem;
+    }
+  }
+}

src/styles/_news.scss

@@ -1,6 +1,6 @@
 .news-wrapper {
-  display: flex;
-  // align-items: center;
+  display: grid;
+  grid-template-columns: 32rem 1fr;
   gap: 1.6rem;
 }
 
@@ -105,3 +105,24 @@
     font-size: 2rem;
   }
 }
+
+@media (max-width: 900px) {
+  .news-wrapper {
+    grid-template-columns: 25rem 1fr;
+  }
+}
+@media (max-width: 750px) {
+  .news-title {
+    font-size: 1.8rem;
+  }
+  .news-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+  .news-image {
+    min-height: 16rem;
+  }
+}
+
+@media (max-width: 400px) {
+}