From cb1754cb88d625ecd511fa856b58afad311ed75c Mon Sep 17 00:00:00 2001
From: Corofides <J.l.lendrem@smoothlines.net>
Date: Thu, 2 Nov 2023 12:42:33 +0000
Subject: [PATCH] Move some styling into glamor and use brand Content changes.

---
 public/pages/HomeAbout.md      |  9 ++-------
 public/pages/pages.json        |  1 -
 src/SiteFooter/SiteFooter.js   | 33 ++++++++++++++++++++++++++++---
 src/SiteFooter/SiteFooter.scss | 10 ----------
 src/SiteHeader/SiteHeader.js   | 36 +++++++++++++++++++++++++++++-----
 src/SiteHeader/SiteHeader.scss | 26 ------------------------
 6 files changed, 63 insertions(+), 52 deletions(-)

diff --git a/public/pages/HomeAbout.md b/public/pages/HomeAbout.md
index bf8d828..121f926 100644
--- a/public/pages/HomeAbout.md
+++ b/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
\ No newline at end of file
+my projects.
\ No newline at end of file
diff --git a/public/pages/pages.json b/public/pages/pages.json
index 569375f..101ef93 100644
--- a/public/pages/pages.json
+++ b/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": [
       {
diff --git a/src/SiteFooter/SiteFooter.js b/src/SiteFooter/SiteFooter.js
index f8ec843..1aa5cfe 100644
--- a/src/SiteFooter/SiteFooter.js
+++ b/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>
   )
diff --git a/src/SiteFooter/SiteFooter.scss b/src/SiteFooter/SiteFooter.scss
index 99c1634..8f5cbd5 100644
--- a/src/SiteFooter/SiteFooter.scss
+++ b/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;
-  }
 
 }
 
diff --git a/src/SiteHeader/SiteHeader.js b/src/SiteHeader/SiteHeader.js
index a4a7390..11d63b2 100644
--- a/src/SiteHeader/SiteHeader.js
+++ b/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>
   )
 
-}
\ No newline at end of file
+}
+
diff --git a/src/SiteHeader/SiteHeader.scss b/src/SiteHeader/SiteHeader.scss
index 851c213..6bd1cb9 100644
--- a/src/SiteHeader/SiteHeader.scss
+++ b/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 {