WIP moving colours to custom properties in colours.css

Adrian Simmons created 1 year ago

Signed-off-by: Adrian Simmons <[e-mail]>

Change summary

ws/static/colours.css         | 13 +++++++++++++
ws/static/home.html           |  2 ++
ws/static/login.html          |  2 ++
ws/static/new.html            |  2 ++
ws/static/select-release.html |  2 ++
ws/static/styles.css          | 14 +++-----------
6 files changed, 24 insertions(+), 11 deletions(-)

Detailed changes

ws/static/colours.css

@@ -0,0 +1,13 @@
+
+:root {
+	--primary: hsl(224, 95%, 45%); /* Blue #0640e0 */
+	--page-background: hsl(0, 0%, 100%);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--primary: hsl(224, 100%, 67%);
+	    --page-background: hsl(0, 0%, 9%);
+	}
+
+}

ws/static/home.html

@@ -14,6 +14,8 @@
         <link rel="stylesheet" href="/static/reset.css" />
 
         <!-- Preload CSS styles -->
+        <link rel="preload" href="/static/colours.css" as="style" />
+        <link rel="stylesheet" href="/static/colours.css" />
         <link rel="preload" href="/static/styles.css" as="style" />
         <link rel="stylesheet" href="/static/styles.css" />
     </head>

ws/static/login.html

@@ -14,6 +14,8 @@
         <link rel="stylesheet" href="/static/reset.css" />
 
         <!-- Preload CSS styles -->
+        <link rel="preload" href="/static/colours.css" as="style" />
+        <link rel="stylesheet" href="/static/colours.css" />
         <link rel="preload" href="/static/styles.css" as="style" />
         <link rel="stylesheet" href="/static/styles.css" />
     </head>

ws/static/new.html

@@ -14,6 +14,8 @@
         <link rel="stylesheet" href="/static/reset.css" />
 
         <!-- Preload CSS styles -->
+        <link rel="preload" href="/static/colours.css" as="style" />
+        <link rel="stylesheet" href="/static/colours.css" />
         <link rel="preload" href="/static/styles.css" as="style" />
         <link rel="stylesheet" href="/static/styles.css" />
     </head>

ws/static/select-release.html

@@ -14,6 +14,8 @@
         <link rel="stylesheet" href="/static/reset.css" />
 
         <!-- Preload CSS styles -->
+        <link rel="preload" href="/static/colours.css" as="style" />
+        <link rel="stylesheet" href="/static/colours.css" />
         <link rel="preload" href="/static/styles.css" as="style" />
         <link rel="stylesheet" href="/static/styles.css" />
     </head>

ws/static/styles.css

@@ -39,17 +39,17 @@
 html {
     margin: auto auto;
     color: #2f2f2f;
-    background: white;
+    background: var(--page-background);
     font-family: 'Atkinson Hyperlegible', sans-serif;
     scroll-behavior: smooth;
 }
 
 a {
-    color: #0640e0;
+    color: var(--primary);
 }
 
 a:visited {
-    color: #0640e0;
+    color: var(--primary);
 }
 
 .two_column {
@@ -160,17 +160,9 @@ header nav a:last-of-type:visited {
 
 @media (prefers-color-scheme: dark) {
     html {
-        background: #171717;
         color: #ccc;
     }
 
-    a {
-        color: #5582ff;
-    }
-
-    a:visited {
-        color: #5582ff;
-    }
 
     .card {
         border: 2px solid #424242;