website

commit a80b44a530e650431ed02fd136b19d1f0ee79063
parent b09ce4fee89f951363e92839b12deb4d51040b47
Author: Michael Neuper <73108749+michaelneuper@users.noreply.github.com>
Date:   Sat, 10 Dec 2022 21:30:20 +0200

Extract colors to file

Diffstat:
A
static/css/colors.css
 | 
15
+++++++++++++++
M
static/css/theme-override.css
 | 
64
++++++++++++++++++++++++++++++----------------------------------

2 files changed, 45 insertions(+), 34 deletions(-)
diff --git a/static/css/colors.css b/static/css/colors.css
@@ -0,0 +1,14 @@
+/* colorscheme */
+:root {
+  --dark-bg: #282c34;
+  --dark-secondary-bg: #2f333d;
+  --light-bg: #e8dbc5;
+  --light-secondary-bg: #f9f9f9;
+  --text: #3a3f4b;
+  --dark-blue: #2979ff;
+  --light-blue: #61aeef;
+  --brown: #666;
+  --light-brown: #ddd;
+  --gray: #abb2bf;
+  --cyan: #56b6c2;
+}
+\ No newline at end of file
diff --git a/static/css/theme-override.css b/static/css/theme-override.css
@@ -1,86 +1,87 @@
-/* footer { font-size: 90%; } */
+/* Imports*/
+@import url("colors.css");
 
 /* Dark mode */
 @media (prefers-color-scheme: dark) {
   body {
-    background-color: #282c34;
+    background-color: var(--dark-bg);
   }
 
   blockquote {
-    background: #2f333d;
+    background: var(--dark-secondary-bg);
   }
 
   a {
-    color: #61aeef;
+    color: var(--light-blue);
   }
 
   header {
-    background: #61aeef;
+    background: var(--light-blue);
     border-bottom: 0px;
   }
 
   .article-meta,
   .menu a {
-    background: #2f333d;
+    background: var(--dark-secondary-bg);
     color: white;
   }
 
   table {
     margin: auto;
-    border-top: 1px solid #abb2bf;
-    border-bottom: 1px solid #abb2bf;
+    border-top: 1px solid var(--gray);
+    border-bottom: 1px solid var(--gray);
   }
   table thead th {
-    border-bottom: 1px solid #abb2bf;
+    border-bottom: 1px solid var(--gray);
   }
   th,
   td {
     padding: 5px;
   }
   tr:nth-child(even) {
-    background: #abb2bf;
+    background: var(--gray);
   }
 }
 
 /* Light mode */
 @media (prefers-color-scheme: light) {
   body {
-    background-color: #e8dbc5;
-    color: #3a3f4b;
+    background-color: var(--light-bg);
+    color: var(--text);
   }
 
   blockquote {
-    background: #f9f9f9;
+    background: var(--light-secondary-bg);
   }
 
   a {
-    color: #2979ff;
+    color: var(--dark-blue);
   }
 
   header {
-    background: #2979ff;
+    background: var(--dark-blue);
   }
 
   .article-meta,
   .menu a {
-    background: #e8dbc5;
-    color: #000;
+    background: var(--light-secondary-bg);
+    color: black;
   }
 
   table {
     margin: auto;
-    border-top: 1px solid #666;
-    border-bottom: 1px solid #666;
+    border-top: 1px solid var(--brown);
+    border-bottom: 1px solid var(--brown);
   }
   table thead th {
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid var(--light-brown);
   }
   th,
   td {
     padding: 5px;
   }
   tr:nth-child(even) {
-    background: #eee;
+    background: var(--light-brown);
   }
 }
 
@@ -95,16 +96,9 @@ h1 {
   line-height: 1.5em;
 }
 
-/* Table of Contents, if wanted
-Add to yaml:
-output:
-  blogdown::html_page:
-    toc: true
-    */
-
 #TableOfContents,
 #TOC {
-  border: 1px solid #eee;
+  border: 1px solid var(--light-brown);
   border-radius: 5px;
 }
 
@@ -129,6 +123,8 @@ output:
 .article-meta,
 footer {
   text-align: center;
+  font-size: 90%;
+  opacity: 0.5;
 }
 .title {
   font-size: 1.1em;
@@ -171,18 +167,18 @@ header nav {
 }
 
 header a {
-  color: #fff;
+  color: white;
   line-height: 1.75rem;
   padding: 0 0.5rem;
 }
 header a:hover,
 header .current a {
-  color: #fff;
+  color: white;
 }
 
 /* Code Boxes */
 pre {
-  border: 2px solid #56b6c2;
+  border: 2px solid var(--cyan);
   padding: 1em;
   overflow-x: auto;
 }
@@ -221,14 +217,14 @@ main a {
 }
 
 blockquote {
-  border-left: 5px solid #ccc;
+  border-left: 5px solid var(--light-brown);
   padding: 3px 1em 3px;
 }
 
 .content-wrapper {
   padding: 0px 12px 0px 12px;
 }
-#wizard {
+#partywizard {
   min-width: 40px;
   float: right;
   padding: 10px;