From 9ecc5ebca9fdf82d05de09c690ce00d5c486d54d 2017-06-16 23:40:04
From: DarkMorford <DarkMorford@Gmail.com>
Date: 2017-06-16 23:40:04
Subject: [PATCH] Replace hard-coded colors with variables.

---

diff --git a/styles/_fonts.scss b/styles/_fonts.scss
new file mode 100644
index 0000000..811801e
--- /dev/null
+++ b/styles/_fonts.scss
@@ -0,0 +1,5 @@
+@charset "utf-8";
+
+$font-stack: Verdana, Arial, Helvetica, sans-serif;
+$banner-font: monospace;
+$credits-font: Arial, Helvetica, sans-serif;
diff --git a/styles/_palette.scss b/styles/_palette.scss
index 1cc8fb1..c4ae91b 100644
--- a/styles/_palette.scss
+++ b/styles/_palette.scss
@@ -1,9 +1,17 @@
-$background:   #4C565E;
-$foreground:   #757B81;
-$infobox:      #23272B;
+@charset "utf-8";
+
+$background: #4C565E;
+$foreground: #757B81;
+$infobox:    #23272B;
+
+$nl-background:    #000000;
+$comic-background: #FFFFFF;
+
+$percent-border: #556677;
 
 $text-normal:  #B7BFC7;
 $text-accent:  #F6B33D;
+$text-credits: #E4E4D6;
 
 $link-normal:  #FF6600;
 $link-hover:   #EB5252;
diff --git a/styles/archive.scss b/styles/archive.scss
index c1237a7..b562ae4 100644
--- a/styles/archive.scss
+++ b/styles/archive.scss
@@ -1,16 +1,27 @@
+@charset "utf-8";
+@import "palette";
+
 .content ol {
 	padding: 1ex 3em;
-	background-color: #757b81;
-	margin: 0px;
+	background-color: $foreground;
+	margin: 0;
 }
 
 .content ul {
 	list-style-type: none;
 	padding: 1ex 2em;
-	background-color: #757b81;
-	margin: 0px;
+	background-color: $foreground;
+	margin: 0;
+}
+
+.content a {
+	color: $text-accent;
 }
 
-.content a { color: #f6b33d; }
-.content a:visited { color:#ececa3; }
-.content a:hover { color:#eb5252; }
+.content a:visited {
+	color: $link-visited;
+}
+
+.content a:hover {
+	color: $link-hover;
+}
diff --git a/styles/index.scss b/styles/index.scss
index a996e20..37556c9 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -1,8 +1,11 @@
+@charset "utf-8";
+@import "palette";
+
 h2,
 h3 a {
 	margin: 0px;
 	padding: 0px;
-	color: #f6b33d;
+	color: $text-accent;
 }
 
 .content .column { width:330px }
@@ -18,9 +21,9 @@ h3 a {
 #comic .nl {
 	padding-top: 5px;
 	padding-bottom: 5px;
-	background-color: black;
+	background-color: $nl-background;
 	margin: -5em auto 0px;
-	border-top: solid 5em #b7bfc7;
+	border-top: solid 5em $text-normal;
 	width: 700px;
 	text-align: center;
 }
@@ -176,14 +179,14 @@ h3 a {
 }
 
 /* Make the archive link stand out */
-#comic #archivelink { background-color:#b7bfc7 }
-#comic #archivelink a { color:black }
-#comic #archivelink a:hover { color:#eb5252 }
+#comic #archivelink { background-color: $text-normal; }
+#comic #archivelink a { color: $nl-background; }
+#comic #archivelink a:hover { color: $link-hover; }
 
 /* Boxes between the comic and the rants */
 #megagear { text-align:center }
 
-#newsbox a { color:#f6b33d }
+#newsbox a { color: $text-accent; }
 #newsbox ul {
 	margin-left: 3ex;
 	padding-left: 0px;
@@ -203,13 +206,13 @@ h3 a {
 
 #status dd {
 	margin-left: 7em;
-	color: #f6b33d;
+	color: $text-accent;
 }
 
 #status dd div#percentbox {
 	padding: 1px;
 	width: 90%;
-	border: 1px solid #567;
+	border: 1px solid $percent-border;
 	margin: 0px;
 }
 
@@ -218,7 +221,7 @@ h3 a {
 	border-bottom:none;
 	margin:0;
 	padding:0;
-	background: url(../parts/twitter-seperator.png) 6px 0 #23272B;
+	background: url(../parts/twitter-seperator.png) 6px 0 $infobox;
 }
 
 /* Fix a bug caused by OpenAds injecting a <div> into the status area which
@@ -234,7 +237,7 @@ h3 a {
 .content div#status,
 .content div#fred_twitter { border: none; background: none; }
 
-#support { border-bottom: 5px solid black; }
+#support { border-bottom: 5px solid $nl-background; }
 
 #status ul, #fred_twitter ul { margin-top:0px }
 
@@ -287,7 +290,7 @@ h3 a {
 	z-index: 1;
 	border: solid 5px black;
 	width: 400px;
-	background: #4c565e;
+	background: $background;
 	text-align: left;
 }
 
@@ -295,7 +298,7 @@ h3 a {
 	display: inline-block;
 	margin: 0px;
 	padding: 7.5px 4px;
-	color: #B7BFC7;
+	color: $text-normal;
 }
 
 #blogbits a.rightcol img,
@@ -353,7 +356,7 @@ h3 a {
 }
 
 #newsbox .adinfo a, #support .adinfo a {
-	color: #f6b33d;
+	color: $text-accent;
 	font-size: 11px;
 }
 
@@ -368,9 +371,9 @@ h3 a {
 
 #console h3 {
 	padding: 0.75ex;
-	background-color: #757b81;
+	background-color: $foreground;
 
-	font-family: monospace;
+	font-family: $banner-font;
 	font-size: xx-large;
 	text-align: center;
 }
@@ -384,7 +387,7 @@ h3 a {
 
 #feed-list h4 {
 	margin: auto;
-	color: #F6B33D;
+	color: $text-accent;
 	text-align: center;
 	font-size: medium;
 	width: 400px;
@@ -395,14 +398,14 @@ h3 a {
 	padding: 0.75ex 0px;
 	width: 330px;
 
-	background-color: #757b81;
-	color: #F6B33D;
+	background-color: $foreground;
+	color: $text-accent;
 
 	text-align: center;
 	font-size: medium;
 }
 
-#console h4 a {color:#f6b33d}
+#console h4 a {color: $text-accent;}
 
 #console .rantbody {
 	margin-top: 0px;
@@ -418,12 +421,12 @@ h3 a {
 
 #console .leftcol {
 	width: 350px;
-	color: #b7bfc7;
+	color: $text-normal;
 }
 
 #console .rightcol {
 	width: 350px;
-	color: #f6b33D;
+	color: $text-accent;
 }
 
 #console .rantimage {
@@ -466,7 +469,7 @@ h3 a {
 }
 
 #console .nameplate {
-	background-color: #757B81;
+	background-color: $foreground;
 	width: 350px
 }
 
@@ -483,7 +486,7 @@ h3 a {
 
 #console .oldrant {
 	margin-top: 1.5em;
-	border-top: medium solid #B7BFC7;
+	border-top: medium solid $text-normal;
 	padding-top: 1em;
 	width: 345px;
 }
@@ -513,7 +516,7 @@ h3 a {
 	height: 123px;
 }
 
-										#console .oldrant .rantimage p,
+#console .oldrant .rantimage p,
 #console .oldrant .rantimage p img {
 	float: none;
 	width: 150px;
@@ -525,7 +528,7 @@ h3 a {
 
 #console .oldrant .nameplate {
 	margin-top: 43px;
-	background-color: #757B81;
+	background-color: $foreground;
 	width: 150px;
 	float: right;
 }
@@ -554,7 +557,7 @@ h3 a {
 
 div#strip {
 	width:700px;
-	background-color: white;
+	background-color: $comic-background;
 }
 
 #strip-tl {
diff --git a/styles/main.scss b/styles/main.scss
index 48f5fd5..ae9c212 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -1,13 +1,16 @@
+@charset "utf-8";
+@import "palette";
+
 /* Set basic element styles */
-img { border:none }
+img { border: none; }
 
 a {
 	text-decoration: none;
-	color: #f60;
+	color: $link-normal;
 }
 
-a:visited { color:#ececa3; }
-a:hover { color:#eb5252; }
+a:visited { color: $link-visited; }
+a:hover { color: $link-hover; }
 
 body {
 	position: relative; /* Make IE not hate positioned elements */
@@ -15,10 +18,10 @@ body {
 	margin: auto;
 	padding: 14px;
 
-	background-color: #4c565e;
+	background-color: $background;
 
 	font-size: 0.8em;
-	font-family: Verdana, Arial, Helvetica, sans-serif;
+	font-family: $font-stack;
 }
 
 /* Set default widths for page boxes */
@@ -27,21 +30,21 @@ body div {
 	margin: auto;
 	width: 700px;
 }
-body div div { width:auto }
+body div div { width: auto; }
 
 /* Make the headers look nice */
-h1 { margin:0px }
+h1 { margin: 0; }
 
 h2 {
 	text-align: left;
-	color: #f6b33d;
+	color: $text-accent;
 }
 
 /* Create special elements and classes */
 h2, .blackbar {
 	height: 18px; /* Take that, old gecko! */
-	margin: 0px;
-	padding: 0px 1ex;
+	margin: 0;
+	padding: 0 1ex;
 
 	overflow: hidden;
 	background-color: black;
@@ -58,16 +61,16 @@ h2 span, .blackbar span {
 	height: 100%;
 }
 
-.clearer { clear:both }
-br.clearer { line-height:0px }
-.leftcol { float:left }
-.rightcol { float:right }
+.clearer { clear: both; }
+br.clearer { line-height: 0; }
+.leftcol { float: left }
+.rightcol { float: right }
 
 .nl {
-	margin: 0px;
-	padding: 0px;
+	margin: 0;
+	padding: 0;
 
-	background-color: black;
+	background-color: $nl-background;
 	text-align: center;
 
 	list-style-type: none;
@@ -77,18 +80,18 @@ br.clearer { line-height:0px }
 	display: inline;
 	margin: 0px;
 	padding: 0em 0.5ex;
-	color: #B7BFC7;
+	color: $text-normal;
 }
 
-.nl a { color:#b7bfc7; text-decoration:none }
-.nl a:link, .nl a:visited { color:#b7bfc7 }
-.nl a:hover { color:#eb5252 }
+.nl a { color: $text-normal; text-decoration: none; }
+.nl a:link, .nl a:visited { color: $text-normal; }
+.nl a:hover { color: $link-hover; }
 
 .content {
 	margin-top: 1em;
 	margin-bottom: 1em;
-	background-color: black;
-	color: #b7bfc7;
+	background-color: $nl-background;
+	color: $text-normal;
 }
 
 .content div {
@@ -96,8 +99,8 @@ br.clearer { line-height:0px }
 	overflow: hidden;
 	height: 100%;
 
-	border: solid 5px black;
-	background-color: #23272b;
+	border: solid 5px $nl-background;
+	background-color: $infobox;
 	padding: 5px;
 }
 
@@ -141,19 +144,19 @@ br.clearer { line-height:0px }
 	width: 468px;
 	margin-left: -246px;
 
-	background-image:url(parts/banner_bg.gif);
+	background-image: url(../parts/banner_bg.gif);
 	padding: 14px 12px;
 }
 
 /* Style the top banner */
 #banner {
-	background-color: black;
+	background-color: $nl-background;
 	text-align: center;
 }
 
 #banner h2 {
-	color: #b7bfc7;
-	font-family: monospace;
+	color: $text-normal;
+	font-family: $banner-font;
 }
 
 #banner .nl {
@@ -163,8 +166,8 @@ br.clearer { line-height:0px }
 
 /* Style the footer */
 #credits {
-	background-color: #757b81;
-	color: #e4e4d6;
+	background-color: $foreground;
+	color: $text-credits;
 	padding-bottom: 0.5ex;
 	margin-top: 1em;
 }
@@ -173,10 +176,10 @@ br.clearer { line-height:0px }
 	margin: 0px;
 	text-align: center;
 	padding: 0.5ex;
-	font-family: Arial, helvetica, sans-serif;
+	font-family: $credits-font;
 	font-size: x-small;
 }
 
 /* Overload header texts */
 #banner .blackbar span { background: url(../parts/mt3-bar-comic.gif) no-repeat }
-#credits h2 span { background: url(../parts/mt-blk_bar-credits.png) no-repeat }
\ No newline at end of file
+#credits h2 span { background: url(../parts/mt-blk_bar-credits.png) no-repeat }
diff --git a/styles/search.scss b/styles/search.scss
index fc3206a..07d1263 100644
--- a/styles/search.scss
+++ b/styles/search.scss
@@ -1,3 +1,6 @@
+@charset "utf-8";
+@import "palette";
+
 .search {
 	margin: 10px;
 }
@@ -7,20 +10,20 @@
 }
 
 .results {
-	margin: 0px;
+	margin: 0;
 	padding: 1ex 2em;
-	background-color: #757b81;
+	background-color: $foreground;
 }
 
-.results, .results a { color: #f6b33d; }
-.results a:visited { color:#ececa3; }
-.results a:hover { color:#eb5252; }
+.results, .results a { color: $text-accent; }
+.results a:visited { color: $link-visited; }
+.results a:hover { color: $link-hover; }
 
-#syntax code { color:#f6b33d }
-#syntax form { margin:0px }
+#syntax code { color: $text-accent; }
+#syntax form { margin: 0; }
 
 dt {
-	font-size:larger;
+	font-size: larger;
 }
 
 ol {
@@ -28,4 +31,4 @@ ol {
 }
 
 /* Overload header texts */
-#syntax h2 span { background:url(parts/mt-blk_bar-search_syntax.png) no-repeat }
+#syntax h2 span { background:url(../parts/mt-blk_bar-search_syntax.png) no-repeat }
diff --git a/styles/static.scss b/styles/static.scss
index 70e2e71..8ca7ba0 100644
--- a/styles/static.scss
+++ b/styles/static.scss
@@ -1 +1,6 @@
-h3, h4, h5, h6 { color:#f6b33d }
+@charset "utf-8";
+@import "palette";
+
+h3, h4, h5, h6 {
+	color: $text-accent;
+}
diff --git a/styles/support.scss b/styles/support.scss
index 0784fc4..c98bada 100644
--- a/styles/support.scss
+++ b/styles/support.scss
@@ -1,19 +1,22 @@
+@charset "utf-8";
+@import "palette";
+
 #inner {
-	/* Satisfy internal floated elements */
+	// Satisfy internal floated elements
 	overflow: hidden;
-	height: 100%;
-	border: none;
-	margin: 0em 1em;
+	height:   100%;
+	border:   none;
+	margin:   0 1em;
 }
 
 #inner img
 {
-    display: block;
-    margin-left: auto;
-    margin-right: auto
+    display:      block;
+    margin-left:  auto;
+    margin-right: auto;
 }
 
 #inner h3
 {
-	color:#F6B33D;
-}
\ No newline at end of file
+	color: $text-accent;
+}