diff --git a/public/App.jsx b/public/App.jsx index e8e3765..53aedd0 100644 --- a/public/App.jsx +++ b/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 ( -
+
+
diff --git a/public/background/Background.jsx b/public/background/Background.jsx new file mode 100644 index 0000000..4cba093 --- /dev/null +++ b/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(
); + } + + return ( +
+
+ { inners } +
+
+ ); +} diff --git a/public/footer/Footer.jsx b/public/footer/Footer.jsx index 2da136e..fc996b2 100644 --- a/public/footer/Footer.jsx +++ b/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 ( + Link + ); +} class Footer extends React.Component { constructor(props) { @@ -31,7 +38,20 @@ class Footer extends React.Component { render() { return ( ); } diff --git a/public/images/grain.png b/public/images/grain.png new file mode 100644 index 0000000..01bd32e Binary files /dev/null and b/public/images/grain.png differ diff --git a/public/styles/components/_footer.scss b/public/styles/components/_footer.scss index 3f15f54..d93a517 100644 --- a/public/styles/components/_footer.scss +++ b/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: " | "; + } + } } diff --git a/public/styles/index.scss b/public/styles/index.scss index 68a2393..a93c25b 100644 --- a/public/styles/index.scss +++ b/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'; diff --git a/public/styles/objects/_app.scss b/public/styles/objects/_app.scss index 095f30a..1578c0b 100644 --- a/public/styles/objects/_app.scss +++ b/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 */ - } } diff --git a/public/styles/objects/_background.scss b/public/styles/objects/_background.scss new file mode 100644 index 0000000..b0a8330 --- /dev/null +++ b/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'); + } +}