summaryrefslogtreecommitdiff
path: root/themes/conspiracy/assets/css
diff options
context:
space:
mode:
authorjaseg <git@jaseg.de>2023-03-19 23:02:57 +0100
committerjaseg <git@jaseg.de>2023-03-19 23:02:57 +0100
commit6658952dcf963d2aed146fff70d9da2e54e6402d (patch)
treed2ac69bab428b5745fb57d7496bf187d35d21cc1 /themes/conspiracy/assets/css
parent3c6957467fc401648369905efae98c0a228af752 (diff)
downloadblog-6658952dcf963d2aed146fff70d9da2e54e6402d.tar.gz
blog-6658952dcf963d2aed146fff70d9da2e54e6402d.tar.bz2
blog-6658952dcf963d2aed146fff70d9da2e54e6402d.zip
dark mode
Diffstat (limited to 'themes/conspiracy/assets/css')
-rw-r--r--themes/conspiracy/assets/css/style.css259
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)));
+ }
+}
+