From 5df1d16ce535c508c10c6a96886f2e313890e420 Mon Sep 17 00:00:00 2001
From: "fred.boniface" <fred@fjla.uk>
Date: Wed, 26 Oct 2022 21:35:23 +0100
Subject: [PATCH] Style updates - using CSS vars for color setting

---
 new_index.html      |  1 -
 style/new_style.css | 61 ++++++++++++++++++++++++++++++---------------
 2 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/new_index.html b/new_index.html
index 86389b9..ae8af14 100644
--- a/new_index.html
+++ b/new_index.html
@@ -54,7 +54,6 @@
       </div>
     </div>
     <div class="content show_micro">
-      <h2>Sorry</h2>
       <p>
         This website cannot correctly render on a screen this narrow, 
         Please resize your window or visit on a larger device.
diff --git a/style/new_style.css b/style/new_style.css
index de009c6..0e11923 100644
--- a/style/new_style.css
+++ b/style/new_style.css
@@ -1,3 +1,10 @@
+/* COLOR VARS */
+:root {
+    --main-bg-color: lightslategrey;
+    --accent-color: darkslategrey;
+    --overlay-color: #2f4f4f8f;
+    --main-text-color: azure;
+}
 /* FONTS */
 @font-face {
     font-family: 'indie-flower';
@@ -12,7 +19,7 @@ html {height: 100%;}
 body {
     width: 100%;
     margin: auto;
-    background-color: lightslategrey;
+    background-color: var(--main-bg-color);
 }
 /* PAGE HEADER */
 .header_image {
@@ -27,28 +34,35 @@ body {
     position: sticky;
     top: -145px;
 }
-#header_index{background-color: #a04911} /* Try using image-set() here to offer different formats, also try moving to HTML picture element */
-@media(min-width:  50px){#header_index{background-image: url("/images/headers/index/300.webp")}}
-@media(min-width: 301px){#header_index{background-image: url("/images/headers/index/500.webp")}}
-@media(min-width: 501px){#header_index{background-image: url("/images/headers/index/800.webp")}}
+#header_index{background-color: #a04911} /* Try using image-set() here to offer different formats */
+@media(min-width:  50px){#header_index{background-image:url("/images/headers/index/300.webp")}}
+@media(min-width: 301px){#header_index{background-image:url("/images/headers/index/500.webp")}}
+@media(min-width: 501px){#header_index{background-image:url("/images/headers/index/800.webp")}}
 @media(min-width: 801px){#header_index{background-image:url("/images/headers/index/1024.webp")}}
 @media(min-width:1025px){#header_index{background-image:url("/images/headers/index/1920.webp")}}
 @media(min-width:1921px){#header_index{background-image:url("/images/headers/index/2800.webp")}}
 @media(min-width:2801px){#header_index{background-image:url("/images/headers/index/4096.webp")}}
-#header_face{
+#header_face {
     display: flex;
     position: absolute;
-    top: -140px;
+    top: -184px;
     width: 100%;
+    height: 185px;
     text-align: center;
 }
-#header_face img{
+#header_face img {
     margin: auto;
     border-radius: 40px;
-    height: 100px;
+    border-style: solid;
+    border-color: var(--accent-color);
+    border-width: 3px;
+    max-height: 150px;
+    height: 30vw;
 }
+@media(min-width:400px){#header_face img{border-radius:50px;}}
+@media(min-width:540px){#header_face img{border-radius:55px;}}
 #page_title { /* This may be best floating above content div rather than inside header div */
-    background-color: #2f4f4f8f;
+    background-color: var(--overlay-color);
     font-family: indie-flower, cursive;
     font-size: large;
     width: 100%;
@@ -56,11 +70,11 @@ body {
     text-align: center;
     position: absolute;
     bottom: 0;
-    color: azure;
+    color: var(--main-text-color);
 }
 #menubar {
-    background-color: darkslategrey;
-    color: azure;
+    background-color: var(--accent-color);
+    color: var(--main-text-color);
     position: fixed;
     top: 0;
     left: 0;
@@ -79,7 +93,7 @@ body {
 }
 .sidebar_control {
     background-color: transparent;
-    color: azure;
+    color: var(--main-text-color);
     border: none;
     font-family: sans-serif;
     font-size: larger;
@@ -98,7 +112,7 @@ body {
     display: block;
     max-width: 250px;
     width: 0;
-    background-color: rgba(29,49,49,0.9);
+    background-color: var(--overlay-color);
     transition: 0.7s;
 }
 #sidebar a {
@@ -136,33 +150,40 @@ body {
     margin: auto;
     margin-top: 20px;
     margin-bottom: 40px;
-    color: azure;
+    color: var(--main-text-color);
 }
 /* FOOTER */
+/* FOOTER */
 footer {
     position: relative;
     width: 100%;
-    background-color: darkslategrey;
+    background-color: var(--accent-color);
     height: 30px;
     bottom: 0;
 }
 footer p {
     padding: 0;
+    padding-top: 5px;
+    margin: auto;
     margin-top: 9px;
     text-align: center;
-    color: azure;
-    font-family: monospace
+    color: var(--main-text-color);
+    font-family: monospace;
 }
 @media screen and (min-height: 600px) {
     footer {
         position: fixed;
         bottom: 0;
     }
+    footer p {
+        padding-top: 0px;
+        margin-top: 6px;
+    }
 }
 /* Hide .hide_micro on screens smaller than 250px and show .show_micro while not showing it on full screens */
 
 .show_micro {display:none}
-@media only screen and (max-width: 250px) {
+@media only screen and (max-width: 249px) {
     .hide_micro {display: none}
     .show_micro {display: block}
 }
\ No newline at end of file