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 (
-
+
-
-
-
+
+
+
-
+
-
{title}
+
+
{title}
+
- {/*
-
прочитать все
- */}
-
+
);
};
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 {title};
+const NewsCategory = ({ title, id }: Props) => {
+ return (
+
+ {title}
+
+ );
};
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 (
+
{state === true ? (
-
+
) : null}
{
return (
-
+
-
-
-
+
+
+
-
{title}
+
+
{title}
+
-
+
{text}
- {/*
-
прочитать все
- */}
-
+
);
};
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";