From 7bf94ced84c9cb1abe9447efb7aa8e1683123994 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Wed, 12 Apr 2023 09:53:41 +1000
Subject: [PATCH] added css variables

---
 resources/css/app.scss       | 11 +++++++----
 resources/css/variables.scss | 24 ++++++++++++++++++++++--
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/resources/css/app.scss b/resources/css/app.scss
index 3cd7602..40cda39 100644
--- a/resources/css/app.scss
+++ b/resources/css/app.scss
@@ -15,11 +15,14 @@ html {
 
 html,
 body {
-    font-family: $font-family;
-    font-size: $font-size;
-    color: $font-color;
+    font-family: $default-font-family;
+    font-size: $default-font-size;
+    background-color: var(--base-colour);
+    color: var(--base-colour-text);
+    width: 100vw;
     min-height: 100vh;
-    background-color: $background-color;
+    min-width: 100vw;
+    overflow-x: hidden;
 }
 
 // Who knows why ion-icon randomally sets this to hidden.....
diff --git a/resources/css/variables.scss b/resources/css/variables.scss
index 22b4685..d938118 100644
--- a/resources/css/variables.scss
+++ b/resources/css/variables.scss
@@ -1,7 +1,27 @@
 @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;1000&display=swap");
 
-$font-family: "Nunito", "Nunito override", "Arial", "Helvetica", sans-serif;
-$font-size: 1.1rem;
+:root {
+    --base-colour: #efefef;
+    --base-colour-text: #333;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --base-colour: #333;
+        --base-colour-text: #efefef;
+    }
+}
+
+$default-font-family: "Nunito", "Nunito override", "Arial", "Helvetica",
+    sans-serif;
+$default-font-size: 18px;
+
+$base-colour: #efefef;
+
+/* interim */
+$font-size: $default-font-size;
+
+/* old variables */
 
 $font-color: rgba(255, 255, 255, 1);
 $background-color: rgba(40, 44, 48, 1);