Finish moving colours to custom properties and hsl() syntax

Adrian Simmons created 1 year ago

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

Change summary

ws/static/colours.css | 13 ++++++++++++-
ws/static/styles.css  | 41 +++++++++++++++--------------------------
2 files changed, 27 insertions(+), 27 deletions(-)

Detailed changes

ws/static/colours.css

@@ -1,13 +1,24 @@
 
 :root {
 	--primary: hsl(224, 95%, 45%); /* Blue #0640e0 */
+	--link: var(--primary);
+	--text: hsl(0, 0%, 18%);
 	--page-background: hsl(0, 0%, 100%);
+	--card-border: hsl(0, 0%, 18%);
+	--card-background: hsl(0, 0%, 97%);
+	--action: hsl(100, 95%, 25%);
+	--warning: hsl(20, 100%, 41%);
 }
 
 @media (prefers-color-scheme: dark) {
 	:root {
 		--primary: hsl(224, 100%, 67%);
+		--text: hsl(0, 0%, 80%);
 	    --page-background: hsl(0, 0%, 9%);
+	    --card-border: hsl(0, 0%, 26%);
+	    --card-background: hsl(0, 0%, 11%);
+	    --action: hsl(100, 95%, 45%);
+	    --warning: hsl(20, 100%, 51%);
 	}
 
-}
+}

ws/static/styles.css

@@ -38,18 +38,18 @@
 
 html {
     margin: auto auto;
-    color: #2f2f2f;
+    color: var(--text);
     background: var(--page-background);
     font-family: 'Atkinson Hyperlegible', sans-serif;
     scroll-behavior: smooth;
 }
 
 a {
-    color: var(--primary);
+    color: var(--link);
 }
 
 a:visited {
-    color: var(--primary);
+    color: var(--link);
 }
 
 .two_column {
@@ -78,8 +78,8 @@ a:visited {
 }
 
 .card {
-    border: 2px solid #2f2f2f;
-    background: #f8f8f8;
+    border: 2px solid var(--card-border);
+    background: var(--card-background);
     border-radius: 5px;
     margin: 20px;
     padding: 20px 20px 0 20px;
@@ -102,7 +102,12 @@ a:visited {
 .delete { font-size: 12px; }
 .close > a {
     text-decoration: none;
-    color: #2f2f2f;
+    color: var(--card-border);
+}
+@media (prefers-color-scheme: dark) {
+    .close > a {
+        color: var(--text);
+    }
 }
 
 .card > pre, .card > div > pre { overflow: scroll; }
@@ -140,8 +145,8 @@ header nav a:visited {
     text-decoration: none;
     font-size: 1.2rem;
     line-height: 1;
-    color: hsl(100, 95%, 30%);
-    border: 1px solid hsl(100, 95%, 30%);
+    color: var(--action);
+    border: 1px solid var(--action);
     background-color: transparent;
     border-radius: 0.5rem;
     padding: 0.6rem 0.5rem 0.4rem;
@@ -153,27 +158,11 @@ header nav a + a {
 
 header nav a:last-of-type,
 header nav a:last-of-type:visited {
-    color: hsl(350, 100%, 65%);
-    border-color: hsl(350, 100%, 65%);
+    color: var(--warning);
+    border-color: var(--warning);
     background-color: transparent;
 }
 
-@media (prefers-color-scheme: dark) {
-    html {
-        color: #ccc;
-    }
-
-
-    .card {
-        border: 2px solid #424242;
-        background: #1c1c1c;
-    }
-
-    .close > a {
-        color: #ccc;
-    }
-}
-
 @media only screen and (max-width: 1000px) {
     div[id] {
         display: block;