dark mode

1 files changed, 141 insertions, 118 deletions

diff --git a/themes/conspiracy/assets/css/style.css b/themes/conspiracy/assets/css/style.css
index 01854ec..96dc56b 100644
--- a/themes/conspiracy/assets/css/style.css
+++ b/themes/conspiracy/assets/css/style.css
@@ -1,4 +1,23 @@
 
+html {
+    --c-bg-backdrop:        #0d1015;
+    --c-bg-behind:          #1f232a;
+    --c-bg-front:           #272c35;
+    --c-bg-highlight        #383f4c;
+    --c-bg-figure-backdrop: #b5bcc8;
+    --c-text:               #d0d0d0;
+    --c-text-inverted:      #101010;
+    --c-text-muted:         #a0a0a0;
+    --c-text-highlight:     #ffffff;
+    --c-fg-highlight:       #e0e0e0;
+    --c-fg-primary:         #fc00b9;
+    --c-bg-primary:         #fc0daf;
+    --c-fg-secondary:       #ff9449;
+    --c-bg-secondary:       #ff9449;
+
+    --shadow-opacity: 0.8;
+}
+
 @font-face {
     font-family: "Manuskript Gothisch";
     src: url("{{ (resources.Get "fonts/manuskript_gothisch/Manuskript Gothisch UNZ1A.ttf").RelPermalink }}");
@@ -39,8 +58,13 @@ body {
     align-items: stretch;
     font-family: "Roboto Slab";
     font-weight: 350;
-    color: #d0d0d0;
-    background-color: #0d1015;
+    color: var(--c-text);
+    background-color: var(--c-bg-backdrop);
+}
+
+::selection {
+    background-color: var(--c-bg-secondary);
+    color: var(--c-text-inverted);
 }
 
 strong {
@@ -48,63 +72,24 @@ strong {
     font-style: italic;
 }
 
-a:hover, a:visited, a:active, a:link {
-    color: #ff9449;
-    text-decoration: none;
-}
-
-a:hover {
-    background: #fc0daf;
-    color: #d0d0d0;
-}
-
 nav {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     overflow-x: scroll;
-    background-color: #272c35;
-    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.8);
+    background-color: var(--c-bg-front);
+    box-shadow: 0 0 3px 2px rgba(0, 0, 0, var(--shadow-opacity));
     padding: 0 10px 0 10px;
 }
-html, body {
-    border: 0;
-    margin: 0;
-    padding: 0;
-}
-
-body {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    font-family: "Roboto Slab";
-    font-weight: 350;
-    color: #d0d0d0;
-    background-color: #0d1015;
-}
-
-strong {
-    font-family: "Bodoni Moda";
-    font-style: italic;
-}
 
 a:hover, a:visited, a:active, a:link {
-    color: #ff9449;
+    color: var(--c-fg-secondary);
     text-decoration: none;
 }
 
 a:hover {
-    background: #fc0daf;
-    color: #d0d0d0;
-}
-
-nav {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    background-color: #272c35;
-    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.8);
-    padding: 0 10px 0 10px;
+    background: var(--c-bg-primary);
+    color: var(--c-text);
 }
 
 nav > a:link, nav > a:active, nav > a:visited, nav > a:hover {
@@ -114,7 +99,7 @@ nav > a:link, nav > a:active, nav > a:visited, nav > a:hover {
 }
 
 nav > a:hover {
-    background: #fc0daf;
+    background: var(--c-bg-primary);
 }
 
 nav > .spacer {
@@ -145,8 +130,8 @@ main {
     padding: 100px 100px 40px 100px;
     max-width: min(100%, 60em);
     box-sizing: border-box;
-    background-color: #272c35;
-    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.5);
+    background-color: var(--c-bg-front);
+    box-shadow: 0 0 3px 2px rgba(0, 0, 0, calc(0.6 * var(--shadow-opacity)));
     text-align: justify;
     hyphens: auto;
 }
@@ -185,11 +170,11 @@ body > header {
 
 body > header > h1 {
     text-align: center;
-    background-image: linear-gradient(to right, #fc00b9, #ff9449); 
+    background-image: linear-gradient(to right, var(--c-fg-primary), var(--c-fg-secondary)); 
     background-clip: text;
     -webkit-background-clip: text;
     color: transparent;
-    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));
+    filter: drop-shadow(0 0 10px rgba(0, 0, 0, var(--shadow-opacity)));
     font-size: 32px;
 }
 
@@ -211,7 +196,7 @@ body > header > h1::first-line {
 
 
 main.cards {
-    background-color: #1f232a;
+    background-color: var(--c-bg-behind);
 }
 
 .pagination-links {
@@ -222,11 +207,15 @@ main.cards {
 }
 
 .pagination-links > a {
-    background-color: #272c35;
-    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
+    background-color: var(--c-bg-front);
+    box-shadow: 0 0 3px 1px rgba(0, 0, 0, calc(0.25*var(--shadow-opacity)));
     padding: 10px 20px 10px 20px;
 }
 
+.pagination-links > a:hover {
+    background: var(--c-bg-primary);
+}
+
 .arrow-right {
   display: inline-block;
   width: 0; 
@@ -239,8 +228,8 @@ main.cards {
 }
 
 .card {
-    background-color: #272c35;
-    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
+    background-color: var(--c-bg-front);
+    box-shadow: 0 0 3px 1px rgba(0, 0, 0, calc(0.25*var(--shadow-opacity)));
     padding: 30px 20px 30px 20px;
     margin-top: 50px;
     margin-bottom: 30px;
@@ -313,8 +302,8 @@ figure {
     margin-bottom: 2em;
     margin-left: auto;
     margin-right: auto;
-    background-color: #b5bcc8;
-    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.5);
+    background-color: var(--c-bg-figure-backdrop);
+    box-shadow: 0 0 3px 2px rgba(0, 0, 0, calc(0.6*var(--shadow-opacity)));
     display: flex;
     flex-direction: column;
 }
@@ -349,7 +338,7 @@ figure img, figure video {
 }
 
 figcaption {
-    background-color: #383f4c;
+    background-color: var(--c-bg-highlight);
     line-height: 16pt;
     padding: 1em;
     flex-grow: 1;
@@ -401,8 +390,8 @@ img {
     overflow: clip;
     position: relative;
     text-align: right;
-    color: #a0a0a0;
-    border-right: 1px solid #e0e0e0;
+    color: var(--c-text-muted);
+    border-right: 1px solid var(--c-fg-highlight);
     align-self: stretch;
 }
 
@@ -411,7 +400,7 @@ img {
     right: 5px;
     content: "\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳";
     white-space: pre;
-    color: #a0a0a0;
+    color: var(--c-text-muted);
 }
 
 .code > .lineno::before {
@@ -429,59 +418,93 @@ footer {
     text-align: center;
 }
 
-body .hll { background-color: #404040 }
-body .c   { color: #d0d0d0 } /* Comment */
-body .err { color: #ffffff } /* Error */
-body .k   { color: #ffffff } /* Keyword */
-body .l   { color: #ffffff } /* Literal */
-body .n   { color: #d0d0d0 } /* Name */
-body .o   { color: #d0d0d0 } /* Operator */
-body .cm  { color: #d0d0d0 } /* Comment.Multiline */
-body .cp  { color: #d0d0d0 } /* Comment.Preproc */
-body .c1  { color: #d0d0d0 } /* Comment.Single */
-body .cs  { color: #d0d0d0 } /* Comment.Special */
-body .kc  { color: #ffffff } /* Keyword.Constant */
-body .kd  { color: #ffffff } /* Keyword.Declaration */
-body .kn  { color: #ffffff } /* Keyword.Namespace */
-body .kp  { color: #ffffff } /* Keyword.Pseudo */
-body .kr  { color: #ffffff } /* Keyword.Reserved */
-body .kt  { color: #ffffff } /* Keyword.Type */
-body .na  { color: #ffffff } /* Name.Attribute */
-body .nb  { color: #ffffff } /* Name.Builtin */
-body .nc  { color: #ffffff } /* Name.Class */
-body .no  { color: #ffffff } /* Name.Constant */
-body .nd  { color: #d0d0d0 } /* Name.Decorator */
-body .ni  { color: #ffffff } /* Name.Entity */
-body .ne  { color: #ffffff } /* Name.Exception */
-body .nf  { color: #ffffff } /* Name.Function */
-body .nl  { color: #ffffff } /* Name.Label */
-body .nn  { color: #d0d0d0 } /* Name.Namespace */
-body .nx  { color: #ffffff } /* Name.Other */
-body .py  { color: #ffffff } /* Name.Property */
-body .nt  { color: #ffffff } /* Name.Tag */
-body .nv  { color: #ffffff } /* Name.Variable */
-body .ow  { color: #ffffff } /* Operator.Word */
-body .bp  { color: #ffffff } /* Name.Builtin.Pseudo */
-body .vc  { color: #d0d0d0 } /* Name.Variable.Class */
-body .vg  { color: #d0d0d0 } /* Name.Variable.Global */
-body .vi  { color: #d0d0d0 } /* Name.Variable.Instance */
-body .ld  { color: #d0d0d0; font-weight: 600 } /* Literal.Date */
-body .m   { color: #d0d0d0; font-weight: 600 } /* Literal.Number */
-body .s   { color: #d0d0d0; font-weight: 600 } /* Literal.String */
-body .mb  { color: #d0d0d0; font-weight: 600 } /* Literal.Number.Bin */
-body .mf  { color: #d0d0d0; font-weight: 600 } /* Literal.Number.Float */
-body .mh  { color: #d0d0d0; font-weight: 600 } /* Literal.Number.Hex */
-body .mi  { color: #d0d0d0; font-weight: 600 } /* Literal.Number.Integer */
-body .mo  { color: #d0d0d0; font-weight: 600 } /* Literal.Number.Oct */
-body .sb  { color: #d0d0d0; font-weight: 600 } /* Literal.String.Backtick */
-body .sc  { color: #d0d0d0; font-weight: 600 } /* Literal.String.Char */
-body .sd  { color: #d0d0d0; font-weight: 600 } /* Literal.String.Doc */
-body .s2  { color: #d0d0d0; font-weight: 600 } /* Literal.String.Double */
-body .se  { color: #d0d0d0; font-weight: 600 } /* Literal.String.Escape */
-body .sh  { color: #d0d0d0; font-weight: 600 } /* Literal.String.Heredoc */
-body .si  { color: #d0d0d0; font-weight: 600 } /* Literal.String.Interpol */
-body .sx  { color: #d0d0d0; font-weight: 600 } /* Literal.String.Other */
-body .sr  { color: #d0d0d0; font-weight: 600 } /* Literal.String.Regex */
-body .s1  { color: #d0d0d0; font-weight: 600 } /* Literal.String.Single */
-body .ss  { color: #d0d0d0; font-weight: 600 } /* Literal.String.Symbol */
-body .il  { color: #d0d0d0; font-weight: 600 } /* Literal.Number.Integer.Long */
+body .hll {}
+body .c   { color: var(--c-text); font-weight: 400 } /* Comment */
+body .n   { color: var(--c-text); font-weight: 400 } /* Name */
+body .o   { color: var(--c-text); font-weight: 400 } /* Operator */
+body .cm  { color: var(--c-text); font-weight: 400 } /* Comment.Multiline */
+body .cp  { color: var(--c-text); font-weight: 400 } /* Comment.Preproc */
+body .c1  { color: var(--c-text); font-weight: 400 } /* Comment.Single */
+body .cs  { color: var(--c-text); font-weight: 400 } /* Comment.Special */
+body .nd  { color: var(--c-text); font-weight: 400 } /* Name.Decorator */
+body .nn  { color: var(--c-text); font-weight: 400 } /* Name.Namespace */
+body .vc  { color: var(--c-text); font-weight: 400 } /* Name.Variable.Class */
+body .vg  { color: var(--c-text); font-weight: 400 } /* Name.Variable.Global */
+body .vi  { color: var(--c-text); font-weight: 400 } /* Name.Variable.Instance */
+body .err { color: var(--c-text-highlight); font-weight: 500 } /* Error */
+body .k   { color: var(--c-text-highlight); font-weight: 500 } /* Keyword */
+body .l   { color: var(--c-text-highlight); font-weight: 500 } /* Literal */
+body .kc  { color: var(--c-text-highlight); font-weight: 500 } /* Keyword.Constant */
+body .kd  { color: var(--c-text-highlight); font-weight: 500 } /* Keyword.Declaration */
+body .kn  { color: var(--c-text-highlight); font-weight: 500 } /* Keyword.Namespace */
+body .kp  { color: var(--c-text-highlight); font-weight: 500 } /* Keyword.Pseudo */
+body .kr  { color: var(--c-text-highlight); font-weight: 500 } /* Keyword.Reserved */
+body .kt  { color: var(--c-text-highlight); font-weight: 500 } /* Keyword.Type */
+body .na  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Attribute */
+body .nb  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Builtin */
+body .nc  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Class */
+body .no  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Constant */
+body .ni  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Entity */
+body .ne  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Exception */
+body .nf  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Function */
+body .nl  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Label */
+body .nx  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Other */
+body .py  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Property */
+body .nt  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Tag */
+body .nv  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Variable */
+body .ow  { color: var(--c-text-highlight); font-weight: 500 } /* Operator.Word */
+body .bp  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Builtin.Pseudo */
+body .ld  { color: var(--c-text); font-weight: 600 } /* Literal.Date */
+body .m   { color: var(--c-text); font-weight: 600 } /* Literal.Number */
+body .s   { color: var(--c-text); font-weight: 600 } /* Literal.String */
+body .mb  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Bin */
+body .mf  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Float */
+body .mh  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Hex */
+body .mi  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Integer */
+body .mo  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Oct */
+body .sb  { color: var(--c-text); font-weight: 600 } /* Literal.String.Backtick */
+body .sc  { color: var(--c-text); font-weight: 600 } /* Literal.String.Char */
+body .sd  { color: var(--c-text); font-weight: 600 } /* Literal.String.Doc */
+body .s2  { color: var(--c-text); font-weight: 600 } /* Literal.String.Double */
+body .se  { color: var(--c-text); font-weight: 600 } /* Literal.String.Escape */
+body .sh  { color: var(--c-text); font-weight: 600 } /* Literal.String.Heredoc */
+body .si  { color: var(--c-text); font-weight: 600 } /* Literal.String.Interpol */
+body .sx  { color: var(--c-text); font-weight: 600 } /* Literal.String.Other */
+body .sr  { color: var(--c-text); font-weight: 600 } /* Literal.String.Regex */
+body .s1  { color: var(--c-text); font-weight: 600 } /* Literal.String.Single */
+body .ss  { color: var(--c-text); font-weight: 600 } /* Literal.String.Symbol */
+body .il  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Integer.Long */
+
+@media print, (prefers-color-scheme: light) {
+    html {
+        --c-bg-backdrop:        hsl(220, 10%, 90%);
+        --c-bg-behind:          hsl(220, 10%, 95%);
+        --c-bg-front:           hsl(220, 10%, 96%);
+        --c-bg-highlight        #ffffff;
+        --c-bg-figure-backdrop: #b5bcc8;
+        --c-text:               hsl(220, 20%, 30%);
+        --c-text-inverted:      hsl(220, 20%, 100%);
+        --c-text-muted:         #5d5980;
+        --c-text-highlight:     #000000;
+        --c-fg-highlight:       #3c4b62;
+        --c-fg-primary:         hsl(25, 100%, 64%);
+        --c-bg-primary:         hsl(25, 100%, 64%);
+        --c-fg-secondary:       hsl(319, 98%, 52%);
+        --c-bg-secondary:       hsl(319, 98%, 52%);
+
+        --shadow-opacity: 0.2;
+    }
+
+    body > header > h1 {
+        filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.4));
+    }
+
+    a:hover, nav > a:hover {
+        color: var(--c-text-inverted);
+    }
+    
+    .card {
+        box-shadow: 0 0 3px 1px rgba(0, 0, 0, calc(0.5*var(--shadow-opacity)));
+    }
+}
+