From 638811bf8b744822c41417e70fd17f8c67cebfa4 Mon Sep 17 00:00:00 2001
From: Tanya Powell <hello@tanyapowell.co.uk>
Date: Mon, 17 Apr 2017 14:22:09 +0100
Subject: [PATCH 1/6] hamburger issues solved

---
 webpack/components/Nav.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webpack/components/Nav.jsx b/webpack/components/Nav.jsx
index 6d622b3..4200586 100644
--- a/webpack/components/Nav.jsx
+++ b/webpack/components/Nav.jsx
@@ -15,10 +15,10 @@ export default class Nav extends React.Component {
     return (
       <nav className="navbar navbar-fixed-top">
         <a className="navbar-brand" href="/#/home"> Draw My Life</a>
-        <button className="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
+        <button className="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
           &#9776;
         </button>
-        <div className="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
+        <div className="collapse navbar-collapse" id="exCollapsingNavbar2">
         <ul className="nav navbar-nav pull-right">
             { _displayNavItem }
           </ul>

From fdc39c80bc9186a530458d698ec575f053e8d304 Mon Sep 17 00:00:00 2001
From: Tanya Powell <hello@tanyapowell.co.uk>
Date: Mon, 17 Apr 2017 18:29:00 +0100
Subject: [PATCH 2/6] navbar styled according to designs

---
 src/_sass/_components/_navigation.scss | 12 ++++++++++++
 src/_sass/_helpers/_variables.scss     |  7 +++++++
 src/_sass/background.scss              | 15 +++++++++++++--
 webpack/components/Layout.jsx          |  6 +-----
 webpack/components/Nav.jsx             |  2 +-
 5 files changed, 34 insertions(+), 8 deletions(-)
 create mode 100644 src/_sass/_components/_navigation.scss
 create mode 100644 src/_sass/_helpers/_variables.scss

diff --git a/src/_sass/_components/_navigation.scss b/src/_sass/_components/_navigation.scss
new file mode 100644
index 0000000..1611cd7
--- /dev/null
+++ b/src/_sass/_components/_navigation.scss
@@ -0,0 +1,12 @@
+@import '_helpers/variables';
+
+nav {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+
+  &.navbar-default {
+    background-color: $white;
+    border-color: $white;
+  }
+}
diff --git a/src/_sass/_helpers/_variables.scss b/src/_sass/_helpers/_variables.scss
new file mode 100644
index 0000000..0b6835a
--- /dev/null
+++ b/src/_sass/_helpers/_variables.scss
@@ -0,0 +1,7 @@
+@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,700');
+
+// **** Fonts **** //
+$font-family: 'Josefin Sans', sans-serif;
+
+// **** Colours **** //
+$white: white;
diff --git a/src/_sass/background.scss b/src/_sass/background.scss
index 80afe79..229f89c 100644
--- a/src/_sass/background.scss
+++ b/src/_sass/background.scss
@@ -1,3 +1,14 @@
+@import '_helpers/variables';
+@import '_components/navigation';
+
 body {
-  background: red;
-}
\ No newline at end of file
+  font-family: $font-family;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-size: 700;
+}
diff --git a/webpack/components/Layout.jsx b/webpack/components/Layout.jsx
index 0e12013..43036c4 100644
--- a/webpack/components/Layout.jsx
+++ b/webpack/components/Layout.jsx
@@ -13,14 +13,10 @@ export default class Layout extends React.Component {
   render() {
     return (
       <div className="page-wrap">
-        <Nav />
-
         <div className="container-fluid">
-          <div className="wrapper">
+          <Nav />
             { this.props.children }
-          </div>
         </div>
-        
         <Footer />
       </div>
     );
diff --git a/webpack/components/Nav.jsx b/webpack/components/Nav.jsx
index 4200586..281b82a 100644
--- a/webpack/components/Nav.jsx
+++ b/webpack/components/Nav.jsx
@@ -13,7 +13,7 @@ export default class Nav extends React.Component {
     });
 
     return (
-      <nav className="navbar navbar-fixed-top">
+      <nav className="navbar navbar-default">
         <a className="navbar-brand" href="/#/home"> Draw My Life</a>
         <button className="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
           &#9776;

From 83b61927f93075f50b4f5455dd972dc95a06628c Mon Sep 17 00:00:00 2001
From: Tanya Powell <hello@tanyapowell.co.uk>
Date: Mon, 17 Apr 2017 18:29:51 +0100
Subject: [PATCH 3/6] background.scss renamed to main.scss

---
 src/_sass/{background.scss => main.scss} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/_sass/{background.scss => main.scss} (100%)

diff --git a/src/_sass/background.scss b/src/_sass/main.scss
similarity index 100%
rename from src/_sass/background.scss
rename to src/_sass/main.scss

From 0b2353f199adab2f35db03f9e253b1d5f20b0987 Mon Sep 17 00:00:00 2001
From: Tanya Powell <hello@tanyapowell.co.uk>
Date: Mon, 17 Apr 2017 18:36:22 +0100
Subject: [PATCH 4/6] responsive mixins added

---
 src/_sass/_helpers/_mixins.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 src/_sass/_helpers/_mixins.scss

diff --git a/src/_sass/_helpers/_mixins.scss b/src/_sass/_helpers/_mixins.scss
new file mode 100644
index 0000000..194ed5d
--- /dev/null
+++ b/src/_sass/_helpers/_mixins.scss
@@ -0,0 +1,12 @@
+// **** Responsive Breakpoints **** //
+@mixin breakpoint($point) {
+  @if $point == large {
+    @media (max-width: 64.375em) { @content; }
+  }
+  @else if $point == medium {
+    @media (max-width: 50em) { @content; }
+  }
+  @else if $point == small {
+    @media (max-width: 37.5em)  { @content; }
+  }
+}

From 285c92305dd47c3252bb2a61b110dddc14029b7b Mon Sep 17 00:00:00 2001
From: Tanya Powell <hello@tanyapowell.co.uk>
Date: Tue, 18 Apr 2017 01:03:31 +0100
Subject: [PATCH 5/6] mobile version of navbar amended so branding is on left
 and menu on right

---
 src/_sass/_components/_navigation.scss   | 15 +++++++++++++++
 src/_sass/{main.scss => background.scss} |  0
 2 files changed, 15 insertions(+)
 rename src/_sass/{main.scss => background.scss} (100%)

diff --git a/src/_sass/_components/_navigation.scss b/src/_sass/_components/_navigation.scss
index 1611cd7..150f541 100644
--- a/src/_sass/_components/_navigation.scss
+++ b/src/_sass/_components/_navigation.scss
@@ -1,4 +1,5 @@
 @import '_helpers/variables';
+@import '_helpers/mixins';
 
 nav {
   align-items: center;
@@ -9,4 +10,18 @@ nav {
     background-color: $white;
     border-color: $white;
   }
+
+  @include breakpoint(small) {
+    flex-flow: row nowrap;
+    justify-content: space-around;
+
+    &.navbar {
+      margin: 0;
+    }
+
+    .navbar-toggle {
+      margin-left: auto;
+      margin-right: 0;
+    }
+  }
 }
diff --git a/src/_sass/main.scss b/src/_sass/background.scss
similarity index 100%
rename from src/_sass/main.scss
rename to src/_sass/background.scss

From 1beb6843ebdae67fedec2ba4e7de29e015a15727 Mon Sep 17 00:00:00 2001
From: Tanya Powell <hello@tanyapowell.co.uk>
Date: Sat, 22 Apr 2017 23:38:28 +0400
Subject: [PATCH 6/6] updated react bootstrap dependency

---
 webpack/components/Nav.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webpack/components/Nav.jsx b/webpack/components/Nav.jsx
index 281b82a..a122501 100644
--- a/webpack/components/Nav.jsx
+++ b/webpack/components/Nav.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { LinkContainer } from 'react-router-bootstrap';
-import { NavItem } from 'react-bootstrap';
+import { NavItem } from 'react-bootstrap-4';
 
 import { nav }  from '../copy/navigation';