diff --git a/client/src/components/Footer/FooterCol.js b/client/src/components/Footer/FooterCol.js deleted file mode 100644 index 1c919368be..0000000000 --- a/client/src/components/Footer/FooterCol.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import Link from '../helpers/Link'; -import { dasherize } from '../../../../utils/slugs'; - -function FooterCol({ title, links }) { - return ( -
- {title ? ( -
{title}
- ) : ( -
- )} - {links.map(({ to, text, internal }, i) => ( - - {text} - - ))} -
- ); -} - -const propTypes = { - links: PropTypes.arrayOf( - PropTypes.shape({ - to: PropTypes.string.isRequired, - text: PropTypes.string, - internal: PropTypes.bool - }) - ).isRequired, - title: PropTypes.string -}; - -FooterCol.propTypes = propTypes; -FooterCol.displayName = 'FooterCol'; -export default FooterCol; diff --git a/client/src/components/Footer/__snapshots__/Footer.test.js.snap b/client/src/components/Footer/__snapshots__/Footer.test.js.snap index fb6660d902..ef5f0757a2 100644 --- a/client/src/components/Footer/__snapshots__/Footer.test.js.snap +++ b/client/src/components/Footer/__snapshots__/Footer.test.js.snap @@ -8,7 +8,7 @@ exports[` diff --git a/client/src/components/Footer/footer.css b/client/src/components/Footer/footer.css index 495378997a..1e1c14dda8 100644 --- a/client/src/components/Footer/footer.css +++ b/client/src/components/Footer/footer.css @@ -1,11 +1,12 @@ +/* 11. Site Footer +/* ---------------------------------------------------------- */ + .site-footer { position: relative; color: var(--tertiary-color); background: var(--tertiary-background); line-height: 1.6; font-family: 'Lato', sans-serif; - font-size: 15px; - margin-top: auto; } .footer-container { @@ -15,31 +16,40 @@ padding-right: 15px; padding-top: 40px; padding-bottom: 40px; - font-size: 15px; + font-size: 16px; overflow-x: hidden; } .footer-container p { - font-family: 'Lato', sans-serif; margin: 0 0 1.45rem; - font-size: 15px; line-height: 30px; + font-family: 'Lato', sans-serif; + font-size: 16px; } .footer-container a { color: var(--tertiary-color); + text-decoration: none; +} + +.footer-container a:hover { + text-decoration: underline; } .footer-container .col-header { - padding-bottom: 30px; + flex: 0 0 100%; + padding-bottom: 15px; font-weight: 700; font-size: 16px; + text-align: center; + padding: 0 15px 15px; } .footer-row { display: flex; flex-direction: row; flex-wrap: wrap; + margin: 0px; } .footer-col { @@ -48,16 +58,18 @@ flex: 0 0 100%; padding-left: 15px; padding-right: 15px; - font-size: 15px; - margin: 0 0 3rem; -} -.footer-col a { - text-decoration: none; - padding: 5px 0px; + font-size: 16px; } -.footer-col a:hover { - text-decoration: underline; +.footer-right, +.footer-left { + display: flex; + flex-direction: column; + flex: 0 0 100%; +} + +.footer-col a { + padding: 5px 0px; } .footer-desc-col { @@ -78,22 +90,49 @@ p.footer-donation { font-size: 18px; } +p.footer-donation a:hover { + text-decoration: none; +} + .footer-container .col-spacer { margin-top: -3rem; } +.trending-guides { + margin: 0 0 3rem; +} + +.footer-buttom .our-nonprofit { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; +} + +.footer-buttom .our-nonprofit a { + padding: 5px 10px; +} + @media (min-width: 500px) { - .footer-col { - flex: 1 0 50%; + .trending-guides-row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + } + .footer-col-3 { + flex: 1 0 100%; + flex-direction: row; + } + .footer-right { + padding-left: 15px; + } + .footer-col-1, + .footer-col-2, + .footer-right, + .footer-left { + flex: 1 0 45%; height: auto; - font-size: 16.5; - margin: 0 0 1.45rem; - } - .footer-col:last-of-type { - margin-left: 50%; - } - .footer-container .col-spacer { - margin-top: -1.45rem; + font-size: 15; } } @@ -101,21 +140,24 @@ p.footer-donation { .footer-container { width: 750px; } - .footer-col { + .footer-col-1, + .footer-col-2, + .footer-col-3 { flex: 1 0 25%; height: auto; font-size: 16.5; } - - /* .our-nonprofit { - flex: 1 0 35%; - } */ - .footer-col:last-of-type { - /* flex: 1 0 30%; */ - margin-left: 0px; + .footer-col-3 { + flex-direction: column; + } + .footer-right { + padding-left: 0px; } .footer-container .col-spacer { - margin-top: 54px; + margin-top: 40px; + } + .footer-buttom .our-nonprofit a { + padding: 5px; } } @@ -129,17 +171,45 @@ p.footer-donation { .footer-container { width: 1170px; } - .footer-desc-col { - flex: 1 0 35%; + .footer-top { + display: flex; + flex-direction: row; } - .footer-col { - flex: 1 0 9%; + .footer-desc-col { + flex: 1 0 45%; } .trending-guides { - flex: 1 0 15%; + flex: 1 0 58%; + } + + .footer-col-1 { + flex: 1 0 25%; + } + .footer-col-3 { + flex: 1 0 30%; + } + .footer-col-2 { + flex: 1 0 20%; } p.footer-donation { margin-top: 18px; } + + .footer-buttom .our-nonprofit { + padding: 0 10px; + justify-content: space-between; + } + + .footer-buttom .col-header { + display: none; + } + .our-nonprofit { + margin-top: 20px; + } + .footer-divder { + height: 2px; + margin: 0 15px; + background-color: var(--quaternary-background); + } } diff --git a/client/src/components/Footer/footerLinks.json b/client/src/components/Footer/footerLinks.json deleted file mode 100644 index 88d0bb463e..0000000000 --- a/client/src/components/Footer/footerLinks.json +++ /dev/null @@ -1,87 +0,0 @@ -{ - "footerLinks": [ - { - "title": "Our Nonprofit", - "links": [ - { "to": "/news/about/", "text": "About" }, - { - "to": "https://www.linkedin.com/school/free-code-camp/people/", - "text": "Alumni Network" - }, - { "to": "https://github.com/freeCodeCamp/", "text": "Open Source" }, - { "to": "/news/shop/", "text": "Shop" }, - { "to": "/news/support/", "text": "Support" }, - { "to": "/news/sponsors/", "text": "Sponsors" }, - { - "to": "/news/academic-honesty-policy/", - "text": "Academic Honesty" - }, - { "to": "/news/code-of-conduct/", "text": "Code of Conduct" }, - { "to": "/news/privacy-policy/", "text": "Privacy Policy" }, - { "to": "/news/terms-of-service/", "text": "Terms of Service" }, - { "to": "/news/copyright-policy/", "text": "Copyright Policy" } - ] - }, - { - "title": "Trending Guides", - "links": [ - { - "to": "/news/2019-web-developer-roadmap/", - "text": "2019 Web Developer Roadmap" - }, - { "to": "/news/best-python-tutorial/", "text": "Python Tutorial" }, - { - "to": "/news/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af/", - "text": "CSS Flexbox Guide" - }, - { - "to": "/news/best-javascript-tutorial/", - "text": "JavaScript Tutorial" - }, - { "to": "/news/python-example/", "text": "Python Example" }, - { "to": "/news/best-html-html5-tutorial/", "text": "HTML Tutorial" }, - { - "to": "/news/linux-command-line-bash-tutorial/", - "text": "Linux Command Line Guide" - }, - { "to": "/news/javascript-example/", "text": "JavaScript Example" }, - - { "to": "/news/best-git-tutorial/", "text": "Git Tutorial" }, - { - "to": "/news/best-react-javascript-tutorial/", - "text": "React Tutorial" - }, - { "to": "/news/best-java-8-tutorial/", "text": "Java Tutorial" } - ] - }, - { - "title": "", - "links": [ - { "to": "/news/the-best-linux-tutorials/", "text": "Linux Tutorial" }, - - { "to": "/news/best-css-and-css3-tutorial/", "text": "CSS Tutorial" }, - { "to": "/news/the-best-jquery-examples/", "text": "jQuery Example" }, - { "to": "/news/best-sql-database-tutorial/", "text": "SQL Tutorial" }, - { "to": "/news/css-example-css3/", "text": "CSS Example" }, - { "to": "/news/react-examples-reactjs/", "text": "React Example" }, - { - "to": "/news/best-angular-tutorial-angularjs/", - "text": "Angular Tutorial" - }, - { - "to": "/news/the-best-bootstrap-examples/", - "text": "Bootstrap Example" - }, - { - "to": "/news/the-ultimate-guide-to-ssh-setting-up-ssh-keys/", - "text": "How to Set Up SSH Keys" - }, - { - "to": "/news/best-wordpress-tutorial/", - "text": "WordPress Tutorial" - }, - { "to": "/news/the-best-php-examples/", "text": "PHP Example" } - ] - } - ] -} diff --git a/client/src/components/Footer/index.js b/client/src/components/Footer/index.js index 4b40879cf1..56c6ef210b 100644 --- a/client/src/components/Footer/index.js +++ b/client/src/components/Footer/index.js @@ -2,9 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Link from '../helpers/Link'; -import FooterCol from './FooterCol'; -import { footerLinks } from './footerLinks'; import './footer.css'; const propTypes = { @@ -22,7 +20,7 @@ function Footer() { return (