From 36a9da061cc0bb85048a4cbf4350bcb882382af3 Mon Sep 17 00:00:00 2001
From: John Haugabook <johnhaugabook@gmail.com>
Date: Fri, 17 Apr 2026 00:54:33 -0400
Subject: [PATCH] css variables for colors to keep DRY

css variables for colors to keep DRY
---
 style.css | 85 ++++++++++++++++++++++++++++++++-----------------------
 1 file changed, 50 insertions(+), 35 deletions(-)

diff --git a/style.css b/style.css
index 5e815292..25035bba 100644
--- a/style.css
+++ b/style.css
@@ -1,6 +1,21 @@
+/* CSS variables --------------------------------------------------------- */
+
+:root
+{
+  --black: black;
+  --white: white;
+  --big-title: #990033;
+  --nav-background: #80a0a0;
+  --heading: #99003f;
+  --code: #80a0a020;
+  --cartouche: #e8e8e8;
+  --table: #f2f2f2;
+  --table-hover: #fdd9b5;
+}
+
 body
 {
-color: black;
+color: var(--black);
 }
 
 a:link {
@@ -20,8 +35,8 @@ text-decoration: underline;
 position: absolute;
 left: 0.5em;
 max-width: 11em;
-background-color: #80a0a0;
-color: white;
+background-color: var(--nav-background);
+color: var(--white);
 text-align: left;
 }
 
@@ -55,7 +70,7 @@ padding-right: 0.5em;
 overflow: hidden;
 font-size: small;
 font-weight: 500;
-color: white;
+color: var(--white);
 text-decoration: none;
 font-family: sans-serif;
 }
@@ -99,7 +114,7 @@ margin-right: 0;
 #rightwhat
 {
 margin-left: 50%;
-border-left: 2px solid #e8e8e8;
+border-left: 2px solid var(--cartouche);
 padding: 0.1px; /* rounds down to 0, but prevents margin collapse */
 padding-left: 1.5em;
 }
@@ -115,7 +130,7 @@ font-size: .9em;
 #endwrap
 {
     clear: both;
-    border-top: 2px solid #e8e8e8;
+    border-top: 2px solid var(--cartouche);
 }
 
 /* main ------------------------------------------------------------------ */
@@ -132,26 +147,26 @@ min-width: 45em;
 {
 font-size: 2em;
 font-weight: bold;
-color: #99003f;
+color: var(--heading);
 }
 
 #main h2
 {
 font-size: 1.3em;
-color: #99003f;
+color: var(--heading);
 }
 
 #main h3
 {
 font-size: 1.1em;
-color: #99003f;
+color: var(--heading);
 margin-bottom: 0ex;
 }
 
 #main h4
 {
 font-size: 1em;
-color: #99003f;
+color: var(--heading);
 }
 
 #main .catchphrase
@@ -189,7 +204,7 @@ overflow: visible;
 {
 font-family: sans-serif;
 font-size: 5em;
-color: #990033;
+color: var(--big-title);
 margin-top: 0em;
 margin-bottom: 0em;
 margin-left: 6px;
@@ -210,7 +225,7 @@ margin-bottom: 0.2em;
 {
 position: relative;
 font-size: 0.7em;
-border-top: 2px solid #e8e8e8;
+border-top: 2px solid var(--cartouche);
 text-align: center;
 }
 
@@ -218,7 +233,7 @@ text-align: center;
 
 .cartouche
 {
-background: #e8e8e8;
+background: var(--cartouche);
 border-radius: 8px;
 padding: 4px;
 }
@@ -230,7 +245,7 @@ table#mirroradmin
   width:90%;
   margin-left:5%;
   margin-right:5%;
-  border:2px solid black;
+  border:2px solid var(--black);
 }
 
 table.deben
@@ -238,7 +253,7 @@ table.deben
   width:85%;
   margin-left: 7.5%;
   margin-right: 7.5%;
-  border:1px solid black;
+  border:1px solid var(--black);
   border-collapse: collapse;
 }
 
@@ -250,16 +265,16 @@ table.deben th
 }
 
 table.deben th {
-    color: #99003f;
-    border-color: black;
+    color: var(--heading);
+    border-color: var(--black);
 }
 
 table.deben tr:nth-child(odd) {
-    background-color: #f2f2f2;
+    background-color: var(--table);
 }
 
 table.deben tr:hover {
-    background-color: #fdd9b5;
+    background-color: var(--table-hover);
 }
 
 div#main .indent
@@ -356,7 +371,7 @@ table.pkglist {
 }
 
 .pkglist tr:hover {
-  background-color: #e8e8e8;
+  background-color: var(--cartouche);
 }
 
 .pkglist a {
@@ -371,20 +386,20 @@ table.pkglist {
 
 .detail
 {
-  color: #99003f;
+  color: var(--heading);
 }
 
 table.pkgtable
 {
   border-collapse: collapse;
-  border:1px solid black;
+  border:1px solid var(--black);
 }
 
 table.pkgtable th
 {
-  background-color: #80a0a0;
-  color: white;
-  border-color: black;
+  background-color: var(--nav-background);
+  color: var(--white);
+  border-color: var(--black);
   border-width: 1px;
   border-style: solid;
 }
@@ -396,11 +411,11 @@ table.pkgtable td
 }
 
 table.pkgtable tr:nth-child(even) {
-    background-color: #f2f2f2;
+    background-color: var(--table);
 }
 
 table.pkgtable tr:hover {
-    background-color: #fdd9b5;
+    background-color: var(--table-hover);
 }
 
 table.pkgdetails p {
@@ -424,7 +439,7 @@ table.pkgdetails tr td:first-child {
     -webkit-column-width: 15em;
     column-width: 15em;
     column-rule-style: double;
-    column-rule-color: #99003f;
+    column-rule-color: var(--heading);
     width: 90%;
     margin: auto;
 }
@@ -475,21 +490,21 @@ table.grid {
     width: 95%;
     margin-left:auto;
     margin-right:auto;
-    border: 1px solid black;
+    border: 1px solid var(--black);
     border-collapse: collapse;
 }
 
 table.grid th {
     text-align: left;
-    border: 1px solid black;
+    border: 1px solid var(--black);
     border-collapse: collapse;
-    background-color: black;
-    color: white;
+    background-color: var(--black);
+    color: var(--white);
     padding: 0.3em;
 }
 
 table.grid tr:nth-child(even) {
-    background-color: #f2f2f2;
+    background-color: var(--table);
 }
 
 table.grid tr.highlight {
@@ -497,13 +512,13 @@ table.grid tr.highlight {
 }
 
 table.grid td {
-    border: 1px solid black;
+    border: 1px solid var(--black);
     border-collapse: collapse;
     padding: 0.3em;
 }
 
 table.grid tr:hover {
-    background-color: #fdd9b5;
+    background-color: var(--table-hover);
 }
 
 table.grid td.succeeded, table.grid td.deployed {
-- 
2.46.0.windows.1