diff --git a/public/App.jsx b/public/App.jsx index 067f9c5..970146f 100644 --- a/public/App.jsx +++ b/public/App.jsx @@ -29,6 +29,7 @@ import { HashRouter, Route, Switch } from 'react-router-dom'; //Pages import Homepage from './page/home/Homepage'; +import AboutPage from './page/about/AboutPage'; import ContactPage from './page/contact/ContactPage'; class App extends React.Component { @@ -46,6 +47,7 @@ class App extends React.Component {
+
diff --git a/public/images/patterns/arcade.svg b/public/images/patterns/arcade.svg new file mode 100644 index 0000000..e077c89 --- /dev/null +++ b/public/images/patterns/arcade.svg @@ -0,0 +1,1548 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/patterns/dots.svg b/public/images/patterns/dots.svg new file mode 100644 index 0000000..e7c5af8 --- /dev/null +++ b/public/images/patterns/dots.svg @@ -0,0 +1,392 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/pattern_poly.svg b/public/images/patterns/schoolbell.svg similarity index 100% rename from public/images/pattern_poly.svg rename to public/images/patterns/schoolbell.svg diff --git a/public/page/about/AboutPage.jsx b/public/page/about/AboutPage.jsx new file mode 100644 index 0000000..b2500ae --- /dev/null +++ b/public/page/about/AboutPage.jsx @@ -0,0 +1,36 @@ +// 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 Page, { PageBoundary } from './../Page'; +import Section, { ImageSection } from './../../section/Section'; +import ClearSection from './../../section/layout/ClearSection'; + +export default function() { + return ( + + + Test + + ); +} diff --git a/public/page/contact/ContactPage.jsx b/public/page/contact/ContactPage.jsx index c92ffab..d40997d 100644 --- a/public/page/contact/ContactPage.jsx +++ b/public/page/contact/ContactPage.jsx @@ -38,11 +38,11 @@ class ContactPage extends React.Component { render() { return ( + - - +
diff --git a/public/styles/components/_clear-section.scss b/public/styles/components/_clear-section.scss index 7f47917..ed52f63 100644 --- a/public/styles/components/_clear-section.scss +++ b/public/styles/components/_clear-section.scss @@ -1,7 +1,7 @@ /* * Clear section - * Simple section that is designed to clear pass the navbar. Can also be used - * to add a little spacing between sections. + * Simple section that is designed to clear pass the navbar (and some). + * Can also be used to add spacing between sections. * * Dependencies: * @@ -9,5 +9,7 @@ * 1.0.0 - 2018/06/05 */ .c-clear-section { - height: 20vh; + width: 100%; + padding-bottom: 15%; + position: relative; } diff --git a/public/styles/components/_footer.scss b/public/styles/components/_footer.scss index 88cb5f9..458aabf 100644 --- a/public/styles/components/_footer.scss +++ b/public/styles/components/_footer.scss @@ -8,15 +8,15 @@ * Version: * 1.0.0 - 2018/05/16 */ -$c-footer--shadow: 1em; +$c-footer--shadow: 1.5em; .c-footer { padding-top: 4em; padding-bottom: 6em; position: relative; overflow: hidden; - background-color: #F3E4C6; - background-image: url('./../images/grain.png'); - @include t-box-shadow(0px, -$c-footer--shadow, $c-footer--shadow, 0px, rgba(0, 0, 0, 0.5)); + background-image: url('./../images/patterns/schoolbell.svg'); + background-size: cover; + @include t-box-shadow(0px, $c-footer--shadow, $c-footer--shadow, 0px, rgba(0, 0, 0, 0.25), true); &__inner { text-align: center; diff --git a/public/styles/pages/_contact-page.scss b/public/styles/pages/_contact-page.scss index 678dc85..517cbb5 100644 --- a/public/styles/pages/_contact-page.scss +++ b/public/styles/pages/_contact-page.scss @@ -8,7 +8,8 @@ * 1.0.0 - 2018/05/28 */ .p-contact-page { - background-image: url('./../images/pattern_poly.svg'); + background-color: #37085E; + background-image: url('./../images/patterns/arcade.svg'); &__message-element { resize: none;