From 572ad88469d314b6ac116077160e7ab749e3dd74 Mon Sep 17 00:00:00 2001
From: Lee Cattarin <lee.cattarin@gmail.com>
Date: Fri, 21 Nov 2025 17:18:23 -0800
Subject: [PATCH] introduce alt colros

---
 css/artist.css |  4 ++--
 css/main.css   | 14 +++++++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/css/artist.css b/css/artist.css
index 4f50415..ad3977d 100644
--- a/css/artist.css
+++ b/css/artist.css
@@ -24,7 +24,7 @@
   .artist {
     margin: 1rem 0 3rem;
   }
-  
+
   .artist:nth-child(n) {
     grid-template:
       'imgs'
@@ -60,7 +60,7 @@
 
 .description {
   grid-area: desc;
-  background-color: light-dark(var(--color-dark), var(--color-light));
+  background-color: light-dark(var(--color-light-alt), var(--color-dark-alt));
   border-radius: 0 0 1rem 1rem;
 }
 
diff --git a/css/main.css b/css/main.css
index c955568..cfee478 100644
--- a/css/main.css
+++ b/css/main.css
@@ -2,7 +2,9 @@
   color-scheme: light dark;
 
   --color-light: #d5e9ff;
+  --color-light-alt: #d5e9ff;
   --color-dark: #001a33;
+  --color-dark-alt: #00274b;
   --color-orange-light: #ff764f;
   --color-orange-dark: #f55e33;
 }
@@ -51,8 +53,8 @@ main {
 }
 
 #wip {
-  background-color: light-dark(var(--color-dark), var(--color-light));
-  color: light-dark(var(--color-light), var(--color-dark));
+  background-color: light-dark(var(--color-light-alt), var(--color-dark-alt));
+  color: light-dark(var(--color-dark), var(--color-light));
   margin: 1rem 0 1rem;
   text-align: center;
   padding: 1rem .5rem;
@@ -103,7 +105,7 @@ h3 {
 }
 
 a {
-  color: light-dark(var(--color-light), var(--color-dark));
+  color: light-dark(var(--color-dark), var(--color-light));
   font-weight: bold;
   text-decoration: underline;
   text-decoration-style: solid;
@@ -126,8 +128,8 @@ a:focus {
 }
 
 p {
-  background-color: light-dark(var(--color-dark), var(--color-light));
-  color: light-dark(var(--color-light), var(--color-dark));
+  background-color: light-dark(var(--color-light-alt), var(--color-dark-alt));
+  color: light-dark(var(--color-dark), var(--color-light));
   padding: .5rem;
   border-radius: 0 0 1rem 1rem;
 }
@@ -149,6 +151,8 @@ footer {
 }
 
 footer p {
+  background-color: light-dark(var(--color-dark), var(--color-light));
+  color: light-dark(var(--color-light), var(--color-dark));
   text-align: center;
   margin: 1rem 0 0;
 }