From 7bf12d3969851d1a0e8afb03377b91cb8f777a95 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Thu, 9 Feb 2023 20:31:43 +0500
Subject: [PATCH] responsiveness

---
 src/components/aside/AsideNews.tsx     | 34 ++++++++-------
 src/components/global/NewsCategory.tsx | 11 +++--
 src/components/global/NewsScroll.tsx   | 12 ++++--
 src/components/news/News.tsx           | 34 ++++++++-------
 src/styles/_main.scss                  | 24 ++++++++++-
 src/styles/_news-section.scss          |  6 +++
 src/styles/_news.scss                  | 57 +++++++++++++++++++++++++-
 src/styles/_newsCategory.scss          |  8 ----
 src/styles/_newsDate.scss              |  6 ---
 src/styles/_newsScroll.scss            | 11 -----
 src/styles/style.scss                  |  3 --
 11 files changed, 138 insertions(+), 68 deletions(-)
 delete mode 100644 src/styles/_newsCategory.scss
 delete mode 100644 src/styles/_newsDate.scss
 delete mode 100644 src/styles/_newsScroll.scss

diff --git a/src/components/aside/AsideNews.tsx b/src/components/aside/AsideNews.tsx
index 652f810..cc0ed72 100644
--- a/src/components/aside/AsideNews.tsx
+++ b/src/components/aside/AsideNews.tsx
@@ -1,11 +1,11 @@
 // Modules
-import { Link } from 'react-router-dom';
-import { LazyLoadImage } from 'react-lazy-load-image-component';
+import { Link } from "react-router-dom";
+import { LazyLoadImage } from "react-lazy-load-image-component";
 // Images
-import { ReactComponent as ArrRight } from '../../assets/icons/arrow-right.svg';
+import { ReactComponent as ArrRight } from "../../assets/icons/arrow-right.svg";
 // Components
-import NewsCategory from '../global/NewsCategory';
-import NewsDate from '../global/NewsDate';
+import NewsCategory from "../global/NewsCategory";
+import NewsDate from "../global/NewsDate";
 
 interface Props {
   title: string;
@@ -17,25 +17,29 @@ interface Props {
 
 const AsideNews = ({ title, date, img, category, link }: Props) => {
   return (
-    <Link to={link} className="aside-news">
+    <div className="aside-news">
       <div className="aside-news-wrapper">
-        <div className="aside-news-image">
-          <LazyLoadImage src={img} alt="image" useIntersectionObserver effect="blur" />
-        </div>
+        <Link to={link} className="aside-news-image">
+          <LazyLoadImage
+            src={img}
+            alt="image"
+            useIntersectionObserver
+            effect="blur"
+          />
+        </Link>
         <div className="aside-news-info">
           <div className="aside-news-info-inner">
             <div className="aside-news-status">
-              <NewsCategory title={category} />
+              <NewsCategory title={category} id={1} />
               <NewsDate date={date} />
             </div>
-            <h2 className="aside-news-title">{title}</h2>
+            <Link to={link}>
+              <h2 className="aside-news-title">{title}</h2>
+            </Link>
           </div>
-          {/* <Link to={link} className="aside-news-link">
-            <span>прочитать все</span> <ArrRight />
-          </Link> */}
         </div>
       </div>
-    </Link>
+    </div>
   );
 };
 
diff --git a/src/components/global/NewsCategory.tsx b/src/components/global/NewsCategory.tsx
index 01459d9..5a1be00 100644
--- a/src/components/global/NewsCategory.tsx
+++ b/src/components/global/NewsCategory.tsx
@@ -1,12 +1,17 @@
 // Modules
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 
 interface Props {
   title: string;
+  id: number;
 }
 
-const NewsCategory = ({ title }: Props) => {
-  return <span className="news-category">{title}</span>;
+const NewsCategory = ({ title, id }: Props) => {
+  return (
+    <Link to={`/category/${id}`} className="news-category">
+      {title}
+    </Link>
+  );
 };
 
 export default NewsCategory;
diff --git a/src/components/global/NewsScroll.tsx b/src/components/global/NewsScroll.tsx
index 4339ac1..561b6fc 100644
--- a/src/components/global/NewsScroll.tsx
+++ b/src/components/global/NewsScroll.tsx
@@ -1,8 +1,8 @@
 // Components
-import News from '../news/News';
-import SectionTitle from './SectionTitle';
+import News from "../news/News";
+import SectionTitle from "./SectionTitle";
 // Images
-import placeholder from '../../assets/images/placeholder.jpg';
+import placeholder from "../../assets/images/placeholder.jpg";
 
 // Interface
 interface Props {
@@ -12,9 +12,13 @@ interface Props {
 const NewsScroll = ({ state }: Props) => {
   return (
     <div className="news-scroll">
+      <SectionTitle title="Лента новостей" />
       <div className="news-scroll-wrapper">
         {state === true ? (
-          <SectionTitle title="Лента новостей" linkData={{ link: '/', title: 'Посмотреть все' }} />
+          <SectionTitle
+            title="Лента новостей"
+            linkData={{ link: "/", title: "Посмотреть все" }}
+          />
         ) : null}
         <div className="news-scroll-inner">
           <News
diff --git a/src/components/news/News.tsx b/src/components/news/News.tsx
index a569b53..9f3f654 100644
--- a/src/components/news/News.tsx
+++ b/src/components/news/News.tsx
@@ -1,11 +1,11 @@
 // Modules
-import { Link } from 'react-router-dom';
-import { LazyLoadImage } from 'react-lazy-load-image-component';
+import { Link } from "react-router-dom";
+import { LazyLoadImage } from "react-lazy-load-image-component";
 // Images
-import { ReactComponent as ArrRight } from '../../assets/icons/arrow-right.svg';
+import { ReactComponent as ArrRight } from "../../assets/icons/arrow-right.svg";
 // Components
-import NewsCategory from '../global/NewsCategory';
-import NewsDate from '../global/NewsDate';
+import NewsCategory from "../global/NewsCategory";
+import NewsDate from "../global/NewsDate";
 
 interface Props {
   title: string;
@@ -17,26 +17,30 @@ interface Props {
 
 const News = ({ title, text, category, date, img }: Props) => {
   return (
-    <Link to={`/news/1`} className="news">
+    <div className="news">
       <div className="news-wrapper">
-        <div className="news-image">
-          <LazyLoadImage src={img} alt="image" useIntersectionObserver effect="blur" />
-        </div>
+        <Link to={`/news/1`} className="news-image">
+          <LazyLoadImage
+            src={img}
+            alt="image"
+            useIntersectionObserver
+            effect="blur"
+          />
+        </Link>
         <div className="news-info">
           <div className="news-info-inner">
-            <h2 className="news-title">{title}</h2>
+            <Link to={`/news/1`}>
+              <h2 className="news-title">{title}</h2>
+            </Link>
             <div className="news-status">
-              <NewsCategory title={category} />
+              <NewsCategory title={category} id={1} />
               <NewsDate date={date} />
             </div>
             <div className="news-text">{text}</div>
           </div>
-          {/* <Link to={`/news/1`} className="news-link">
-            <span>прочитать все</span> <ArrRight />
-          </Link> */}
         </div>
       </div>
-    </Link>
+    </div>
   );
 };
 
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
index 08c4d16..872304a 100644
--- a/src/styles/_main.scss
+++ b/src/styles/_main.scss
@@ -42,7 +42,11 @@
     top: 0;
     left: 0;
     @include wh100;
-    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%);
+    background: linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 0) 50%,
+      rgba(0, 0, 0, 0.7) 100%
+    );
     display: flex;
     padding: 1.6rem;
     align-items: flex-end;
@@ -117,3 +121,21 @@
     display: block;
   }
 }
+
+@media screen and (max-width: 850px) {
+  .main {
+    padding: 4rem 0;
+  }
+  .main-content {
+    .section-title {
+      &:first-child {
+        display: none;
+      }
+    }
+  }
+  .main-content-item__big {
+    h2 {
+      font-size: 1.6rem;
+    }
+  }
+}
diff --git a/src/styles/_news-section.scss b/src/styles/_news-section.scss
index c590bbb..12da9c8 100644
--- a/src/styles/_news-section.scss
+++ b/src/styles/_news-section.scss
@@ -16,3 +16,9 @@
     gap: 5.6rem;
   }
 }
+
+@media (max-width: 850px) {
+  .news-inner {
+    gap: 4rem;
+  }
+}
diff --git a/src/styles/_news.scss b/src/styles/_news.scss
index 2a9e9d3..14a27c8 100644
--- a/src/styles/_news.scss
+++ b/src/styles/_news.scss
@@ -13,6 +13,7 @@
 }
 
 .news-info-inner {
+  width: 100%;
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
@@ -52,20 +53,57 @@
   overflow: hidden;
 }
 
+.news-date {
+  color: $gray-dark;
+  font-weight: 400;
+  @include roboto;
+  font-size: 1.4rem;
+}
+.news-category {
+  display: inline-block;
+  color: $main;
+  text-transform: uppercase;
+  font-weight: 400;
+  font-size: 1.4rem;
+  @include roboto;
+}
+
+.news-scroll {
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+}
+
+.news-scroll-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 3.2rem;
+}
+
+.news-scroll-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+}
+
 @media (max-width: 1024px) {
   .news-title {
     font-size: 2rem;
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 750px) {
+  .news-info-inner {
+    flex-direction: column-reverse;
+  }
+
   .news-wrapper {
     flex-direction: column;
   }
 
   .news-image {
     width: 100%;
-    height: 18rem;
+    height: 20rem;
     overflow: hidden;
     object-fit: cover;
     object-position: center;
@@ -102,3 +140,18 @@
     display: none;
   }
 }
+
+@media (max-width: 500px) {
+  .news-info-inner {
+    gap: 0.8rem;
+  }
+  .news-category {
+    font-size: 1.2rem;
+  }
+  .news-title {
+    font-size: 1.4rem;
+  }
+  .news-date {
+    font-size: 1rem;
+  }
+}
diff --git a/src/styles/_newsCategory.scss b/src/styles/_newsCategory.scss
deleted file mode 100644
index ea1931c..0000000
--- a/src/styles/_newsCategory.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.news-category {
-  display: inline-block;
-  color: $main;
-  text-transform: uppercase;
-  font-weight: 400;
-  font-size: 1.4rem;
-  @include roboto;
-}
diff --git a/src/styles/_newsDate.scss b/src/styles/_newsDate.scss
deleted file mode 100644
index 7e2c947..0000000
--- a/src/styles/_newsDate.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.news-date {
-  color: $gray-dark;
-  font-weight: 400;
-  @include roboto;
-  font-size: 1.4rem;
-}
diff --git a/src/styles/_newsScroll.scss b/src/styles/_newsScroll.scss
deleted file mode 100644
index bcd504f..0000000
--- a/src/styles/_newsScroll.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.news-scroll-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 3.2rem;
-}
-
-.news-scroll-inner {
-  display: flex;
-  flex-direction: column;
-  gap: 2.4rem;
-}
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 4c937b3..b83dbf4 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -7,9 +7,6 @@
 @import "./section-title";
 @import "./footer";
 @import "./news";
-@import "./newsCategory";
-@import "./newsDate";
-@import "./newsScroll";
 @import "./asideNews";
 @import "./aside";
 @import "./news-section";