Move some styling into glamor and use brand

Content changes.

public/pages/HomeAbout.md

@@ -1,12 +1,7 @@
-## Welcome to Shimmer
+# Welcome to Shimmer
 
 Shimmer is a site generator build to easily work with GitHub Pages for personal websites or project websites. It's
 written in ReactJS using a blend of JSON and Markdown files to offer easy customisation. It supports posts and pages using
 a widget based system to display a range of content on the frontend. I set this up to support my personal sites and projects
 as an easy and quick why to create a range of interesting frontend sites to better support me as a developer and show off
-my projects.
-
-### Project Aims
-
-#### Versatility
-#### Ease of use
+my projects.

public/pages/pages.json

@@ -2,7 +2,6 @@
   "location": "/",
   "title": "Home",
   "widgets": [
-    {"name": "Header", "children": ["Hello!"], "colSpan": 3},
     {"name": "Readme", "children": [], "colSpan": 3, "readmeUrl": "/Shimmer/pages/HomeAbout.md"},
     {"name": "Accordion", "children": [], "colSpan": 3, "items": [
       {

src/SiteFooter/SiteFooter.js

@@ -1,15 +1,42 @@
 import React from 'react';
 import useSettings from '../Hooks/useSettings';
 import './SiteFooter.scss';
+import { css } from 'glamor';
 
 export default () => {
 
   const {settings} = useSettings();
 
+  const footerRule = css({
+    "padding": "16px",
+    "background-color": settings['dark-bg'],
+    "color": settings['brand-secondary-text'],
+    "width": "100%",
+    "position": "fixed",
+    "bottom": 0,
+    "box-sizing": "border-box",
+  });
+
+  const contentRule = css({
+    "max-width": "1920px",
+    "width": "100%",
+    "margin": "0 auto",
+    "display": "flex",
+    "justify-content": "space-between",
+  });
+
+  const textRule = css({
+    "text-decoration": "none",
+    "color": settings['brand-secondary-text'],
+  });
+
   return (
-    <footer className={"Footer"}>
-      <div className={"Content"}>
-        <a href={"#"}>{settings.site_owner}</a>
+    <footer {...footerRule} className={"Footer"}>
+      <div {...contentRule} className={"Content"}>
+        <a {...textRule} href={"#"}>{settings.site_owner}</a>
+        <div {...textRule}>
+          Powered by <a href={"https://github.com/Corofides/Shimmer"} {...textRule}>Shimmer</a>
+        </div>
       </div>
     </footer>
   )

src/SiteFooter/SiteFooter.scss

@@ -1,17 +1,7 @@
 @import '../colours';
 
 .Footer {
-  padding: 16px;
-  background-color: $silent-midnight;
-  color: $glimmering-silver;
-  width: 100%;
-  position: fixed;
-  bottom: 0;
 
-  a {
-    color: $glimmering-silver;
-    text-decoration: none;
-  }
 
 }
 

src/SiteHeader/SiteHeader.js

@@ -1,16 +1,41 @@
 import React from 'react';
 import useSettings from '../Hooks/useSettings';
 import './SiteHeader.scss';
+import { css } from 'glamor';
 
 export default () => {
 
   const {settings} = useSettings();
 
+  const headerRule = css({
+    "background-color": settings['brand-primary-bg'],
+    "padding": "16px",
+    "width": "100%",
+    "box-sizing": "border-box",
+  });
+
+  const contentRule = css({
+    "display": "flex",
+    "align-items": "baseline",
+    "justify-content": "space-between",
+    "width": "100%",
+    "max-width": "1920px",
+    "margin": "0 auto",
+    "color": settings['brand-primary-text'],
+    "text-decoration": "none",
+  });
+
+  const siteNameRule = css({
+    "color": settings['brand-primary-text'],
+    "text-decoration": "none",
+    "margin": 0,
+  });
+
   return (
-    <header className={"Header"}>
-      <div className={"Content"}>
-        <h1 className={"SiteName"}>
-          <a href={"/Shimmer"}>
+    <header {...headerRule} className={"Header"}>
+      <div {...contentRule} className={"Content"}>
+        <h1 {...siteNameRule} className={"SiteName"}>
+          <a {...siteNameRule} href={"/Shimmer"}>
             {settings.site_name}
           </a>
         </h1>
@@ -19,4 +44,5 @@ export default () => {
     </header>
   )
 
-}
+}
+

src/SiteHeader/SiteHeader.scss

@@ -1,31 +1,5 @@
 @import '../colours';
 
-.Header {
-  background-color: $silent-midnight;
-  padding: 16px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.Content {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  width: 100%;
-  max-width: 1920px;
-  margin: 0 auto;
-}
-
-.SiteName {
-  margin: 0;
-
-  a {
-    color: $crystal-white;
-    text-decoration: none;
-  }
-
-}
-
 nav {
 
   a {