Switch to variables for theme based properties

css/comics.css

@@ -1,36 +1,43 @@
+:root {
+   --default-font: 'Comic Sans MS';
+   --background-color: #121211;
+   --foreground-color: #ddddd1;
+   --text-color: #22dd22;
+   --read-color: green;
+}
 
 body {
-   background-color: #121211;
+   background-color: var(--background-color);
-   color: #ddddd1;
+   color: var(--foreground-color);
-   font-family: 'Comic Sans MS';
+   font-family: var(--default-font);
    font-weight: bold;
    font-size: 15pt;
 }
 
 a, a:link, a:visited, a:active {
    text-decoration: none;
-   color: #22dd22;
+   color: var(--text-color);
 }
 
 #sortorder {
    cursor: pointer;
-   color: #22dd22;
+   color: var(--text-color);
 }
 
 .link {
    cursor: pointer;
-   color: #22dd22;
+   color: var(--text-color);
 }
 
 .header {
    height: 1em;
    font-size: 24pt;
    font-weight: bold;
-   font-family: 'Comic Sans MS';
+   font-family: var(--default-font);
    text-align: center;
    margin-left: 20px;
    margin-right: 20px;
-   border-bottom: 2px solid #ddddd1;
+   border-bottom: 2px solid var(--default-color);
 }
 .sorter {
    float: left;
@@ -58,20 +65,14 @@ a, a:link, a:visited, a:active {
    width: 330px;
    height: 495px;
    margin: 5px;
-   border: 2px solid #ddddd1;
+   border: 2px solid var(--default-color);
    padding: 2px;
    display: inline-block;
    overflow: hidden;
 }
 
 .readborder {
-   border-color: green !important;
+   border-color: var(--read-color) !important;
-}
-
-.debug {
-   position: absolute;
-   top: 0px;
-   left: 0px;
-   z-index: 42;
 }
 
+/* vim:sw=3 ts=3 et: