Clean up CSS, minor design changes

3 files changed, 96 insertions, 31 deletions

diff --git a/static/logo256.png b/static/logo256.png
new file mode 100644
index 0000000..d6b9961
--- /dev/null
+++ b/static/logo256.png
diff --git a/static/logo256x256.gif b/static/logo256x256.gif
deleted file mode 100644
index a778340..0000000
--- a/static/logo256x256.gif
+++ /dev/null
diff --git a/static/main.css b/static/main.css
index b9ac894..f275aa6 100644
--- a/static/main.css
+++ b/static/main.css
@@ -1,34 +1,99 @@
+/* Colour scheme */
+:root {
+	--b: #ededed;
+	--f: #121212;
+	--a: #0000ff;
+}
+.darkinv {}
+@media only screen and (prefers-color-scheme: dark) {
+	:root {
+		--b: #121212;
+		--f: #ededed;
+		--a: #ffff00;
+	}
+	.darkinv {filter: invert(100%)}
+}
+
+/* Basic elements */
 body {
-	background:#e3e3e3;
-	color:#161616;
-	max-width:80ch;
-	margin:auto;
-	padding:1em 0;
-	font-family:sans-serif;
-}
-h1,h2,h3 {text-align:center}
-h1 {font-size:200%;}
-h2 {font-size:160%;}
-h3 {font-size:120%;}
-a {text-decoration:none;color:#0000ff;}
-.noha a:link, .noha a:visited {color:#161616;}
-.noha a:hover, .noha a:focus, .noha a:active {color:#0000ff;}
-.nav {height:3rem;font-size:250%;}
-.navl {float:left;text-align:left;}
-.navr {float:right;text-align:right;}
-.footl {float:left;text-align:left;}
-.footr {float:right;text-align:right;}
-pre {filter:invert(100%);}
-@media (prefers-color-scheme: dark) {
-	body {background:#161616;filter:invert(100%);}
+	background: #ededed;
+	background: var(--b);
+	color: #121212;
+	color: var(--f);
+
+	max-width: 80ch;
+	margin: auto;
+	padding: 1rem 0;
+
+	font-family: sans-serif;
+	line-height: 1.5;
+}
+h1,h2,h3 {text-align: center;}
+h1 {font-size: 2.0rem;}
+h2 {font-size: 1.6rem;}
+h3 {font-size: 1.2rem;}
+a {
+	text-decoration: none;
+	color: #0000ff;
+	color: var(--a);
+}
+img {
+	display: block;
+	max-width: 100%;
+	height: auto;
+	margin: auto;
+}
+
+/* Header and footer */
+.nav {
+	height: 3rem;
+	font-size: 2.4rem;
+	padding: 0.25rem 0;
+}
+.navl {
+	float: left;
+	text-align: left;
+}
+.navr {
+	float: right;
+	text-align: right;
+}
+@media only screen and (max-width: 64ch) {
+	.navl {width: 100%;}
+	.navr {
+		width: 100%;
+		font-size: 1.8rem;
+	}
+}
+.footl {
+	float: left;
+	text-align: left;
+}
+.footr {
+	float: right;
+	text-align: right;
+}
+.noha a:link, .noha a:visited {
+	color: #121212;
+	color: var(--f);
+}
+.noha a:hover, .noha a:focus, .noha a:active {
+	color: #0000ff;
+	color: var(--a);
+}
+
+/* Collapsible boxes */
+label {
+	color: #0000ff;
+	color: var(--a);
+	cursor: pointer;
 }
 .accordion {
-	display:block;
-	padding:0ch 1ch;
-	border-style:dotted;
-}
-input {display:none;}
-label {color:#0000ff;cursor:pointer;}
-input + label + .hidden {display:none;}
-input:checked + label {display:none;}
-input:checked + label + .hidden {display:block;}
+	display: block;
+	padding: 0 0.5rem;
+	border-style: dotted;
+}
+input {display: none;}
+input + label + .hidden {display: none;}
+input:checked + label {display: none;}
+input:checked + label + .hidden {display: block;}