From 876d721877525db59fd6ade97259b079564750d5 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Mon, 20 Jul 2020 00:56:08 +0300
Subject: [PATCH] share btns upd

---
 src/components/Article/Article.js   | 13 +++++------
 src/components/Article/Article.scss | 34 +++++++++++++++++++++--------
 src/components/Footer/Footer.scss   |  8 +++++++
 src/components/Header/Header.scss   |  8 +++++++
 src/images/facebook-icon__large.svg |  4 +++-
 src/images/twitter-icon__large.svg  |  4 +++-
 src/images/vk-icon.svg              |  4 +++-
 src/styles/global.scss              |  6 +++++
 8 files changed, 62 insertions(+), 19 deletions(-)

diff --git a/src/components/Article/Article.js b/src/components/Article/Article.js
index ba6a807..a174024 100644
--- a/src/components/Article/Article.js
+++ b/src/components/Article/Article.js
@@ -38,14 +38,7 @@ const Article = ({ data: { slug, keywords, title, image, description, category,
               </div> 
             </div>
           </div>
-          <div className="article-heading">
-            <h1>{title}</h1>
-          </div>
-          <div className="article-category">
-            <Link to={`/category/${slugify(category)}`}>{category}</Link>
-          </div>
           <div className="article-share">
-            <span>Поделиться:</span>
             <div className="article-share__social">
               <a href={`https://vk.com/share.php?url=${siteUrl}/article/${slug}&title=${title}&image=${siteUrl}${image.childImageSharp.fluid.src}`} target='_blank' rel='noreferrer'>
                 <VkIcon />
@@ -58,6 +51,12 @@ const Article = ({ data: { slug, keywords, title, image, description, category,
               </a>
             </div>
           </div>
+          <div className="article-heading">
+            <h1>{title}</h1>
+          </div>
+          <div className="article-category">
+            <Link to={`/category/${slugify(category)}`}>{category}</Link>
+          </div>
           <div className="article-description">
             <p>
               {description}
diff --git a/src/components/Article/Article.scss b/src/components/Article/Article.scss
index 5a375b4..8e00552 100644
--- a/src/components/Article/Article.scss
+++ b/src/components/Article/Article.scss
@@ -39,14 +39,30 @@
       }
     }
     & .article-share {
-      display: flex;
-      align-items: center;
-      margin-bottom: 15px;
-      &__social{
-        margin-left: 15px;
+      position: sticky;
+      top: 75px;
+      height: 0;
+      margin: 0 0 0 -50px;
+      &__social {
+        display: flex;
+        flex-direction: column;
+        width: 1.3rem;
         & a {
+          width: 1.3rem;
           text-decoration: none;
           margin-right: 10px;
+          margin-bottom: 20px;
+          & svg:hover {
+            & .vk-icon {
+              fill: #4680C2;
+            }
+            & .twitter-icon {
+              fill: #00acee;
+            }
+            & .facebook-icon {
+              fill: #3b5998;
+            }
+          }
         }
         & a:nth-child(3) {
           margin-right: 0;
@@ -112,11 +128,11 @@
   }
 }
 
-@media (min-width: 768px) and (max-width: 991px) {
+@media (max-width: 1300px) {
   .article {
-    article {
-      & .article-image {
-        padding: 0 5rem;
+    & article {
+      & .article-share {
+        display: none;
       }
     }
   }
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
index 1fbe504..99f35d1 100644
--- a/src/components/Footer/Footer.scss
+++ b/src/components/Footer/Footer.scss
@@ -106,6 +106,14 @@ footer {
   }
 }
 
+@media (max-width: 991px) {
+  footer {
+    & .footer-content {
+      max-width: 880px;
+    }
+  }
+}
+
 @media (max-width: 768px) {
   footer {
     & .footer-content {
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
index 109c777..656dcb6 100644
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -249,6 +249,14 @@ header {
   }
 }
 
+@media (max-width: 991px) {
+  header {
+    & .header-content {
+      max-width: 880px;
+    }
+  }
+}
+
 @media (min-width: 768px) {
   header {
     & .header-content {
diff --git a/src/images/facebook-icon__large.svg b/src/images/facebook-icon__large.svg
index 11bb596..21655da 100644
--- a/src/images/facebook-icon__large.svg
+++ b/src/images/facebook-icon__large.svg
@@ -1 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="facebook-icon" d="M20 10C20 4.47656 15.5234 0 10 0C4.47656 0 0 4.47656 0 10C0 15.5234 4.47656 20 10 20C10.0586 20 10.1172 20 10.1758 19.9961V12.2148H8.02734V9.71094H10.1758V7.86719C10.1758 5.73047 11.4805 4.56641 13.3867 4.56641C14.3008 4.56641 15.0859 4.63281 15.3125 4.66406V6.89844H14C12.9648 6.89844 12.7617 7.39062 12.7617 8.11328V9.70703H15.2422L14.918 12.2109H12.7617V19.6133C16.9414 18.4141 20 14.5664 20 10Z" fill="black"></path></svg>
\ No newline at end of file
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path class="facebook-icon" d="M25 12.5C25 5.5957 19.4043 0 12.5 0C5.5957 0 0 5.5957 0 12.5C0 19.4043 5.5957 25 12.5 25C12.5732 25 12.6465 25 12.7197 24.9951V15.2686H10.0342V12.1387H12.7197V9.83398C12.7197 7.16309 14.3506 5.70801 16.7334 5.70801C17.876 5.70801 18.8574 5.79102 19.1406 5.83008V8.62305H17.5C16.2061 8.62305 15.9521 9.23828 15.9521 10.1416V12.1338H19.0527L18.6475 15.2637H15.9521V24.5166C21.1768 23.0176 25 18.208 25 12.5V12.5Z" fill="black"/>
+</svg>
diff --git a/src/images/twitter-icon__large.svg b/src/images/twitter-icon__large.svg
index 8133a8b..5272024 100644
--- a/src/images/twitter-icon__large.svg
+++ b/src/images/twitter-icon__large.svg
@@ -1 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="twitter-icon" d="M6.51564 17.5086C13.5915 17.5086 17.461 11.6465 17.461 6.56331C17.461 6.39682 17.4575 6.23102 17.4501 6.06613C18.2011 5.52308 18.8539 4.84541 19.369 4.07406C18.6797 4.38056 17.9379 4.58661 17.1599 4.67983C17.954 4.2034 18.5638 3.45006 18.8514 2.552C18.1081 2.99266 17.285 3.3128 16.4087 3.48572C15.7067 2.73799 14.7072 2.27039 13.6005 2.27039C11.4763 2.27039 9.75343 3.99311 9.75343 6.1167C9.75343 6.41872 9.78726 6.71226 9.85319 6.99388C6.65599 6.83301 3.82079 5.30235 1.92367 2.97466C1.59343 3.54305 1.40286 4.20352 1.40286 4.90825C1.40286 6.24271 2.08202 7.42112 3.11469 8.11025C2.48357 8.09088 1.89076 7.91762 1.37247 7.62924C1.3719 7.6454 1.3719 7.66111 1.3719 7.67831C1.3719 9.54138 2.69788 11.0969 4.45833 11.4494C4.13497 11.5374 3.79476 11.5847 3.44389 11.5847C3.19644 11.5847 2.95519 11.5604 2.72081 11.5153C3.21055 13.0438 4.63078 14.1561 6.31452 14.1873C4.99783 15.2192 3.3392 15.8339 1.53656 15.8339C1.2265 15.8339 0.920006 15.8162 0.618896 15.7806C2.32144 16.8719 4.34309 17.5087 6.51576 17.5087" fill="black"></path></svg>
\ No newline at end of file
+<svg width="25" height="20" viewBox="0 0 25 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path class="twitter-icon" d="M8.14461 19.8857C16.9894 19.8857 21.8263 12.558 21.8263 6.20405C21.8263 5.99594 21.822 5.78868 21.8126 5.58257C22.7515 4.90375 23.5674 4.05667 24.2113 3.09248C23.3497 3.47561 22.4224 3.73317 21.4499 3.8497C22.4426 3.25416 23.2048 2.31248 23.5643 1.18991C22.6352 1.74073 21.6062 2.14091 20.5109 2.35705C19.6334 1.42239 18.384 0.837891 17.0007 0.837891C14.3454 0.837891 12.1918 2.99129 12.1918 5.64578C12.1918 6.02331 12.2341 6.39024 12.3165 6.74226C8.32005 6.54117 4.77605 4.62784 2.40464 1.71823C1.99185 2.42872 1.75363 3.2543 1.75363 4.13522C1.75363 5.8033 2.60258 7.27631 3.89342 8.13773C3.10453 8.1135 2.36351 7.89693 1.71565 7.53645C1.71494 7.55666 1.71494 7.5763 1.71494 7.5978C1.71494 9.92664 3.37241 11.8711 5.57297 12.3117C5.16878 12.4216 4.74352 12.4808 4.30492 12.4808C3.99562 12.4808 3.69405 12.4504 3.40108 12.3941C4.01325 14.3047 5.78854 15.695 7.89321 15.734C6.24734 17.0239 4.17406 17.7923 1.92076 17.7923C1.53319 17.7923 1.15007 17.7701 0.773682 17.7257C2.90186 19.0898 5.42892 19.8858 8.14476 19.8858" fill="black"/>
+</svg>
diff --git a/src/images/vk-icon.svg b/src/images/vk-icon.svg
index 8098be6..5002d3c 100644
--- a/src/images/vk-icon.svg
+++ b/src/images/vk-icon.svg
@@ -1 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#vk-icon)"><path class="vk-icon" d="M16.5958 10.8566C16.2725 10.4483 16.365 10.2666 16.5958 9.90163C16.6 9.89746 19.2692 6.20913 19.5442 4.95829L19.5458 4.95746C19.6825 4.50163 19.5458 4.16663 18.885 4.16663H16.6983C16.1417 4.16663 15.885 4.45413 15.7475 4.77579C15.7475 4.77579 14.6342 7.44079 13.0592 9.16829C12.5508 9.66746 12.3158 9.82746 12.0383 9.82746C11.9017 9.82746 11.6892 9.66746 11.6892 9.21163V4.95746C11.6892 4.41079 11.5333 4.16663 11.0725 4.16663H7.63417C7.285 4.16663 7.0775 4.42163 7.0775 4.65913C7.0775 5.17746 7.865 5.29663 7.94667 6.75496V9.91913C7.94667 10.6125 7.82083 10.74 7.54167 10.74C6.79833 10.74 4.99417 8.06413 3.925 5.00163C3.70917 4.40746 3.49833 4.16746 2.9375 4.16746H0.75C0.125833 4.16746 0 4.45496 0 4.77663C0 5.34496 0.743333 8.17079 3.45667 11.9041C5.265 14.4525 7.81167 15.8333 10.1283 15.8333C11.5208 15.8333 11.6908 15.5266 11.6908 14.9991C11.6908 12.5641 11.565 12.3341 12.2625 12.3341C12.5858 12.3341 13.1425 12.4941 14.4425 13.7233C15.9283 15.1808 16.1725 15.8333 17.0042 15.8333H19.1908C19.8142 15.8333 20.13 15.5266 19.9483 14.9216C19.5325 13.6491 16.7225 11.0316 16.5958 10.8566Z" fill="black"></path></g><defs><clipPath id="vk-icon"><rect width="20" height="20" fill="white"></rect></clipPath></defs></svg>
\ No newline at end of file
+<svg width="25" height="15" viewBox="0 0 25 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path class="vk-icon" d="M20.7448 8.57088C20.3406 8.06046 20.4563 7.83338 20.7448 7.37713C20.75 7.37192 24.0865 2.7615 24.4302 1.19796L24.4323 1.19692C24.6031 0.627124 24.4323 0.208374 23.6062 0.208374H20.8729C20.1771 0.208374 19.8562 0.567749 19.6844 0.969832C19.6844 0.969832 18.2927 4.30108 16.324 6.46046C15.6885 7.08442 15.3948 7.28442 15.0479 7.28442C14.8771 7.28442 14.6115 7.08442 14.6115 6.51463V1.19692C14.6115 0.513582 14.4167 0.208374 13.8406 0.208374H9.54271C9.10625 0.208374 8.84687 0.527124 8.84687 0.823999C8.84687 1.47192 9.83125 1.62087 9.93333 3.44379V7.399C9.93333 8.26567 9.77604 8.42504 9.42708 8.42504C8.49792 8.42504 6.24271 5.08025 4.90625 1.25212C4.63646 0.509416 4.37292 0.209416 3.67187 0.209416H0.9375C0.157292 0.209416 0 0.568791 0 0.970874C0 1.68129 0.929166 5.21358 4.32083 9.88025C6.58125 13.0657 9.76458 14.7917 12.6604 14.7917C14.401 14.7917 14.6135 14.4084 14.6135 13.749C14.6135 10.7053 14.4562 10.4178 15.3281 10.4178C15.7323 10.4178 16.4281 10.6178 18.0531 12.1542C19.9104 13.9761 20.2156 14.7917 21.2552 14.7917H23.9885C24.7677 14.7917 25.1625 14.4084 24.9354 13.6521C24.4156 12.0615 20.9031 8.78963 20.7448 8.57088V8.57088Z" fill="black"/>
+</svg>
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 30f590d..dd7ec0c 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -263,6 +263,12 @@ a {
   }
 }
 
+@media (max-width: 991px) {
+  .container-fluid {
+    max-width: 880px;
+  }
+}
+
 @media (max-width: 768px) {
   .error {
     & span {