From 16b6420734328ba47846c0f829bdfe629210b6fc Mon Sep 17 00:00:00 2001
From: marleyrae <marleyrae@protonmail.com>
Date: Fri, 9 Jun 2023 14:40:20 -0700
Subject: [PATCH] css vars: wordfire

---
 wordfire/index.html    | 64 ++++++++++++++++++++++++++----------------
 wordfire/play1.html    | 21 ++++++++------
 wordfire/play2.html    | 30 ++++++++++++--------
 wordfire/play3.html    | 34 ++++++++++++++--------
 wordfire/play4.html    | 58 ++++++++++++++++++++++----------------
 wordfire/possums.html  | 27 ++++++++++++------
 wordfire/precious.html | 15 +++++++---
 wordfire/sound.html    | 24 ++++++++++------
 8 files changed, 171 insertions(+), 102 deletions(-)

diff --git a/wordfire/index.html b/wordfire/index.html
index ccb815e..b71fd24 100644
--- a/wordfire/index.html
+++ b/wordfire/index.html
@@ -12,14 +12,30 @@
 	<!-- style -->
 	<link rel="stylesheet" href="wordfire.css">
 	<style>
-		a { color: #06c; }
-		a:active { color: #909; }
-		a:visited { color: #06c; }
+		#index {
+			--light-blue: #06c;
+			--purple: #909;
+			--blue: #039;
+			--red: #c00;
+			--dark-blue: #336;
+			--muted-purple: #93c;
+			--bright-purple: #c0f;
+			--bright-dark-blue: #009;
+			--neutral-blue: #ccf;
+			--bright-dark-purple: #609;
+			--cream: #ffc;
+			--pink: #f69;
+			--very-dark-purple: #306;
+		}
 
-		.blue { color: #039 !important; }
+		a { color: var(--light-blue); }
+		a:active { color: var(--purple); }
+		a:visited { color: var(--light-blue); }
+
+		.blue { color: var(--blue) !important; }
 		.center { text-align: center; }
-		.red { color: #c00 !important; }
-		.purple { color: #909 !important; }
+		.red { color: var(--red) !important; }
+		.purple { color: var(--purple) !important; }
 
 		/* fuck table layouts thanks!!! */
 
@@ -28,8 +44,8 @@
 			width: 149px;
 			height: 124px;
 
-			background-color: #336;
-			border: 2px solid #93c;
+			background-color: var(--dark-blue);
+			border: 2px solid var(--muted-purple);
 		}
 
 		#header {
@@ -39,7 +55,7 @@
 			padding: 0;
 
 			background-image: url(img/index_clouds.jpg);
-			border: 2px solid #93c;
+			border: 2px solid var(--muted-purple);
 			border-left: none;
 			text-align: center;
 		}
@@ -50,8 +66,8 @@
 			width: 149px;
 			height: 1361px;
 
-			background-color: #336;
-			border: 2px solid #93c;
+			background-color: var(--dark-blue);
+			border: 2px solid var(--muted-purple);
 			border-top: none;
 		}
 
@@ -61,7 +77,7 @@
 			height: 1353px;
 			padding: 4px;
 
-			border: 2px solid #93c;
+			border: 2px solid var(--muted-purple);
 			border-left: none;
 			border-top: none;
 		}
@@ -71,7 +87,7 @@
 		#header h1 {
 			font-size: 48px;
 			font-weight: 700;
-			color: #c0f;
+			color: var(--bright-purple);
 			font-style: italic;
 			text-decoration: underline;
 			margin: 0;
@@ -98,27 +114,27 @@
 			padding: 3px;
 
 			text-decoration: none;
-			color: #fff;
+			color: white;
 			font-weight: 700;
 		}
 
 		.tall { height: 42px; }
 
 		.nav-current {
-			background-color: #009;
+			background-color: var(--bright-dark-blue);
 		}
 
 		.nav-btn {
-			background-color: #909;
+			background-color: var(--purple);
 		}
 
 		.nav-current:hover, .nav-btn:hover {
-			background-color: #ccf;
+			background-color: var(--neutral-blue);
 			text-decoration: underline;
 		}
 
 		.nav-current:visited, .nav-btn:visited {
-			color: #fff;
+			color: white;
 		}
 
 		/* content style */
@@ -140,20 +156,20 @@
 		/* has no one heard of the border attribute ????????????? */
 
 		#hellbox {
-			border: 2px solid #609;
+			border: 2px solid var(--bright-dark-purple);
 			width: 580px;
 			height: 174px;
 			margin: 0 auto;
-			background-color: #ffc;
+			background-color: var(--cream);
 		}
 
 		#hellbox2 {
-			border: 2px ridge #f69;
+			border: 2px ridge var(--pink);
 			width: 567px;
 			height: 160px;
 			padding: 5px;
 
-			color: #306;
+			color: var(--very-dark-purple);
 			font-size: 24px;
 			font-weight: 900;
 			font-family: 'Times New Roman', Times, serif;
@@ -176,7 +192,7 @@
 		.purple-line {
 			height: 2px;
 			width: 285px;
-			background-color: #93c;
+			background-color: var(--muted-purple);
 			float: left;
 			margin: 5px;
 		}
@@ -187,7 +203,7 @@
 	<!-- archive menu -->
 	<script src="/menu.js" type="module"></script>
 </head>
-<body>
+<body id="index">
 	<div id="top-left"></div>
 
 	<div id="header">
diff --git a/wordfire/play1.html b/wordfire/play1.html
index 0af2362..8438c0d 100644
--- a/wordfire/play1.html
+++ b/wordfire/play1.html
@@ -11,34 +11,39 @@
     <!-- style -->
     <link rel="stylesheet" href="wordfire.css">
     <style>
+        #play1 {
+            --green: #3f3;
+            --purple: #c0f;
+        }
+
         body {
             width: 760px;
             margin: 16px 14px;
             text-align: center;
         }
 
-        a { color: #3f3; }
+        a { color: var(--green); }
 
-        a:active { color: #fff; }
+        a:active { color: white; }
 
-        a:visited { color: #3f3; }
+        a:visited { color: var(--green); }
 
         h1#title {
             font-size: 48px;
             font-weight: 700;
             font-style: italic;
-            color: #c0f;
+            color: var(--purple);
             text-decoration: underline;
             margin: 0;
         }
 
         #nav { margin-top: 0; }
 
-        #nav a { color: #000; }
+        #nav a { color: black; }
 
-        #nav a:active { color: #000; }
+        #nav a:active { color: black; }
 
-        #nav a:visited { color: #000; }
+        #nav a:visited { color: black; }
 
         #nav a.current { text-decoration: none; font-weight: 700; }
 
@@ -57,7 +62,7 @@
     <!-- archive menu -->
     <script src="/menu.js" type="module"></script>
 </head>
-<body>
+<body id="play1">
 <h1 id="title">petz** WORDFIRE'S**petz</h1>
 
 <p id="nav" class="arial">
diff --git a/wordfire/play2.html b/wordfire/play2.html
index 7f3011c..5bc470f 100644
--- a/wordfire/play2.html
+++ b/wordfire/play2.html
@@ -11,7 +11,14 @@
     <!-- style -->
     <link rel="stylesheet" href="wordfire.css">
     <style>
-        /* page grid */
+        #play2 {
+            --purple: #c0f;
+            --red: #c00;
+            --purple-2: #909;
+            --green: #cf9;
+        }
+
+        /* ---- page grid ------------------------------------------------------------------------------------------- */
 
         #page {
             display: grid;
@@ -21,7 +28,7 @@
             row-gap: 5px;
         }
 
-        /* top right image ---------------------------------------------------------------------- */
+        /* ---- top right image ------------------------------------------------------------------------------------- */
 
         #top-right {
             grid-column: c1 / c2;
@@ -30,7 +37,7 @@
             justify-self: center;
         }
 
-        /* header ------------------------------------------------------------------------------- */
+        /* ---- header ---------------------------------------------------------------------------------------------- */
 
         #header {
             grid-column: c3 / c4;
@@ -45,18 +52,18 @@
             font-weight: 700;
             text-decoration: underline;
             font-style: italic;
-            color: #c0f;
+            color: var(--purple);
             padding: 0 0 5px 0; margin: 0;
         }
 
         #header > h2 {
             font-size: 32px;
             font-weight: 700;
-            color: #c00;
+            color: var(--red);
             padding: 0; margin: 0;
         }
 
-        /* nav ---------------------------------------------------------------------------------- */
+        /* ---- nav ------------------------------------------------------------------------------------------------- */
 
         #nav {
             grid-column: c1 / c2;
@@ -70,7 +77,7 @@
             text-align: center;
             padding: 5px;
             display: block;
-            background-color: #909;
+            background-color: var(--purple-2);
             margin-bottom: 2px;
         }
 
@@ -80,15 +87,14 @@
 
         #nav > a:first-child { margin-top: 40px; }
 
-        /* content ------------------------------------------------------------------------------ */
+        /* content -------------------------------------------------------------------------------------------------- */
 
         #content {
             grid-column: c3 / c4;
             grid-row: r2 / r3;
 
-            padding: 4px;
-            padding-right: 6px;
-            background-color: #cf9;
+            padding: 4px 6px 4px 4px;
+            background-color: var(--green);
 
             display: grid;
             gap: 0; grid-gap: 0;
@@ -103,7 +109,7 @@
     <!-- archive menu -->
     <script src="/menu.js" type="module"></script>
 </head>
-<body>
+<body id="play2">
 <div id="page">
 
     <!-- top right image ------------------------------------------------------------------------------------------>
diff --git a/wordfire/play3.html b/wordfire/play3.html
index bc4d291..0da78af 100644
--- a/wordfire/play3.html
+++ b/wordfire/play3.html
@@ -11,13 +11,23 @@
     <!-- style -->
     <link rel="stylesheet" href="wordfire.css">
     <style>
-        body { background-color: #6cf; }
+        #play3 {
+            --blue: #6cf;
+            --light-blue: #9cf;
+            --dark-blue: #09c;
+            --darker-blue: #069;
+            --purple: #639;
 
-        a { color: #09c; }
+            --background: var(--blue);
+        }
 
-        a:active { color: #9cf; }
+        body { background-color: var(--background); }
 
-        a:visited { color: #069; }
+        a { color: var(--dark-blue); }
+
+        a:active { color: var(--light-blue); }
+
+        a:visited { color: var(--darker-blue); }
 
         #page {
             display: grid;
@@ -27,7 +37,7 @@
             grid-template-rows: [r1] 168px [r2] 97px [r3] 903px [c4];
         }
 
-        /* header ------------------------------------------------------------------------------- */
+        /* header --------------------------------------------------------------------------------------------------- */
 
         #header {
             grid-column: c2/c3;
@@ -40,14 +50,14 @@
         h1 { padding: 0; margin: 0 0 5px 0; }
 
         h2 {
-            color: #639;
+            color: var(--purple);
             font-size: 24px;
             font-weight: 700;
             font-style: italic;
             padding: 0; margin: 0;
         }
 
-        /* nav ---------------------------------------------------------------------------------- */
+        /* nav ------------------------------------------------------------------------------------------------------ */
 
         #nav {
             grid-column: c2/c3;
@@ -55,18 +65,18 @@
             align-self: center;
         }
 
-        #nav > a { color: #000; }
+        #nav > a { color: black; }
 
-        #nav > a:active { color: #000; }
+        #nav > a:active { color: black; }
 
-        #nav > a:visited { color: #000; }
+        #nav > a:visited { color: black; }
 
         #nav > #current {
             font-weight: 700;
             text-decoration: none;
         }
 
-        /* content ------------------------------------------------------------------------------ */
+        /* content -------------------------------------------------------------------------------------------------- */
 
         #content {
             grid-column: c2/c3;
@@ -90,7 +100,7 @@
     <!-- archive menu -->
     <script src="/menu.js" type="module"></script>
 </head>
-<body>
+<body id="play3">
 <div id="page">
     <div id="top-left" style="grid-column: c1/c2; grid-row: r1/r4; align-self: start;
 		justify-self: start;">
diff --git a/wordfire/play4.html b/wordfire/play4.html
index 27183bf..b697db1 100644
--- a/wordfire/play4.html
+++ b/wordfire/play4.html
@@ -13,19 +13,29 @@
     <!-- style -->
     <link rel="stylesheet" href="wordfire.css">
     <style>
-        body { background-color: #fff; padding: 0; margin: 2px; }
+        #play4 {
+            --red: #c00;
+            --neutral-blue: #aecfcb;
+            --teal: #066;
+            --dark-neutral-blue: #9cc;
+            --light-pink: #fcc;
 
-        a { color: #000; }
+            --background: white;
+        }
 
-        a:active { color: #000; }
+        body { background-color: var(--background); padding: 0; margin: 2px; }
 
-        a:visited { color: #000; }
+        a { color: black; }
+
+        a:active { color: black; }
+
+        a:visited { color: black; }
 
         #page {
             display: grid;
             gap: 0; grid-gap: 0;
             padding: 0; margin: 0;
-            border-top: 2px solid #c00;
+            border-top: 2px solid var(--red);
             width: 761px;
 
             grid-template-columns: [c1] 151px [space] 2px [c2] 608px [c3];
@@ -38,10 +48,10 @@
             align-self: stretch;
             justify-self: stretch;
             padding-bottom: 149px;
-            border-bottom: 2px solid #c00;
+            border-bottom: 2px solid var(--red);
         }
 
-        /* header ------------------------------------------------------------------------------- */
+        /* header --------------------------------------------------------------------------------------------------- */
 
         #header {
             grid-column: c2/c3;
@@ -50,10 +60,10 @@
             justify-self: stretch;
             text-align: center;
 
-            border-left: 2px solid #c00;
-            border-right: 2px solid #c00;
-            border-top: 2px solid #c00;
-            background-color: #aecfcb;
+            border-left: 2px solid var(--red);
+            border-right: 2px solid var(--red);
+            border-top: 2px solid var(--red);
+            background-color: var(--neutral-blue);
             padding-bottom: 5px;
         }
 
@@ -62,11 +72,11 @@
         #header > h2 {
             font-size: 24px;
             font-weight: 700;
-            color: #066;
+            color: var(--teal);
             padding: 0; margin: 0;
         }
 
-        /* nav ---------------------------------------------------------------------------------- */
+        /* nav ------------------------------------------------------------------------------------------------------ */
 
         #nav {
             grid-column: c1/space;
@@ -74,36 +84,36 @@
             justify-self: center;
             text-align: center;
 
-            border-top: 2px solid #c00;
+            border-top: 2px solid var(--red);
             padding-top: 30px;
         }
 
         #nav > a {
             display: block;
-            background-color: #9cc;
-            color: #000;
+            background-color: var(--dark-neutral-blue);
+            color: black;
             font-weight: 700;
             padding: 5px;
             margin-bottom: 2px;
             text-decoration: none;
         }
 
-        #nav > a#current { background-color: #fff; }
+        #nav > a#current { background-color: white; }
 
         #nav > a:hover, #nav > a#current:hover {
             text-decoration: underline;
-            background-color: #fcc;
+            background-color: var(--light-pink);
         }
 
-        /* content ------------------------------------------------------------------------------ */
+        /* content -------------------------------------------------------------------------------------------------- */
 
         #content {
             grid-column: c2/c3;
             grid-row: r2/r3;
 
-            border-left: 2px solid #c00;
-            border-top: 2px solid #c00;
-            border-right: 2px solid #c00;
+            border-left: 2px solid var(--red);
+            border-top: 2px solid var(--red);
+            border-right: 2px solid var(--red);
 
             display: grid;
             gap: 0; grid-gap: 0;
@@ -118,13 +128,13 @@
             justify-self: center;
         }
 
-        .border-left { border-left: 2px solid #c00; }
+        .border-left { border-left: 2px solid var(--red); }
     </style>
 
     <!-- archive menu -->
     <script src="/menu.js" type="module"></script>
 </head>
-<body>
+<body id="play4">
 <div id="page">
     <div id="top-left"></div>
 
diff --git a/wordfire/possums.html b/wordfire/possums.html
index d448e58..718cce2 100644
--- a/wordfire/possums.html
+++ b/wordfire/possums.html
@@ -11,13 +11,22 @@
     <!-- style -->
     <link rel="stylesheet" href="wordfire.css">
     <style>
-        body { background-color: #900; color: #009; }
+        #possums {
+            --red: #900;
+            --blue: #009;
+            --purple: #60f;
 
-        a { color: #009; }
+            --background: var(--red);
+            --color: var(--blue);
+        }
 
-        a:active { color: #009; }
+        body { background-color: var(--background); color: var(--color); }
 
-        a:visited { color: #009; }
+        a { color: var(--blue); }
+
+        a:active { color: var(--blue); }
+
+        a:visited { color: var(--blue); }
 
         #page {
             display: grid;
@@ -26,7 +35,7 @@
             grid-template-rows: [r1] 156px [r2] 855px [r3];
         }
 
-        /* header ------------------------------------------------------------------------------- */
+        /* header --------------------------------------------------------------------------------------------------- */
 
         #header {
             grid-column: c2/c3;
@@ -39,7 +48,7 @@
         #header > h1 { padding: 0; margin: 0 0 5px 0; }
 
         #header > h2 {
-            color: #60f;
+            color: var(--purple);
             font-weight: 700;
             font-size: 32px;
             font-style: italic;
@@ -47,7 +56,7 @@
             padding: 0; margin: 0;
         }
 
-        /* nav ---------------------------------------------------------------------------------- */
+        /* nav ------------------------------------------------------------------------------------------------------ */
 
         #nav {
             grid-column: c1/c2;
@@ -66,7 +75,7 @@
 
         #nav > a:hover { text-decoration: underline; }
 
-        /* content ------------------------------------------------------------------------------ */
+        /* content -------------------------------------------------------------------------------------------------- */
 
         #content {
             grid-column: c2/c3;
@@ -88,7 +97,7 @@
     <!-- archive menu -->
     <script src="/menu.js" type="module"></script>
 </head>
-<body>
+<body id="possums">
 <div id="page">
     <div id="header">
         <h1>petz**<br>
diff --git a/wordfire/precious.html b/wordfire/precious.html
index 0053ac0..2647e88 100644
--- a/wordfire/precious.html
+++ b/wordfire/precious.html
@@ -11,9 +11,16 @@
     <!-- style -->
     <link rel="stylesheet" href="wordfire.css">
     <style>
-        body { background-color: #ccf; background-image: url(img/preciousmkg_countrybreeze_1.gif); }
+        #precious {
+            --neutral-blue: #ccf;
+            --purple: #63f;
 
-        a, a:active, a:visited { color: #000; }
+            --background: url(img/preciousmkg_countrybreeze_1.gif);
+        }
+
+        body { background-color: var(--neutral-blue); background-image: var(--background); }
+
+        a, a:active, a:visited { color: black; }
 
         #page {
             display: grid;
@@ -39,7 +46,7 @@
         }
 
         h2 {
-            color: #63f;
+            color: var(--purple);
             font-weight: 700;
             font-size: 32px;
             padding: 0; margin: 0;
@@ -49,7 +56,7 @@
     <!-- archive menu -->
     <script src="/menu.js" type="module"></script>
 </head>
-<body>
+<body id="precious">
 <div id="page">
     <!-- header -->
     <div class="js-center" style="grid-column: c2/c4; grid-row: r1/r2;">
diff --git a/wordfire/sound.html b/wordfire/sound.html
index a9bb155..0957ebe 100644
--- a/wordfire/sound.html
+++ b/wordfire/sound.html
@@ -11,12 +11,18 @@
     <!-- style -->
     <link rel="stylesheet" href="wordfire.css">
     <style>
+        #sound {
+            --purple: #609;
+
+            --background: url(img/sound_clouds.jpg);
+        }
+
         body {
-            background-image: url(img/sound_clouds.jpg);
+            background-image: var(--background);
             margin-left: 10px;
         }
 
-        a, a:active, a:hover { color: #000; }
+        a, a:active, a:hover { color: black; }
 
         #page {
             display: grid;
@@ -30,14 +36,14 @@
             grid-template-rows: [r1] 163px [r2] 532px [r3];
         }
 
-        /* top-left ----------------------------------------------------------------------------- */
+        /* ---- top-left -------------------------------------------------------------------------------------------- */
 
         #top-left {
             grid-column: c1/c2;
             grid-row: r1/r2;
         }
 
-        /* header ------------------------------------------------------------------------------- */
+        /* ---- header ---------------------------------------------------------------------------------------------- */
 
         #header {
             grid-column: c2/c3;
@@ -47,14 +53,14 @@
         h1 { padding: 0; margin: 0 0 2px 0; }
 
         h2 {
-            color: #609;
+            color: var(--purple);
             font-weight: 700;
             font-size: 24px;
             padding: 0;
             margin: 0;
         }
 
-        /* nav ---------------------------------------------------------------------------------- */
+        /* ---- nav ------------------------------------------------------------------------------------------------- */
 
         #nav {
             grid-column: c1/c2;
@@ -67,14 +73,14 @@
             display: block;
             padding: 5px;
             margin-bottom: 2px;
-            color: #000;
+            color: black;
             font-weight: 700;
             text-decoration: none;
         }
 
         #nav > a:hover { text-decoration: underline; }
 
-        /* content ------------------------------------------------------------------------------ */
+        /* ---- content --------------------------------------------------------------------------------------------- */
 
         #content {
             grid-column: c2/c3;
@@ -98,7 +104,7 @@
     <!-- archive menu -->
     <script src="/menu.js" type="module"></script>
 </head>
-<body>
+<body id="sound">
 <div id="page">
     <!-- #top-left ---------------------------------------------------------------------------------------------------->
     <div id="top-left">