borrowing cosmic stylesheet to start

index.html

@@ -4,6 +4,7 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width,initial-scale=1">
 		<link rel='icon' href='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>♊️</text></svg>'>
+		<link rel="stylesheet" href="styles.css">
 		<style>
 			body { margin: 0; padding: 0 0 5em}
 			#wobbly-toolbar { background-color: #cccccc; width: 100%; position: fixed; top: 0; }

styles.css

@@ -0,0 +1,141 @@
+@font-face {
+	font-family: 'inconsolata';
+	src: url('/inconsolata-regular-webfont.woff2') format('woff2'),
+			 url('/inconsolata-regular-webfont.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap;
+}
+
+html {
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	color: #333;
+	background-color: #f2f4f4;
+	background-repeat: repeat;
+}
+
+a,
+a:visited,
+a:hover,
+a:active {
+	color: rgb(62, 231, 123);
+	text-decoration: none;
+}
+a:hover {
+	text-decoration: underline;
+}
+
+.dim {
+	color: rgb(62, 231, 123, 0.5);
+}
+
+.mastodon {
+	display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+	body {
+		color: rgb(50, 200, 100);
+		background-color: #010;
+		background-image: none;
+	}
+
+	a,
+	a:visited,
+	a:hover,
+	a:active {
+		color: rgb(62, 231, 123);
+	}
+
+	.dim {
+		color: rgb(62, 231, 123, 0.5);
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	body {
+		color: #333;
+		background-color: #f2f4f4;
+		background-repeat: repeat;
+	}
+
+	a,
+	a:visited,
+	a:hover,
+	a:active {
+		color: #333;
+		font-weight: bold;
+	}
+
+	.dim {
+		color: rgba(30, 30, 30, 0.5);
+	}
+}
+
+/* Manually toggled dark class on body */
+body.dark {
+	color: rgb(50, 200, 100);
+	background-color: #010;
+	background-image: none;
+}
+.dark a,
+.dark a:visited,
+.dark a:hover,
+.dark a:active {
+	color: rgb(62, 231, 123);
+}
+.dark .dim {
+	color: rgb(62, 231, 123, 0.5);
+}
+
+/* Manually toggled light class on body */
+body.light {
+	color: #333;
+	background-color: #f2f4f4;
+	background-repeat: repeat;
+}
+
+.light a,
+.light a:visited,
+.light a:hover,
+.light a:active {
+	color: #333;
+	font-weight: bold;
+}
+
+.light .dim {
+	color: rgba(30, 30, 30, 0.5);
+}
+
+.page-wrapper {
+	text-align: center;
+}
+
+.inner-wrapper {
+	display: inline-block;
+	text-align: left;
+	white-space: pre;
+	font-family: 'inconsolata', monospace;
+	margin: 0 auto;
+	width: auto;
+}
+
+ol {
+	padding: 0;
+	line-height: 0.5em;
+}
+
+@media screen and (min-width: 700px) {
+	body, html {
+		font-size: 18px;
+	}
+}
+@media screen and (min-width: 900px) {
+	body, html {
+		font-size: 24px;
+	}
+}