sticky block

package-lock.json

@@ -10150,11 +10150,6 @@
         "parse-url": "^5.0.0"
       }
     },
-    "github-buttons": {
-      "version": "2.11.1",
-      "resolved": "https://registry.npmjs.org/github-buttons/-/github-buttons-2.11.1.tgz",
-      "integrity": "sha512-RMPwA6Zqqxu/P5jXeW02zuuPaChztG4ASHTKrzSlHgWiFg0crQQTp2E1kBRCGV+/9Bo99ziU+ggmVptLhu8k6A=="
-    },
     "github-from-package": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
@@ -17134,14 +17129,6 @@
       "resolved": "https://registry.npmjs.org/react-frame-component/-/react-frame-component-4.1.2.tgz",
       "integrity": "sha512-gWTtpOoi8Mgxayj0iWLL3SXRu2jW4eW4oim6B/FycaOH9HHIsCTPulC9u7CZ2BwY0CtqA+v8FsINp6qPuaN6qQ=="
     },
-    "react-github-btn": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/react-github-btn/-/react-github-btn-1.2.0.tgz",
-      "integrity": "sha512-/b2TGTeek5Ky+KtuP5BxOaXgb1FGhbwgZNI6rkwkGk7+xtCtsNMkdchOcCnC3qU1JGTWPKzYZWpPBIouVhXAoQ==",
-      "requires": {
-        "github-buttons": "^2.8.0"
-      }
-    },
     "react-helmet": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",

package.json

@@ -43,7 +43,6 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-flexbox-grid": "^2.1.2",
-    "react-github-btn": "^1.2.0",
     "react-helmet": "^6.1.0"
   },
   "devDependencies": {

src/components/Footer/Footer.js

@@ -3,7 +3,6 @@ import { Link } from 'gatsby'
 import PropTypes from 'prop-types'
 import useSiteMetadataQuery from '../../hooks/useSiteMetadataQuery'
 
-import GitHubButton from 'react-github-btn'
 import LogoIcon from '../../images/logo-icon.svg'
 import GatsbyIcon from '../../images/gatsby-icon.svg'
 import NetlifyIcon from '../../images/netlify-icon.svg'
@@ -43,7 +42,6 @@ const Footer = () => {
             </div>
           </div>
           <div className="footer-nav__helpers">
-            <GitHubButton href="https://github.com/sergeyyarkov/devthread.ru" data-icon="octicon-star" aria-label="Start devthread.ru">Star</GitHubButton>
             <div className="helpers-icons">
               <a href="https://www.gatsbyjs.org/" rel='noreferrer' target="_blank">
                 <GatsbyIcon />

src/components/Offers/Offers.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useLocation } from '@reach/router'
 import usePopularArticlesQuery from '../../hooks/usePopularArticlesQuery'
 import useTagsQuery from '../../hooks/useTagsQuery'
 import useBooksQuery from '../../hooks/useBooksQuery'
@@ -12,12 +13,13 @@ import TagItem from './Tags/TagItem'
 import BookItem from './Books/BookItem'
 
 const Offers = () => {
+  const { pathname } = useLocation()
   const { articles } = usePopularArticlesQuery()
   const { tags } = useTagsQuery()
   const { books } = useBooksQuery()
   
   return (
-    <div className="offers">
+    <div style={{ height: pathname === '/' ? '56%' : '78.5%' }} className="offers">
       <Popular>
         {articles.map(({ node }, i) => <PopularItem key={i} slug={node.frontmatter.slug} title={node.frontmatter.title} />)}
       </Popular>

src/components/Offers/Subscription/Subscription.js

@@ -1,8 +1,11 @@
 import React from 'react';
+import { useLocation } from '@reach/router'
 
 const Subscription = () => {
+  const { pathname } = useLocation()
   return (
-    <div className="offers-subscription offer-box">
+    <div style={pathname !== '/about' ? { height: '100%' } : null}>
+      <div style={pathname !== '/about' ? { position: 'sticky', top: 75 } : null} className="offers-subscription offer-box">
         <div className="offers-subscription__heading offer-heading">
             Читайте нас в Telegram
         </div>
@@ -13,6 +16,7 @@ const Subscription = () => {
           <a href="https://t.me/devthread" rel='noreferrer' target="_blank" className="btn-primary">Подписаться</a>
         </div>
       </div>
+    </div>
   )
 }
 export default Subscription

src/styles/global.scss

@@ -160,7 +160,7 @@ html {
 body {
   font-family: 'Inter', sans-serif;
   margin: 0;
-  margin-top: 95px;
+  margin-top: 122px;
   display: flex;
   height: 85%;
   flex-direction: column;