diff --git a/src/App.js b/src/App.js index c04eae1..83606f8 100644 --- a/src/App.js +++ b/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 = () => ( diff --git a/src/components/molecules/Header.js b/src/components/molecules/Header.js index 3d37082..0b2ce8f 100644 --- a/src/components/molecules/Header.js +++ b/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') diff --git a/src/components/molecules/Header.scss b/src/components/molecules/Header.scss index b1bc21e..792148b 100644 --- a/src/components/molecules/Header.scss +++ b/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; - height: .75rem; + fill: $brand-grey-light; + transition: .2s ease-out; + } + + &:hover, + &:focus { + .icon { + fill: $brand-grey; + } } } } diff --git a/src/components/molecules/Social.scss b/src/components/molecules/Social.scss index 1d454bb..adf904f 100644 --- a/src/components/molecules/Social.scss +++ b/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); } diff --git a/src/components/organisms/Projects.js b/src/components/organisms/Projects.js index 72ab3c6..a5aaa6c 100644 --- a/src/components/organisms/Projects.js +++ b/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 = () => ( diff --git a/src/components/pages/Home.js b/src/components/pages/Home.js index 2329321..52e21f9 100644 --- a/src/components/pages/Home.js +++ b/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 (
-
diff --git a/src/stylesheets/_variables.scss b/src/stylesheets/_variables.scss index b7fcdd4..d06ed8d 100644 --- a/src/stylesheets/_variables.scss +++ b/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%);