From 056d6fd2829f1b25f9e9fb7219d6f094da5e01a4 Mon Sep 17 00:00:00 2001
From: bluesaxman <bluesaxman@murkfall.net>
Date: Mon, 18 Aug 2025 15:20:51 -0600
Subject: [PATCH] pulled colors into css variables for easy theming

---
 README.md |  4 ++--
 main.css  | 41 +++++++++++++++++++++++++++++++++++------
 2 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 4536615..c1e465e 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@ A free open source Picture Exchange Communication System or PECS
 
 ### Initial goals
 
-[ ] Basic web app UI
+[X] Basic web app UI
 [ ] Add/Remove custom PEC's
-[ ] Multipul PEC boards
+[X] Multipul PEC boards
 [ ] Convert to android app
diff --git a/main.css b/main.css
index fa9c3a4..bd31097 100644
--- a/main.css
+++ b/main.css
@@ -1,3 +1,13 @@
+:root {
+	--foreground-high:	rgba(10,10,10,1);
+	--foreground-low:	rgba(40,40,40,1);
+	--background-high:	rgba(200,200,200,0.5);
+	--background-low:	rgba(250,250,250,0.5);
+	--middle-accent:	rgba(128,128,128,0.1);
+	--middle-shade:		rgba(128,128,128,0.5);
+	--shadows-color:	rgba(138,138,138,1);
+}
+
 body {
 	margin:0;
 }
@@ -13,8 +23,9 @@ body {
 }
 
 #navigation {
-	height: 50px;
-	box-shadow: inset 0 -2px 3px 0 #888;
+	padding-top:25px;
+	height: 25px;
+	box-shadow: inset 0 -2px 3px 0 var(--shadows-color);
 }
 
 #view {
@@ -27,8 +38,25 @@ body {
 	padding: 5%;
 }
 
+.board_tab {
+	display: inline-block;
+	height: 24px;
+	width: 100px;
+	border: solid 1px var(--foreground-low);
+	color: var(--foreground-high);
+	border-bottom: unset;
+	border-radius: 15px 15px 0 0;
+	background: var(--background-low);
+	text-align: center;
+}
+
+.active_board {
+	color: var(--foreground-low);
+	background: var(--background-high);
+}
+
 .libSlot, .pecSlot {
-	border: solid 3px #666;
+	border: solid 3px var(--foreground-low);
 	border-radius: 6px;
 	user-select: none;
 	position: relative;
@@ -41,7 +69,7 @@ body {
 }
 
 .empty {
-	color: #666;
+	color: var(--forground-low);
 	font-size: 100%;
 	text-align: center;
 }
@@ -59,7 +87,7 @@ body {
 
 .title_bar {
 	height: 50px;
-	box-shadow: inset 0 -2px 3px 0 #888;
+	box-shadow: inset 0 -2px 3px 0 var(--shadows-color);
 	display: flex;
 	justify-content: stretch;
 	font-size: 32pt;
@@ -114,5 +142,6 @@ body {
 	bottom: 0;
 	left: 0;
 	text-align: center;
-	background: rgba(255,255,255,0.3);
+	color:	var(--foreground-high);
+	background: var(--background-high);
 }