wowana.me

website source

commit 3e2d619d3232afba2f03d8916e78c33eb811f6f5
parent 76166c76c27bd0c89953c0032a48021f11e265e0
Author: opal hart <opal@wowana.me>
Date:   Mon, 31 May 2021 20:50:28 +0000

css: dark theme

rewrite the css to allow for easier customisation in general by using
css3 vars, and create a dark variant for user-agents that prefer it

Diffstat:
M
out/opal.css
 | 
75
+++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------

1 file changed, 55 insertions(+), 20 deletions(-)
diff --git a/out/opal.css b/out/opal.css
@@ -1,6 +1,41 @@
+:root {
+	--bg: #ffe2f7;
+	--fg: #2a0217;
+	--sidebar-bg: #fff;
+	--sidebar-border: #000;
+	--sidebar-separator: var(--bg);
+	--a: #680285;
+	--a-hover: #d16dc1;
+	--quote: #832917;
+	--table-th: #d178ed;
+	--table-odd: #e7e2ff;
+	--table-border: var(--table-th);
+}
+.mono-image {
+	mix-blend-mode: darken;
+}
+@media (prefers-color-scheme: dark) {
+	:root {
+		--bg: #2a0217;
+		--fg: #ffe2f7;
+		--sidebar-bg: #4b1017;
+		--a: #ea9ebc;
+		--quote: #f6d08a;
+		--table-th: #832917;
+		--table-odd: #4c1f3e;
+	}
+	.mono-image {
+		mix-blend-mode: lighten;
+		filter:
+			invert(100%)
+			brightness(78%)
+			sepia(100%)
+			hue-rotate(225deg);
+	}
+}
 html {
-	background-color: #ffe2f7;
-	color: #2a0217;
+	background-color: var(--bg);
+	color: var(--fg);
 	font: 1em Georgia, serif;
 }
 body {
@@ -10,7 +45,10 @@ body {
 	display: flex;
 }
 .avatar {
-	background-color: #ffe2f7;
+	background: var(--bg);
+}
+.avatar,
+.avatar > img {
 	border-radius: .3em .3em 0 0;
 	height: 290px;
 	width: 290px;
@@ -21,9 +59,9 @@ body {
 	padding: 1em;
 }
 .sidebar {
-	background: #fff;
+	background: var(--sidebar-bg);
 	width: 290px;
-	border: .1em solid #2a0217;
+	border: .1em solid var(--sidebar-border);
 	border-radius: .3em;
 }
 .sidebar p,
@@ -37,7 +75,7 @@ body {
 	padding: 0;
 }
 .topnav ul li {
-	border-top: .1em solid #ffe2f7;
+	border-top: .1em solid var(--sidebar-separator);
 	padding: .2em .4em;
 }
 @media only screen and (max-width: 768px), (orientation: portrait) {
@@ -49,7 +87,7 @@ body {
 		text-align: center;
 	}
 	.topnav ul {
-		border-top: .1em solid #ffe2f7;
+		border-top: .1em solid var(--bg);
 		padding: 1em;
 	}
 	.topnav ul li {
@@ -87,7 +125,7 @@ body {
 hr {
 	border-width: .2em 0 0;
 	border-style: dashed;
-	border-color: #2a0217;
+	border-color: var(--fg);
 	max-width: 3em;
 }
 
@@ -115,7 +153,7 @@ main li > p:first-child {
 	text-indent: 0;
 }
 blockquote {
-	color: #832917;
+	color: var(--quote);
 	border-left: .2em solid;
 	margin: 1em 0;
 	padding-left: 2em;
@@ -124,11 +162,11 @@ dt {
 	font-weight: bold;
 }
 summary, main a {
-	color: #680285;
+	color: var(--a);
 	text-decoration: underline;
 }
 summary:hover, main a:hover {
-	color: #d16dc1;
+	color: var(--a-hover);
 	text-decoration: none;
 }
 kbd {
@@ -141,12 +179,12 @@ kbd::after {
 	content: close-quote;
 }
 .sidebar a:not(.nolink) {
-	color: #2a0217;
+	color: var(--fg);
 	text-decoration: underline;
 }
 .nolink,
 .sidebar a:hover {
-	color: #2a0217;
+	color: var(--fg);
 	text-decoration: none;
 }
 summary {
@@ -154,21 +192,21 @@ summary {
 	display: block;
 }
 table {
-	border: .1em solid #d178ed;
+	border: .1em solid var(--table-border);
 	border-collapse: collapse;
 	border-spacing: 0;
 }
 table tr {
-	border: .1em solid #d178ed;
+	border: .1em solid var(--table-border);
 }
 table tr:nth-child(2n+1) {
-	background-color: #e7e2ff;
+	background-color: var(--table-odd);
 }
 table th, table td {
 	padding: .1em .3em;
 }
 table th {
-	background-color: #d178ed;
+	background-color: var(--table-th);
 }
 table ol,
 table ul {
@@ -182,6 +220,3 @@ thead th {
 	font-size: smaller;
 	opacity: .5;
 }
-.mono-image {
-	mix-blend-mode: multiply;
-}