base code

1 files changed, 59 insertions, 11 deletions

diff --git a/static/css/style.css b/static/css/style.css
index defde73..90f0390 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,8 +1,31 @@
+:root {
+    --text: #140100;
+    --background: #fbf4f4;
+    --primary: #781212;
+    --secondary: #eb807a;
+    --accent: #f74e45;
+}
+
+:root[data-theme="light"] {
+    --text: #140100;
+    --background: #fbf4f4;
+    --primary: #781212;
+    --secondary: #eb807a;
+    --accent: #f74e45;
+}
+:root[data-theme="dark"] {
+    --text: #ffeceb;
+    --background: #0b0404;
+    --primary: #ed8787;
+    --secondary: #851a14;
+    --accent: #ba1108;
+}
+
 /* General */
 body {
     margin: 0;
     line-height: 1.5em;
-    color: #333333;
+    color: var(--text);
     font-family: helvetica, arial, sans-serif;
 }
 
@@ -18,16 +41,36 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 a:link, a:visited {
-    color: #0000e0;
-    text-decoration: none
+    color: var(--text);
+    text-decoration: underline;
 }
 
 a:hover, a:active {
-    color: #0000ff;
-    text-decoration: underline
+    color: var(--accent);
+    text-decoration: underline;
 }
 
 
+table {
+    border-collapse: collapse;
+}
+th, td {
+    border: 1px solid #ddd;
+    text-align: center;
+    padding: 8px;
+}
+th {
+    padding-top: 12px;
+    padding-bottom: 12px;
+    text-align: left;
+    background-color: var(--primary);
+    color: white;
+}
+ul {
+    list-style: none outside;
+    padding: 0;
+}
+
 /* Single column layout */
 nav section, header section, main, footer section {
     max-width: 40em;
@@ -39,22 +82,25 @@ nav section, header section, main, footer section {
 
 /* Navigation panel */
 nav {
-    background: #333333;
+    background: var(--primary);
     border-bottom: thin solid #111111;
     line-height: 3em;
 }
 
 nav a {
     margin-right: 1em;
+    font-weight: 2em;
 }
 
 nav a:link, nav a:visited {
-    color: #cccccc;
+    color: white;
+    text-decoration: none;
 }
 
 nav a:hover, nav a:active {
-    color: #ffffff;
+    color: var(--secondary);
     text-decoration: none;
+    font-weight: 2em;
 }
 
 @media screen and (min-width: 600px) {
@@ -66,7 +112,7 @@ nav a:hover, nav a:active {
 
 /* Footer */
 footer {
-    background: #f0f0f0;
+    background: var(--primary);
     border-top: thin solid #e0e0e0;
     margin-top: 2em;
     padding: 1em 0;
@@ -76,10 +122,12 @@ footer {
 
 footer section p {
     font-size: 0.8em;
+    color: white;
 }
 
 footer a {
     margin-right: 1em;
+    color: white;
 }
 
 footer a:last-child {
@@ -96,13 +144,13 @@ article {
 article h2 a:link, article h2 a:visited,
 article h1 a:link, article h1 a:visited,
 .more:link, .more:visited {
-    color: #333333;
+    color: var(--primary);
 }
 
 article h2 a:hover, article h2 a:active,
 article h1 a:hover, article h1 a:active,
 .more:hover, .more:active {
-    color: #777777;
+    color: var(--accent);
 }
 
 p.meta {