Added background style options

public/App.jsx

@@ -22,6 +22,7 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
+import Background from './background/Background';
 import Header from './header/Header';
 import Footer from './footer/Footer';
 import { HashRouter, Route, Switch } from 'react-router-dom';
@@ -38,7 +39,8 @@ class App extends React.Component {
   render() {
     return (
       <HashRouter>
-        <div className="o-app o-app--style-civil-twilight">
+        <div className="o-app">
+          <Background style="twilight" />
           <Header />
 
           <main className="o-main">

public/background/Background.jsx

@@ -0,0 +1,42 @@
+// 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';
+
+export default function(props) {
+  let style = props.style || "test";
+  let styleClassPrefix = "o-background--style-"+style;
+  let inners = [];
+
+  if(style == "twilight") {
+    inners.push(<div className={"o-background__grain "+style+"__grain"} key="grain"></div>);
+  }
+
+  return (
+    <div className={"o-background "+styleClassPrefix}>
+      <div className={"o-background__inner " + styleClassPrefix + "__inner" }>
+        { inners }
+      </div>
+    </div>
+  );
+}

public/footer/Footer.jsx

@@ -22,6 +22,13 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
+import { PageBoundary } from './../page/Page';
+
+const FooterLink = function(props) {
+  return (
+    <a href="#" className="c-footer__link">Link</a>
+  );
+}
 
 class Footer extends React.Component {
   constructor(props) {
@@ -31,7 +38,20 @@ class Footer extends React.Component {
   render() {
     return (
       <footer className="c-footer">
-        Footer
+        <PageBoundary>
+          <div className="c-footer__inner">
+            <div className="c-footer__copyright">
+              Footer
+            </div>
+
+            <div className="c-footer__links">
+              <FooterLink title="privacy" />
+              <FooterLink title="privacy" />
+              <FooterLink title="privacy" />
+              <FooterLink title="privacy" />
+            </div>
+          </div>
+        </PageBoundary>
       </footer>
     );
   }

public/styles/components/_footer.scss

@@ -1,8 +1,37 @@
 /*
  *  Footer
  *    Site Footer!
+ *
+ *  Dependencies:
+ *    styles/tools/flex.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/16
  */
 .c-footer {
-  background: red;
-  
+  background: white;
+  padding: 0.75em 0;
+
+  &__inner {
+    @extend %t-flexbox;
+    @include t-justify-content(space-between);
+  }
+
+  &__copyright {
+
+  }
+
+  &__links {
+
+  }
+
+  &__link {
+    display: inline-block;
+
+    + #{&}::before {
+      display: inline-block;
+      padding: 0 0.25em;
+      content: " | ";
+    }
+  }
 }

public/styles/index.scss

@@ -61,6 +61,7 @@
 @import './objects/title.scss';
 
 @import './objects/_app.scss';
+@import './objects/_background.scss';
 @import './objects/_button.scss';
 @import './objects/_floating-content-box.scss';
 @import './objects/_form.scss';

public/styles/objects/_app.scss

@@ -9,20 +9,10 @@
  *    1.0.0 - 2018/05/03
  */
 .o-app {
-  //display: inline-block;//Fixes collapsing margins on children.
+  position: relative;
   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
-    background: #bea9d0;
-    background: -moz-linear-gradient(top, #bea9d0 0%, #dab2cd 25%, #e7b7c5 50%, #e4b0a3 75%, #c79a97 100%); /* FF3.6-15 */
-    background: -webkit-linear-gradient(top, #bea9d0 0%,#dab2cd 25%,#e7b7c5 50%,#e4b0a3 75%,#c79a97 100%); /* Chrome10-25,Safari5.1-6 */
-    background: linear-gradient(to bottom, #bea9d0 0%,#dab2cd 25%,#e7b7c5 50%,#e4b0a3 75%,#c79a97 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bea9d0', endColorstr='#c79a97',GradientType=0 ); /* IE6-9 */
-  }
 }

public/styles/objects/_background.scss

@@ -0,0 +1,44 @@
+/*
+ *  Background
+ *    Styles for the background of the site.
+ *
+ *  Dependencies:
+ *    styles/tools/_absolute-centering.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/17
+ */
+.o-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+
+  //Civil Twilight
+  &--style-twilight {
+    //http://colorzilla.com/gradient-editor/#bea9d0+0,dab2cd+25,e7b7c5+50,e4b0a3+75,c79a97+100
+    background: #bea9d0;
+    background: -moz-linear-gradient(top, #bea9d0 0%, #dab2cd 25%, #e7b7c5 50%, #e4b0a3 75%, #c79a97 100%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(top, #bea9d0 0%,#dab2cd 25%,#e7b7c5 50%,#e4b0a3 75%,#c79a97 100%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to bottom, #bea9d0 0%,#dab2cd 25%,#e7b7c5 50%,#e4b0a3 75%,#c79a97 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bea9d0', endColorstr='#c79a97',GradientType=0 ); /* IE6-9 */
+  }
+
+  &__inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+  }
+
+  //Elements that fill
+  &__grain {
+    @include t-absolute-fill();
+  }
+
+  &__grain {
+    background-image: url('./../images/grain.png');
+  }
+}