Design upgrades, responsiveness and tweaks

src/components/Header.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import Link, { withPrefix } from 'gatsby-link'
 import LogoSaburly from '../images/saburly-logo-purple.svg'
+import LogoSaburlyWhite from '../images/logo-saburly-white.svg'
 import Button from './Button'
 
 import './Header.css'
@@ -11,11 +12,20 @@ let menuClasses =
 class Header extends Component {
   render() {
     return (
-      <header className="bg-saburly-light">
+      <header className="bg-saburly-light-header">
         <nav className="container mx-auto flex items-center justify-between lg:p-6 p-4">
           <Link to="/">
             <div className="max-w-xs mr-8">
-              <img src={LogoSaburly} className="w-full" alt="Saburly Logo" />
+              <img
+                src={LogoSaburly}
+                className="w-full lg:block hidden"
+                alt="Saburly Logo"
+              />
+              <img
+                src={LogoSaburlyWhite}
+                className="w-full lg:hidden"
+                alt="Saburly Logo"
+              />
             </div>
           </Link>