diff --git a/landing/button.css b/landing/button.css --- a/landing/button.css +++ b/landing/button.css @@ -5,7 +5,7 @@ background-color: var(--btn-bg); color: var(--btn-color); justify-content: center; - padding: 12px 24px; + padding: 8px 16px; transition: 300ms; flex-basis: 120px; text-align: center; diff --git a/landing/header.css b/landing/header.css --- a/landing/header.css +++ b/landing/header.css @@ -9,7 +9,7 @@ align-items: center; grid-template-columns: 40px repeat(12, 1fr) 40px; column-gap: 1.5%; - grid-template-areas: '. logo logo . . . page_nav page_nav . cta_btn cta_btn cta_btn sIcons .'; + grid-template-areas: '. logo logo . . . page_nav page_nav . cta_btn cta_btn sIcons sIcons .'; } .logo { @@ -44,21 +44,14 @@ justify-content: flex-end; } -.social_icons { +.social_icons_container { grid-area: sIcons; display: flex; - justify-self: flex-end; -} - -.github_icon { - padding-left: 14px; - font-size: 20px; - grid-area: gIcon; + justify-content: space-evenly; } -.twitter_icon { +.social_icon { font-size: 20px; - grid-area: tIcon; } @media screen and (max-width: 1099px) { @@ -82,8 +75,7 @@ display: none; } - .github_icon, - .twitter_icon { + .social_icon { display: block; } } diff --git a/landing/header.react.js b/landing/header.react.js --- a/landing/header.react.js +++ b/landing/header.react.js @@ -1,6 +1,7 @@ // @flow import { faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons'; +import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import * as React from 'react'; import { NavLink } from 'react-router-dom'; @@ -44,11 +45,14 @@
-
- +
+ + + + - +