header tweaks

src/App.js

@@ -1,8 +1,8 @@
 import React, { Fragment } from 'react'
-import FadeIn from './components/atoms/FadeIn'
-import Routes from './Routes'
-import Footer from './components/molecules/Footer'
 import Helmet from 'react-helmet/es/Helmet'
+import Routes from './Routes'
+import FadeIn from './components/atoms/FadeIn'
+import Footer from './components/molecules/Footer'
 import meta from './data/meta.json'
 
 const Head = () => (

src/components/molecules/Header.js

@@ -1,11 +1,11 @@
-import React from 'react'
+import React, { Component } from 'react'
 import Link from 'react-router-dom/Link'
 import PropTypes from 'prop-types'
 import Social from './Social'
 import './Header.css'
 import meta from '../../data/meta.json'
 
-class Header extends React.Component {
+class Header extends Component {
   render() {
     const minimal = this.props.minimal
     const classes = (minimal ? 'header header--minimal' : 'header')

src/components/molecules/Header.scss

@@ -15,7 +15,6 @@
     font-size: 3rem;
     color: $brand-grey-light;
     margin-bottom: $spacer / 2;
-    transition: color .2s ease-out;
 }
 
 .header__title,
@@ -48,7 +47,14 @@
     justify-content: space-between;
 
     @media (min-width: 30rem) {
-        margin-bottom: $spacer * 2;
+        margin-bottom: $spacer;
+    }
+
+    .header__title,
+    .header__description,
+    .header__logo {
+        color: $brand-grey-light;
+        transition: color .2s ease-out;
     }
 
     .header__title {
@@ -76,6 +82,14 @@
             .header__logo {
                 color: $brand-cyan;
             }
+
+            .header__title {
+                color: $brand-main;
+            }
+
+            .header__description {
+                color: $brand-grey;
+            }
         }
     }
 
@@ -91,10 +105,20 @@
         padding: $spacer / 8;
         margin-left: $spacer / 4;
         margin-right: $spacer / 4;
+        background: transparent;
+        box-shadow: none;
+        transform: none;
 
         .icon {
-            width: .75rem;
+            fill: $brand-grey-light;
-            height: .75rem;
+            transition: .2s ease-out;
+        }
+
+        &:hover,
+        &:focus {
+            .icon {
+                fill: $brand-grey;
+            }
         }
     }
 }

src/components/molecules/Social.scss

@@ -10,7 +10,7 @@
 .social__link {
     margin-left: $spacer / 2;
     margin-right: $spacer / 2;
-    background: $brand-grey-dimmed;
+    background: $brand-light;
     padding: $spacer / 4;
     text-align: center;
     display: flex;
@@ -23,6 +23,7 @@
 
     &:hover,
     &:focus {
+        background: $brand-grey-dimmed;
         transform: translate3d(0, -.2rem, 0);
         box-shadow: 0 6px 10px rgba($brand-main, .1), 0 10px 25px rgba($brand-main, .1);
     }

src/components/organisms/Projects.js

@@ -4,7 +4,6 @@ import LazyLoad from 'react-lazyload'
 import FadeIn from '../atoms/FadeIn'
 import projects from '../../data/projects.json'
 import images from '../../images'
-import '../atoms/FullWidth'
 import './Projects.css'
 
 const Projects = () => (

src/components/pages/Home.js

@@ -1,7 +1,6 @@
 import React, { Component, Fragment } from 'react'
 import Header from '../molecules/Header'
 import Projects from '../organisms/Projects'
-
 import './Home.css'
 
 class Home extends Component {
@@ -9,7 +8,6 @@ class Home extends Component {
     return (
       <Fragment>
         <Header />
-
         <main className="screen screen--home">
           <Projects />
         </main>

src/stylesheets/_variables.scss

@@ -6,7 +6,7 @@ $brand-cyan:            #43a699;
 $brand-light:           #e7eef4;
 
 $brand-grey:			#6b7f88;
-$brand-grey-light:		lighten($brand-grey, 10%);
+$brand-grey-light:		lighten($brand-grey, 15%);
 $brand-grey-dimmed:     lighten($brand-grey, 50%);