Better mobile view

css/main.css

@@ -11,13 +11,13 @@ html, body {
 }
 
 body {
+	position: relative;
+	min-height: 100vh;
 	font-size: 14pt;
-
 	font-family: 'Roboto', sans-serif;
 }
 
 header {
-	position: relative;
 	display: grid;
 	grid-template-columns: min-content min-content 1fr min-content;
 	grid-gap: 16px;
@@ -38,14 +38,41 @@ header .page {
 	font-weight: 500;
 }
 
+@media only screen and (max-width: 700px) {
+	header {
+		display: flex;
+		flex-flow: wrap;
+		justify-content: center;
+	}
+
+	header #page-label {
+		width: 100%;
+		text-align: center;
+	}
+
+	header #pages {
+		display: flex;
+		flex-flow: wrap;
+		justify-content: center;
+	}
+
+	header #theme {
+		display: flex;
+		justify-content: center;
+		width: 100%;
+	}
+
+	.spacer { display: none; }
+}
+
 footer {
 	position: absolute;
 	left: 0px;
 	right: 0px;
 	bottom: 0px;
-	text-align: center;
-	color: #f0f;
 	padding: 6px 0;
+	color: #f0f;
+	text-align: center;
 	font-size: 0.75em;
 	font-weight: 500;
 }
@@ -73,7 +100,7 @@ footer {
 	justify-content: center;
 	gap: 32px;
 	margin-top: 32px;
-	padding: 32px;
+	padding: 32px 32px 96px 32px;
 }
 
 .section {
@@ -145,3 +172,5 @@ footer {
 	font-weight: 300;
 	font-size: 0.85em;
 }
+
+/* vim: ts=8 sw=8 noexpandtab */