responsiveness

src/components/aside/AsideNews.tsx

@@ -1,11 +1,11 @@
 // Modules
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
-import { LazyLoadImage } from 'react-lazy-load-image-component';
+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 NewsCategory from "../global/NewsCategory";
-import NewsDate from '../global/NewsDate';
+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">
+        <Link to={link} className="aside-news-image">
-          <LazyLoadImage src={img} alt="image" useIntersectionObserver effect="blur" />
+          <LazyLoadImage
-        </div>
+            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>
   );
 };
 

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) => {
+const NewsCategory = ({ title, id }: Props) => {
-  return <span className="news-category">{title}</span>;
+  return (
+    <Link to={`/category/${id}`} className="news-category">
+      {title}
+    </Link>
+  );
 };
 
 export default NewsCategory;

src/components/global/NewsScroll.tsx

@@ -1,8 +1,8 @@
 // Components
-import News from '../news/News';
+import News from "../news/News";
-import SectionTitle from './SectionTitle';
+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

src/components/news/News.tsx

@@ -1,11 +1,11 @@
 // Modules
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
-import { LazyLoadImage } from 'react-lazy-load-image-component';
+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 NewsCategory from "../global/NewsCategory";
-import NewsDate from '../global/NewsDate';
+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">
+        <Link to={`/news/1`} className="news-image">
-          <LazyLoadImage src={img} alt="image" useIntersectionObserver effect="blur" />
+          <LazyLoadImage
-        </div>
+            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>
   );
 };
 

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

src/styles/_news-section.scss

@@ -16,3 +16,9 @@
     gap: 5.6rem;
   }
 }
+
+@media (max-width: 850px) {
+  .news-inner {
+    gap: 4rem;
+  }
+}

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

src/styles/_newsCategory.scss

@@ -1,8 +0,0 @@
-.news-category {
-  display: inline-block;
-  color: $main;
-  text-transform: uppercase;
-  font-weight: 400;
-  font-size: 1.4rem;
-  @include roboto;
-}

src/styles/_newsDate.scss

@@ -1,6 +0,0 @@
-.news-date {
-  color: $gray-dark;
-  font-weight: 400;
-  @include roboto;
-  font-size: 1.4rem;
-}

src/styles/_newsScroll.scss

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

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";