From b58491b5096b6fc3a7f224a8d50b39648fc7660c Mon Sep 17 00:00:00 2001
From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com>
Date: Fri, 18 Aug 2023 20:30:49 +0100
Subject: Pulls out colours

---
 public/css/colours.css | 28 ++++++++++++++++++++++++++++
 public/main.css        | 23 ++---------------------
 2 files changed, 30 insertions(+), 21 deletions(-)
 create mode 100644 public/css/colours.css

diff --git a/public/css/colours.css b/public/css/colours.css
new file mode 100644
index 0000000..c045cb3
--- /dev/null
+++ b/public/css/colours.css
@@ -0,0 +1,28 @@
+@import 'palette-hex.css';
+@import 'palette-oklch.css' supports(color: oklch(55% 0.15 290));
+
+:root {
+  --text-color: var(--color-primary-50);
+  --text-highlight-color: var(--color-primary-100);
+  --background-color: var(--color-primary-800);
+  --background-highlight-color: var(--color-primary-700);
+  --special-text-color: var(--color-secondary-200);
+  --special-text-highlight-color: var(--color-secondary-300);
+  --special-background-color: var(--color-secondary-900);
+  --special-background-highlight-color: var(--color-secondary-800);
+}
+
+:is(main, article) {
+  --text-color: var(--color-primary-900);
+  --text-highlight-color: var(--color-primary-800);
+  --background-color: var(--color-primary-50);
+  --background-highlight-color: var(--color-primary-200);
+  --special-text-color: var(--color-secondary-700);
+  --special-text-highlight-color: var(--color-secondary-600);
+  --special-background-color: var(--color-secondary-50);
+  --special-background-highlight-color: var(--color-secondary-100);
+}
+
+:is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)) {
+    --background-color: var(--color-primary-100);
+}
\ No newline at end of file
diff --git a/public/main.css b/public/main.css
index 7e3ae7b..7edf58b 100644
--- a/public/main.css
+++ b/public/main.css
@@ -1,17 +1,7 @@
+@import 'css/colours.css';
 @import 'css/btn.css';
-@import 'css/palette-hex.css';
-@import 'css/palette-oklch.css' supports(color: oklch(55% 0.15 290));
-
-:root {  
-  --text-color: var(--color-primary-50);
-  --text-highlight-color: var(--color-primary-100);
-  --background-color: var(--color-primary-800);
-  --background-highlight-color: var(--color-primary-700);
-  --special-text-color: var(--color-secondary-200);
-  --special-text-highlight-color: var(--color-secondary-300);
-  --special-background-color: var(--color-secondary-900);
-  --special-background-highlight-color: var(--color-secondary-800);
 
+:root {
   --max-width-prose-content: 35rem;
   --max-width-all-content: 56.6rem; /* golden ratio * prose content width */
 
@@ -49,14 +39,6 @@
   container-name: main;
   container-type: inline-size;
 
-  --text-color: var(--color-primary-900);
-  --text-highlight-color: var(--color-primary-800);
-  --background-color: var(--color-primary-50);
-  --background-highlight-color: var(--color-primary-200);
-  --special-text-color: var(--color-secondary-700);
-  --special-text-highlight-color: var(--color-secondary-600);
-  --special-background-color: var(--color-secondary-50);
-  --special-background-highlight-color: var(--color-secondary-100);
   color: var(--text-color);
   background-color: var(--background-color);
 }
@@ -77,7 +59,6 @@
 }
 
 :is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)) {
-  --background-color: var(--color-primary-100);
   background-color: var(--background-color);
 }
 
-- 
cgit v1.2.3