paritybit.ca

commit 40146bd9f4fdcac68cfe67e87206c62c3881f987
parent bf0cb7f5eb90ece6533fda100f067410e45d713c
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Fri, 31 Dec 2021 14:37:02 -0500

Add light theme

Diffstat:
M
build/footer.html
 | 
2
+-
M
style/main.css
 | 
89
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------

2 files changed, 65 insertions(+), 26 deletions(-)
diff --git a/build/footer.html b/build/footer.html
@@ -1 +1 @@
-</main><hr><footer><small><div style="float:left"><a href="https://fediring.net/previous?host=www.paritybit.ca">←</a> <a href="https://fediring.net/">Fediring</a> <a href="https://fediring.net/next?host=www.paritybit.ca">→</a></div><center>© 2019-2021 Jake Bauer — <a href="https://creativecommons.org/licenses/by/4.0/legalcode">CC-BY 4.0</a> <a href="https://webring.xxiivv.com/#paritybit" target="_blank" style="float:right"><img src="/img/icon.white.svg" width="20px" height="20px" alt="XXIIVV webring"/></a></center></small></footer></body></html>
+</main><hr><footer><small><div style="float:left"><a href="https://fediring.net/previous?host=www.paritybit.ca">←</a> <a href="https://fediring.net/">Fediring</a> <a href="https://fediring.net/next?host=www.paritybit.ca">→</a></div><center>© 2019-2021 Jake Bauer — <a href="https://creativecommons.org/licenses/by/4.0/legalcode">CC-BY 4.0</a> <a href="https://webring.xxiivv.com/#paritybit" target="_blank" style="float:right"><img id="xxiivv-icon" src="/img/icon.white.svg" width="20px" height="20px" alt="XXIIVV webring"/></a></center></small></footer></body></html>
diff --git a/style/main.css b/style/main.css
@@ -11,7 +11,6 @@ body {
 
 header {
 	text-align: center;
-	clear: both;
 	margin: 0.7em auto;
 	font-size: 2em;
 	font-weight: bold;
@@ -40,13 +39,16 @@ nav a {
 	text-decoration: none;
 }
 
+nav a:hover {
+	text-decoration: underline;
+}
+
 a, nav a:visited {
 	color: #83b3d8;
 }
 
-a:hover, li a:hover, nav a:hover {
-	color: #b3e8ff !important;
-	text-decoration: underline;
+a:hover {
+	text-decoration: none;
 }
 
 a:visited {
@@ -68,16 +70,15 @@ figcaption {
 }
 
 input {
-	color: #ddd;
-	background-color: #363636;
-	padding: 0.2em;
+	color: #ccc;
+	background-color: #333;
+	border: 2px inset #585858;
 }
 
 button {
-	color: #ddd;
+	color: #ccc;
 	background-color: #333;
 	border: 2px outset #585858;
-	padding: 0.2em 0.4em;
 }
 
 button:hover {
@@ -92,31 +93,21 @@ table, th, td {
 	border: 2px solid #585858;
 	border-collapse: collapse;
 	text-align: left;
-	padding: 0.25em 0.5em;
 }
 
 th {
-	color: #ddd;
 	background-color: #363636;
 }
 
 .byline {
 	font-size: 0.9rem;
-	margin-bottom: 16px;
-}
-
-.rss-icon {
-	display: inline-block;
-	margin-left: 0.5em;
 }
 
 .note {
 	background-color: #245;
-	color: #ddd;
 	border-radius: 5px;
 	box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.5);
-	padding: 20px 30px;
-	margin-bottom: 10px;
+	padding: 15px 20px;
 }
 
 .note a, .note a:visited{
@@ -126,10 +117,8 @@ th {
 
 #table-of-contents {
 	float: right;
-	margin: 0em 0em 1em 1em;
 	width: 45%;
 	border: 2px #585858 solid;
-	border-radius: 5px;
 	background-color: #363636;
 }
 
@@ -143,16 +132,13 @@ pre {
 	background-color: #333;
 	overflow: auto;
 	padding: 0.5em;
-	text-indent: -0.25em; /*Needed otherwise first line indented for some reason*/
 	line-height: 1.1rem;
 }
 
 code {
 	font-family: "IBM Plex Mono", monospace;
 	font-size: 0.9rem;
-	color: #ddd;
 	background-color: #333;
-	padding: 1px 4px;
 }
 
 @media print {
@@ -178,3 +164,56 @@ code {
 		margin-top: 1.5em;
 	}
 }
+
+@media (prefers-color-scheme: light) {
+	body {
+		background-color: #fcfcfc;
+		color: #111;
+	}
+	a, nav a:visited {
+		color: #134799;
+	}
+	a:visited {
+		color: #551a8b;
+	}
+	blockquote {
+		border-left: 3px solid #134799;
+	}
+	input {
+		color: #111;
+		background-color: #eee;
+		border: 2px inset #aaa;
+	}
+	button {
+		color: #111;
+		background-color: #eee;
+		border: 2px outset #aaa;
+	}
+	button:hover {
+		border: 2px outset #134799;
+	}
+	button:active {
+		border: 2px inset #aaa;
+	}
+	th {
+		background-color: #ccc;
+	}
+	.note {
+		background-color: #69a;
+	}
+	.note a, .note a:visited{
+		color: #111;
+	}
+	#table-of-contents {
+		background-color: #eee;
+	}
+	pre {
+		background-color: #ccc;
+	}
+	code {
+		background-color: #ccc;
+	}
+	#xxiivv-icon {
+		filter: invert(1);
+	}
+}