From a346e80e59034b9f3b1788f3ef07b4b6f83fc6f4 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Thu, 16 Feb 2023 15:52:05 +0500
Subject: [PATCH] responsive styling

---
 src/components/aside/AsideNews.tsx     | 10 +++---
 src/components/global/NewsCategory.tsx |  9 ++---
 src/components/news/News.tsx           | 46 +++++++++++++++-----------
 src/styles/_aside.scss                 |  9 -----
 src/styles/_asideNews.scss             | 38 ++++++++++++++++++++-
 src/styles/_footer.scss                | 21 +++++++++---
 src/styles/_main.scss                  | 18 ++++++++++
 src/styles/_news.scss                  | 25 ++++++++++++--
 8 files changed, 128 insertions(+), 48 deletions(-)

diff --git a/src/components/aside/AsideNews.tsx b/src/components/aside/AsideNews.tsx
index cc0ed72..14e1a29 100644
--- a/src/components/aside/AsideNews.tsx
+++ b/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>
   );
 };
 
diff --git a/src/components/global/NewsCategory.tsx b/src/components/global/NewsCategory.tsx
index 5a1be00..22577b0 100644
--- a/src/components/global/NewsCategory.tsx
+++ b/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;
diff --git a/src/components/news/News.tsx b/src/components/news/News.tsx
index 00873d3..ac3b204 100644
--- a/src/components/news/News.tsx
+++ b/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>
   );
 };
 
diff --git a/src/styles/_aside.scss b/src/styles/_aside.scss
index 1251438..f2f7e32 100644
--- a/src/styles/_aside.scss
+++ b/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;
-//   }
-// }
diff --git a/src/styles/_asideNews.scss b/src/styles/_asideNews.scss
index 4f7d120..436845c 100644
--- a/src/styles/_asideNews.scss
+++ b/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;
+  }
+}
diff --git a/src/styles/_footer.scss b/src/styles/_footer.scss
index e8979d8..f9e05ee 100644
--- a/src/styles/_footer.scss
+++ b/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;
+  }
+}
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
index 872304a..f7d4200 100644
--- a/src/styles/_main.scss
+++ b/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;
+    }
+  }
+}
diff --git a/src/styles/_news.scss b/src/styles/_news.scss
index 8832afa..de19939 100644
--- a/src/styles/_news.scss
+++ b/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) {
+}