Added Header and Footer, flex app.

public/App.jsx

@@ -22,7 +22,8 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
-import Navbar from './nav/navbar/Navbar';
+import Header from './header/Header';
+import Footer from './footer/Footer';
 import { HashRouter, Route, Switch } from 'react-router-dom';
 
 //Pages
@@ -38,13 +39,16 @@ class App extends React.Component {
     return (
       <HashRouter>
         <div className="o-app o-app--style-civil-twilight">
-          <Navbar />
+          <Header />
+
           <main className="o-main">
             <Switch>
               <Route exact path="/" component={ Homepage } />
               <Route exact path="/contact" component={ ContactPage } />
             </Switch>
           </main>
+
+          <Footer />
         </div>
       </HashRouter>
     );

public/footer/Footer.jsx

@@ -0,0 +1,40 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+
+class Footer extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <footer className="c-footer">
+        Footer
+      </footer>
+    );
+  }
+}
+
+export default Footer;

public/header/Header.jsx

@@ -0,0 +1,33 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+import Navbar from './../nav/navbar/Navbar';
+
+export default function(props) {
+  return (
+    <header>
+      <Navbar />
+    </header>
+  );
+}

public/styles/components/_footer.scss

@@ -0,0 +1,8 @@
+/*
+ *  Footer
+ *    Site Footer!
+ */
+.c-footer {
+  background: red;
+  
+}

public/styles/components/_page.scss

@@ -9,7 +9,6 @@
  *    1.0.0 - 2018/05/05
  */
 .c-page {
-  min-height: 100vh;
 
   &__boundary {
     max-width: $s-screen-boundary;

public/styles/index.scss

@@ -71,6 +71,7 @@
 
 //Components
 @import './components/_body-section.scss';
+@import './components/_footer.scss';
 @import './components/_image-section.scss';
 @import './components/_page.scss';
 @import './components/_section.scss';

public/styles/objects/_app.scss

@@ -3,6 +3,7 @@
  *    App styles for the app container.
  *
  *  Dependencies:
+ *    styles/tools/flex.scss
  *
  *  Version:
  *    1.0.0 - 2018/05/03
@@ -12,6 +13,9 @@
   min-height: 100vh;
   width: 100%;
 
+  @include t-flexbox();
+  @include t-flex-direction(column);
+
   //Civil Twilight
   &--style-civil-twilight {
     //http://colorzilla.com/gradient-editor/#bea9d0+0,dab2cd+25,e7b7c5+50,e4b0a3+75,c79a97+100

public/styles/objects/main.scss

@@ -6,4 +6,5 @@
  *    1.0.0 - 2018/05/07
  */
 .o-main {
+  @include t-flex-grow(1);
 }