Changing to self hosting, restructure, logo and color changes

src/components/Footer.js

@@ -2,7 +2,7 @@ import React from 'react'
 import Link from 'gatsby-link'
 import Button from './Button'
 
-import LogoSaburly from '../images/logo-saburly-colorful.svg'
+import LogoSaburly from '../images/Saburly-logo.svg'
 
 import Facebook from '../images/facebook.svg'
 import Instagram from '../images/instagram.svg'
@@ -13,7 +13,7 @@ let menuClasses =
   'no-underline mt-4 lg:inline-block lg:mt-0 text-white  hover:opacity-100 uppercase mr-4'
 
 const Footer = () => (
-  <footer className="bg-saburly-dark">
+  <footer className="saburly-main-bg">
     <div className="text-center py-4 lg:px-4">
       <Link className="no-underline text-white" to="/contact">
         <div

src/components/Header.css

@@ -1,5 +1,8 @@
+.side-toggle {
+}
+
 .menu_icon [class*='menu_bar-'] {
-  background: #393990;
+  background: #ffffff;
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
   -webkit-transition: 0.2s ease all;
@@ -9,6 +12,10 @@
   margin-bottom: 0.3rem;
 }
 
+.menu_icon [class*='menu_bar-']:last-child {
+  margin-bottom: 0rem;
+}
+
 .menu_icon:focus {
   outline: 0;
 }

src/components/Header.js

@@ -1,22 +1,26 @@
 import React, { Component } from 'react'
 import Link, { withPrefix } from 'gatsby-link'
-import LogoSaburly from '../images/logo-saburly-colorful.svg'
-import LogoSaburlyWhite from '../images/logo-saburly-white.svg'
+import LogoSaburly from '../images/saburly-logo-4.svg'
+import LogoSaburlyWhite from '../images/saburly-logo-white.svg'
 import Button from './Button'
 
 import './Header.css'
 
 let menuClasses =
-  'no-underline mt-4 lg:inline-block text-black-light font-medium lg:mt-0 hover:opacity-70 uppercase mr-4'
+  'no-underline mt-4 lg:inline-block text-white font-medium lg:mt-0 hover:opacity-80 uppercase mr-4'
 
 class Header extends Component {
   render() {
     return (
-      <header className="bg-saburly-light-header">
+      <header className="saburly-main-bg saburly-bottom-shadow">
         <nav className="container border-saburly-header 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={LogoSaburlyWhite}
+                className="w-full saburly-logo"
+                alt="Saburly Logo"
+              />
             </div>
           </Link>
 
@@ -43,7 +47,7 @@ class Header extends Component {
               <Button
                 text="Contact"
                 standard
-                classes="rounded-full font-medium text-black-light hover:shadow"
+                classes="rounded-full font-medium text-white hover:shadow"
                 url="/contact"
               />
             </ul>

src/components/SideMenu.css

@@ -8,7 +8,7 @@
   -webkit-overflow-scrolling: touch;
   z-index: 0;
   display: none;
-  background-color: #393990;
+  background-color: #5763ab;
 }
 
 .slideout-menu-left {