Add footer for guide pages

.editorconfig

@@ -0,0 +1,23 @@
+# EditorConfig for the node-soap library - head over to editorconfig.org to see if you editor supports this file.
+
+# this is the topmost .editorconfig file
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.xml]
+insert_final_newline = false
+
+[*.js]
+indent_style = space
+indent_size = 2
+
+[*.json]
+indent_style = space
+indent_size = 2
+
+[{package.json,.travis.yml}]
+indent_style = space
+indent_size = 2

components/guide-footer/index.js

@@ -1,43 +1,50 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faGithub, faFacebookSquare, faTwitterSquare, faTwitter, faHackerNewsSquare, faRedditSquare } from '@fortawesome/free-brands-svg-icons'
-import { AuthorBio, AuthorImg, AuthorInfoWrap, AuthorMeta, ContributeIcon, FooterWrap, ShareIcons, ShareWrap, WrittenBy } from './style';
+import { faFacebookSquare, faGithub, faHackerNewsSquare, faRedditSquare, faTwitter, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
+import { AuthorBio, AuthorImg, AuthorInfoWrap, AuthorMeta, ContributeIcon, FooterBg, FooterContainer, FooterWrap, ShareIcons, ShareWrap } from './style';
 
 
 const GuideFooter = (props) => (
   <FooterWrap>
+    <FooterBg className="border-top">
+      <FooterContainer>
         <ShareWrap>
           <ContributeIcon>
             <a href="#">
-          <span>Improve this Guide </span>
-          <FontAwesomeIcon icon={ faGithub } />
+              <span className="d-none d-sm-none d-md-inline d-lg-inline d-xl-inline">Improve this Guide </span>
+              <span className="d-inline d-sm-inline d-md-none d-lg-none d-xl-none">Contribute </span>
+              <FontAwesomeIcon icon={faGithub}/>
+            </a>
+          </ContributeIcon>
+          <ContributeIcon hasMargins>
+            <a href="#">
+              <span className="d-none d-sm-none d-md-inline d-lg-inline d-xl-inline">Follow the author </span>
+              <span className="d-inline d-sm-inline d-md-none d-lg-none d-xl-none">Author </span>
+              <FontAwesomeIcon icon={faTwitter}/>
             </a>
           </ContributeIcon>
           <ShareIcons>
-        <span>Help spread the word</span>
-        <a href="#"><FontAwesomeIcon icon={ faTwitterSquare } /></a>
-        <a href="#"><FontAwesomeIcon icon={ faFacebookSquare } /></a>
-        <a href="#"><FontAwesomeIcon icon={ faRedditSquare } /></a>
-        <a href="#"><FontAwesomeIcon icon={ faHackerNewsSquare } /></a>
+            <span className="d-none d-sm-none d-md-none d-lg-inline d-xl-inline">Help spread the word</span>
+            <span className="d-inline d-sm-inline d-md-inline d-lg-none d-xl-none">Share</span>
+            <a href="#"><FontAwesomeIcon icon={faTwitterSquare}/></a>
+            <a href="#"><FontAwesomeIcon icon={faFacebookSquare}/></a>
+            <a href="#"><FontAwesomeIcon icon={faRedditSquare}/></a>
+            <a href="#"><FontAwesomeIcon icon={faHackerNewsSquare}/></a>
           </ShareIcons>
         </ShareWrap>
-    <AuthorInfoWrap className="border-top">
-      <AuthorImg src="/static/authors/kamranahmedse.jpeg" alt="" />
+      </FooterContainer>
+    </FooterBg>
+
+    <FooterBg className="border-top">
+      <FooterContainer>
+        <AuthorInfoWrap>
+          <AuthorImg src="/static/authors/kamranahmedse.jpeg" alt=""/>
           <AuthorMeta>
-        <WrittenBy>Written By</WrittenBy>
             <h4><a href="#">Kamran Ahmed</a></h4>
-        <AuthorBio>Lead engineer at Tajawal. Created roadmap.sh. Lover of web and opensource</AuthorBio>
-        <p className="social-links">
-          <a href="#">
-            <FontAwesomeIcon icon={ faTwitter } />
-            Follow on Twitter
-          </a>
-          <a href="#">
-            <FontAwesomeIcon icon={ faGithub } />
-            Follow on GitHub
-          </a>
-        </p>
+            <AuthorBio>Lead engineer at Tajawal. Lover of all things web and opensource. Created roadmap.sh to help the confused ones.</AuthorBio>
           </AuthorMeta>
         </AuthorInfoWrap>
+      </FooterContainer>
+    </FooterBg>
   </FooterWrap>
 );
 

components/guide-footer/style.js

@@ -2,14 +2,23 @@ import styled from 'styled-components';
 
 export const FooterWrap = styled.div`
   display: block;
-  margin-top: 40px;
+  margin-top: 50px;
+`;
+
+export const FooterContainer = styled.div`
+  max-width: 750px;
+  margin: 0 auto;
+  padding: 0 20px;
+`;
+
+export const FooterBg = styled.div`
 `;
 
 export const ShareWrap = styled.div`
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 15px;
+  padding: 17px 0px;
   align-items: center;
+  justify-content: center;
+  display: flex;
 
   a {
     display: flex;  
@@ -18,8 +27,8 @@ export const ShareWrap = styled.div`
   }
 
   svg {
-    height: 22px;
-    color: #101010;
+    height: 18px;
+    color: #757575;
     margin-left: 7px;
   }
 `;
@@ -28,21 +37,38 @@ export const ContributeIcon = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+  margin: ${props => props.hasMargins ? '0 30px' : '0'};
+  
+  span {
+    margin-right: 4px;
+  }
+  
+  a {
+    color: #757575;
+    font-size: 14px;
+  }
 `;
 
 export const ShareIcons = styled.div`
   display: flex;
+  align-items: center;
+  color: #757575;
+  font-size: 14px;
+
+  span {
+    margin-right: 4px;
+  }
 `;
 
 export const AuthorInfoWrap = styled.div`
   display: flex;
   align-items: center;
-  padding: 30px 0 70px;
+  padding: 40px 0;
 
   h4 {
     position: relative;
     font-size: 22px;
-    margin: 8px 0;
+    margin: 10px 0;
     line-height: 17px;
 
     a {
@@ -55,13 +81,9 @@ export const AuthorInfoWrap = styled.div`
     margin: 5px 0 0;
 
     a {
-      border: 1px solid #757575;
       background: transparent;
-      color: #757575;
-      padding: 4px 10px;
+      color: #101010;
       margin-right: 10px;
-      border-radius: 5px;
-      font-size: 10px;
       text-transform: uppercase;
       text-decoration: none;
       display: inline-flex;
@@ -73,9 +95,7 @@ export const AuthorInfoWrap = styled.div`
       }
 
       svg {
-        height: 16px;
-        margin-right: 8px;
-        fill: #757575;
+        height: 18px;
       }
     }  
   }
@@ -87,9 +107,13 @@ export const AuthorInfoWrap = styled.div`
 
 export const AuthorBio = styled.p`
   font-size: 15px;
-  line-height: 20px;
+  line-height: 24px;
   color: #757575;
-  margin-bottom: 7px;
+  margin-bottom: 0;
+  
+  a {
+    font-weight: 500;
+  }
 `;
 
 export const AuthorImg = styled.img`
@@ -100,14 +124,6 @@ export const AuthorImg = styled.img`
   margin-right: 22px;
 `;
 
-export const WrittenBy = styled.p`
-  font-size: 11px;
-  text-transform: uppercase;
-  color: #757575;
-  display: block;
-  margin-bottom: 0;
-`;
-
 export const AuthorMeta = styled.div`
   display: flex;
   justify-content: center;

layouts/default/global.scss

@@ -10,11 +10,11 @@ ul li, ol li {
 }
 
 .border-top {
-  border-top: 1px solid #eaeaea;
+  border-top: 1px solid #eaeaea !important;
 }
 
 .border-bottom {
-  border-bottom: 1px solid #eaeaea;
+  border-bottom: 1px solid #eaeaea !important;
 }
 
 .bg-light {

pages/guides/[guide].js

@@ -10,12 +10,12 @@ import GuideFooter from '../../components/guide-footer';
 const Guide = ({ guide }) => {
   return (
     <GuideLayout>
-      <GuideHeader />
+      <GuideHeader/>
       <GuideBody>
-        <GuideContent />
-        <ShareGuide />
-        <GuideFooter />
+        <GuideContent/>
+        <ShareGuide/>
       </GuideBody>
+      <GuideFooter/>
     </GuideLayout>
   );
 };