From 74ddce603a5729cff1d5f33f398a61493336bb42 Mon Sep 17 00:00:00 2001
From: Lewis Dale <lewis.dale@fortacode.co.uk>
Date: Tue, 26 Sep 2023 20:53:42 +0100
Subject: [PATCH] center the colour picker

---
 src/css/exceptions/color-scheme-picker.css | 61 ++++++++++++++--------
 src/css/globals.css                        |  4 ++
 2 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/src/css/exceptions/color-scheme-picker.css b/src/css/exceptions/color-scheme-picker.css
index 37e06ed..b07fab1 100644
--- a/src/css/exceptions/color-scheme-picker.css
+++ b/src/css/exceptions/color-scheme-picker.css
@@ -1,7 +1,15 @@
+header > * {
+	flex-grow: 1;
+}
+
 .color-scheme {
 	border: 0;
+	padding: 0;
 	display: flex;
 	gap: var(--space-size-xs);
+	flex-grow: 1;
+	justify-content: center;
+	justify-self: flex-end;
 
 	legend {
 		position:absolute;
@@ -13,30 +21,41 @@
 		clip:rect(0 0 0 0);
 	}
 
-	label:has(:not(:checked)) {
-		color: var(--color-subtle);
-	}
+	label {
+		cursor: pointer;
 
-	label:has(:focus-visible) {
-		outline: 1px solid var(--color-primary);
-		outline-offset: 2px;
-	}
+		&:has(:not(:checked)) {
+			color: var(--color-disabled);
+		}
 
-	label:has([name="color-scheme"])::before {
-		font-family: "font awesome 6 free";
-        font-style: normal;
-        font-variant: normal;
-        text-rendering: auto;
-        font-weight: 900;
-        -webkit-font-smoothing: antialiased;
-        font-size: var(--text-size-s);
-	}
+		&:has(:focus-visible) {
+			outline: 1px solid var(--color-primary);
+			outline-offset: 2px;
+		}
 
-	label:has([name="color-scheme"][value="dark"])::before {
-		content: "\f186";
-	}
+		&:has([name="color-scheme"]) {
 
-	label:has([name="color-scheme"][value="light"])::before {
-		content: "\f185";
+			&::before {
+				font-family: "font awesome 6 free";
+				font-style: normal;
+				font-variant: normal;
+				text-rendering: auto;
+				font-weight: 900;
+				-webkit-font-smoothing: antialiased;
+				font-size: var(--text-size-s);
+			}
+
+			&:has([value="dark"]) {
+				&::before {
+					content: "\f186";
+				}
+			}
+
+			&:has([value="light"]) {
+				&::before {
+					content: "\f185";
+				}
+			}
+		}	
 	}
 }
\ No newline at end of file
diff --git a/src/css/globals.css b/src/css/globals.css
index 6046989..f6374d1 100644
--- a/src/css/globals.css
+++ b/src/css/globals.css
@@ -3,6 +3,7 @@
     --color-secondary: var(--color-neutral-800);
     --color-decoration: var(--color-amber-200);
     --color-subtle: var(--color-zinc-400);
+    --color-disabled: var(--color-zinc-600);
 }
 
 @media (prefers-color-scheme: light) {
@@ -11,6 +12,7 @@
         --color-primary: var(--color-neutral-800);
         --color-decoration: var(--color-amber-800);
         --color-subtle: var(--color-zinc-500);
+        --color-disabled: var(--color-zinc-400);
     }
 }
 
@@ -19,6 +21,7 @@ body[data-color-scheme="light"] {
     --color-primary: var(--color-neutral-800);
     --color-decoration: var(--color-amber-800);
     --color-subtle: var(--color-zinc-500);
+    --color-disabled: var(--color-zinc-400);
 }
 
 body[data-color-scheme="dark"] {
@@ -26,6 +29,7 @@ body[data-color-scheme="dark"] {
     --color-secondary: var(--color-neutral-800);
     --color-decoration: var(--color-amber-200);
     --color-subtle: var(--color-zinc-400);
+    --color-disabled: var(--color-zinc-600);
 }
 
 body {