From b21e6b1818c6da7d88c196610972647d3ff74d25 Mon Sep 17 00:00:00 2001
From: MaxOvs19 <gshk3669@gmail.com>
Date: Tue, 2 May 2023 15:27:24 +0300
Subject: [PATCH] Finished working in blog

---
 src/components/SideBar/sidebar.scss           |  2 +-
 .../UI/FreeDevelopers/freeDevelopers.scss     |  1 -
 src/images/blogArrow.svg                      | 10 ++++
 src/pages/Article/article.scss                | 27 +++++++++++
 src/pages/Blog/Blog.jsx                       | 15 ++++--
 src/pages/Blog/blog.scss                      | 48 +++++++++++++++----
 6 files changed, 88 insertions(+), 15 deletions(-)
 create mode 100644 src/images/blogArrow.svg

diff --git a/src/components/SideBar/sidebar.scss b/src/components/SideBar/sidebar.scss
index cdbf16e6..8a0d6705 100644
--- a/src/components/SideBar/sidebar.scss
+++ b/src/components/SideBar/sidebar.scss
@@ -191,6 +191,6 @@
   @media (max-width: 1375px) {
     left: 0;
     width: 100%;
-    height: 535px;
+    height: 605px;
   }
 }
diff --git a/src/components/UI/FreeDevelopers/freeDevelopers.scss b/src/components/UI/FreeDevelopers/freeDevelopers.scss
index ed73e21f..eedd7b30 100644
--- a/src/components/UI/FreeDevelopers/freeDevelopers.scss
+++ b/src/components/UI/FreeDevelopers/freeDevelopers.scss
@@ -175,7 +175,6 @@
       .auth-body.active {
         left: 0;
         width: 100%;
-        height: 535px;
       }
 
       .auth-body {
diff --git a/src/images/blogArrow.svg b/src/images/blogArrow.svg
new file mode 100644
index 00000000..82663971
--- /dev/null
+++ b/src/images/blogArrow.svg
@@ -0,0 +1,10 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<circle opacity="0.3" cx="13.5" cy="13.5" r="13.5" transform="matrix(-1 0 0 1 27 0)" fill="#807777"/>
+<rect x="18.5625" y="16.3125" width="10.0195" height="5.625" transform="rotate(180 18.5625 16.3125)" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_1082_1300" transform="matrix(0.0244088 0 0 0.0434783 -0.000381388 0)"/>
+</pattern>
+<image id="image0_1082_1300" width="41" height="23" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAXCAMAAAChzpYZAAAAAXNSR0IB2cksfwAAAEJQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAjuH28gAAABZ0Uk5TAEK0Cvb/vgaIlxC7oNwcwg/J2f1bS4SvOREAAABWSURBVHicY2CAA0YmZgaiACMLKxs7kQpZOUYV4lPIyUUYgBUSBRiYiFTIysDMBiS5eQgDBrBSXj5ifESSUn6ilQoIDi2lQkTlDqBSYRGiFAKViuKVBgCepwfqGDtvmgAAAABJRU5ErkJggg=="/>
+</defs>
+</svg>
diff --git a/src/pages/Article/article.scss b/src/pages/Article/article.scss
index 948b7123..9bb52f04 100644
--- a/src/pages/Article/article.scss
+++ b/src/pages/Article/article.scss
@@ -3,15 +3,29 @@
 
   &__breadCrumbs {
     margin-top: 30px;
+
+    @media (max-width: 1375px) {
+      margin-top: 0;
+      padding-top: 110px;
+    }
+
+    @media (max-width: 600px) {
+      display: none;
+    }
   }
 
   &__title {
     margin: 42px 0 44px 0;
+
     h1 {
       font-weight: 500;
       font-size: 38px;
       line-height: 32px;
     }
+
+    @media (max-width: 600px) {
+      padding-top: 80px;
+    }
   }
 
   &__return {
@@ -106,6 +120,19 @@
           margin: 0 16px 0 0;
         }
       }
+
+      @media (max-width: 600px) {
+        margin: 20px 0 20px 0;
+        flex-direction: column;
+
+        .publication-date {
+          margin: 0;
+        }
+
+        .yandex {
+          margin: 0 0 10px 0;
+        }
+      }
     }
 
     .more-articles {
diff --git a/src/pages/Blog/Blog.jsx b/src/pages/Blog/Blog.jsx
index 6820f469..704f3861 100644
--- a/src/pages/Blog/Blog.jsx
+++ b/src/pages/Blog/Blog.jsx
@@ -6,7 +6,9 @@ import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileB
 import { Footer } from "../../components/Footer/Footer";
 import CardArticle from "../../components/UI/CardArticle/CardArticle";
 
-import arrowRight from "../../images/arrowRight.png";
+// import arrowRight from "../../images/arrowRight.png";
+import blogArrow from "../../images/blogArrow.svg";
+
 import cardImg1 from "../../images/cardArticleItem.png";
 import cardImg2 from "../../images/cardArticleItem2.png";
 import cardImg3 from "../../images/cardArticleItem3.png";
@@ -66,10 +68,11 @@ export const Blog = ({}) => {
         </div>
 
         <div className="blog__title">
-          <h1>Блог</h1>
-          <div className="blog__title-arrow">
-            <img src={arrowRight} />
+          <div>
+            <h1>Блог</h1>
+            <img src={blogArrow} className="blog__title-arrow" />
           </div>
+
           <h3>
             Из первых уст рассказываем о себе пользователям, делимся полезными и
             важными материалами, стремимся получать обратную связь
@@ -89,6 +92,10 @@ export const Blog = ({}) => {
             );
           })}
         </div>
+
+        <div className="blog__load-more">
+          <button>Загрузить еще</button>
+        </div>
       </div>
 
       <Footer />
diff --git a/src/pages/Blog/blog.scss b/src/pages/Blog/blog.scss
index 6f9c8cc1..3e352958 100644
--- a/src/pages/Blog/blog.scss
+++ b/src/pages/Blog/blog.scss
@@ -3,6 +3,15 @@
 
   &__breadCrumbs {
     margin-top: 30px;
+
+    @media (max-width: 1375px) {
+      margin-top: 0;
+      padding-top: 100px;
+    }
+
+    @media (max-width: 600px) {
+      display: none;
+    }
   }
 
   &__title {
@@ -21,20 +30,23 @@
       font-weight: 400;
       font-size: 18px;
       line-height: 28px;
+      text-align: justify;
+    }
+
+    div {
+      display: flex;
     }
 
     &-arrow {
       margin: 0 27px 0 20px;
-      background: #80777769;
-      border-radius: 44px;
-      width: 30px;
-      height: 27px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    }
 
-      img {
-        width: 56%;
+    @media (max-width: 600px) {
+      padding-top: 110px;
+      flex-direction: column;
+
+      div {
+        margin: 0 0 15px 0;
       }
     }
   }
@@ -44,4 +56,22 @@
     flex-wrap: wrap;
     justify-content: space-around;
   }
+
+  &__load-more {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 35px;
+
+    button {
+      background: #52b709;
+      border-radius: 44px;
+      width: 202px;
+      height: 50px;
+      color: white;
+      font-size: 16px;
+      line-height: 32px;
+      border: none;
+    }
+  }
 }