From 4fa6747d6e10248b0dc6b703e99ae6bb88462324 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Sun, 3 Nov 2019 11:47:31 +0400 Subject: [PATCH] Add footer for guide pages --- .editorconfig | 23 ++++++++++ components/guide-footer/index.js | 79 +++++++++++++++++--------------- components/guide-footer/style.js | 70 +++++++++++++++++----------- layouts/default/global.scss | 6 +-- pages/guides/[guide].js | 10 ++-- 5 files changed, 117 insertions(+), 71 deletions(-) create mode 100644 .editorconfig diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 000000000..f67814db2 --- /dev/null +++ b/.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 diff --git a/components/guide-footer/index.js b/components/guide-footer/index.js index 5142bf18a..4166997f9 100644 --- a/components/guide-footer/index.js +++ b/components/guide-footer/index.js @@ -1,44 +1,51 @@ 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) => ( - - - - Improve this Guide - - - - - Help spread the word - - - - - - - - - - Written By -

Kamran Ahmed

- Lead engineer at Tajawal. Created roadmap.sh. Lover of web and opensource -

- - - Follow on Twitter - - - - Follow on GitHub - -

- - + + + + + + Improve this Guide + Contribute + + + + + + Follow the author + Author + + + + + Help spread the word + Share + + + + + + + + + + + + + + +

Kamran Ahmed

+ Lead engineer at Tajawal. Lover of all things web and opensource. Created roadmap.sh to help the confused ones. + + + + ); -export default GuideFooter; \ No newline at end of file +export default GuideFooter; diff --git a/components/guide-footer/style.js b/components/guide-footer/style.js index 9ec098859..76e82ef0b 100644 --- a/components/guide-footer/style.js +++ b/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,16 +124,8 @@ 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; flex-direction: column; -`; \ No newline at end of file +`; diff --git a/layouts/default/global.scss b/layouts/default/global.scss index 96cfa84ef..017d06e7a 100644 --- a/layouts/default/global.scss +++ b/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 { @@ -56,4 +56,4 @@ code:not([class]) { padding: 0 5px; word-wrap: normal; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125) -} \ No newline at end of file +} diff --git a/pages/guides/[guide].js b/pages/guides/[guide].js index 12f682481..e4324d173 100644 --- a/pages/guides/[guide].js +++ b/pages/guides/[guide].js @@ -10,12 +10,12 @@ import GuideFooter from '../../components/guide-footer'; const Guide = ({ guide }) => { return ( - + - - - + + + ); }; @@ -31,4 +31,4 @@ Guide.getInitialProps = serverOnlyProps(({ req }) => { }; }); -export default Guide; \ No newline at end of file +export default Guide;