Mobile-friendly header redesign, CSS improvements

1 files changed, 184 insertions, 47 deletions

diff --git a/source/infra/css/main.css b/source/infra/css/main.css
index 0b1b47f..898b56e 100644
--- a/source/infra/css/main.css
+++ b/source/infra/css/main.css
@@ -1,42 +1,89 @@
-/* Colour scheme */
+/*** COLOR SCHEME ***/
 :root {
 	--b: #ededed;
 	--f: #121212;
 	--a: #0000ff;
+	--l: #7f7f7f;
 }
-.darkinv {}
+/* Invert the colors in dark mode, including for some images */
 @media only screen and (prefers-color-scheme: dark) {
 	:root {
 		--b: #121212;
 		--f: #ededed;
 		--a: #ffff00;
+		--l: #7f7f7f;
+	}
+	.darkinv {
+		filter: invert(100%);
 	}
-	.darkinv {filter: invert(100%);}
 }
-
-/* Basic elements */
 html {
-	line-height: 1.5;
-	-webkit-text-size-adjust: none;
-	text-size-adjust: none;
-}
-body {
-	background: #ededed;
-	background: var(--b);
 	color: #121212;
 	color: var(--f);
+	background: #ededed;
+	background: var(--b);
+}
+
 
+/*** BASIC STRUCTURE ***/
+/* Increase font size on mobile Firefox. I don't like this kind
+ * of specific fix, but the font is ridiculously small for me. */
+@supports (-moz-appearance: none) {
+	@media only screen and (hover: none) and (pointer: coarse) {
+		html {
+			font-size: 200%
+		}
+	}
+}
+body {
+	/* Improve consistency between systems */
+	font-family: sans-serif;
+	line-height: 1.5;
+	-webkit-text-size-adjust: none;
+	text-size-adjust: none;
+	/* Center text and limit its width */
 	max-width: 80ch;
+	padding: 1ch;
 	margin: auto;
-	padding: 1rem 0;
 
-	font-family: sans-serif;
 }
-h1, h2, h3, h4 {text-align: center;}
-h1 {font-size: 2.1rem;}
-h2 {font-size: 1.8rem;}
-h3 {font-size: 1.5rem;}
+/* Basic layout: header, article, footer */
+#header {
+	display: block;
+	height: 3rem;
+	font-size: 2.1rem;
+	position: relative; /* for `#nav' */
+}
+#article {
+	display: block;
+	margin: 1rem 0;
+}
+#footer {
+	display: block;
+}
+/* Ensure that `body' padding applies to bottom of `#footer' too */
+#footer:after {
+	content: "";
+	display: block;
+	clear: both;
+}
+
+
+/*** COMMON TAGS ***/
+h1 {
+	text-align: center;
+	font-size: 2.1rem;
+}
+h2 {
+	text-align: center;
+	font-size: 1.8rem;
+}
+h3 {
+	text-align: center;
+	font-size: 1.5rem;
+}
 h4 {
+	text-align: center;
 	font-size: 1.2rem;
 	font-style: italic;
 }
@@ -53,55 +100,145 @@ img {
 	height: auto;
 	margin: auto;
 }
-table {margin: auto;}
-td {padding: 0 1.5rem;}
+table {
+	margin: auto;
+}
+td {
+	padding: 0 1.5rem;
+}
+/* TODO: this rule fixes code font on Firefox and Chromium,
+ * but currently messes with code snippets a bit too much. */
 /*code, pre {
 	font-family: monospace, monospace;
 	font-size: 1em;
 }*/
 
-/* Header and footer */
-.nav {
-	height: 3rem;
-	font-size: 2.4rem;
-	padding-bottom: 0.5rem;
+
+/*** HEADER & FOOTER ***/
+/* Break footer into multiple lines on narrow screens */
+@media only screen and (max-width: 69ch) {
+	#footer > div {
+		width: 100%;
+	}
+}
+/* Only highlight header/footer links on hover/click */
+.no-hl-a a:link,
+.no-hl-a a:visited {
+	color: #121212;
+	color: var(--f);
 }
-.navl, .footl {
+.no-hl-a a:hover,
+.no-hl-a a:focus,
+.no-hl-a a:active {
+	color: #0000ff;
+	color: var(--a);
+}
+/* Push header/footer elements to edges of body */
+.align-l {
 	float: left;
 	text-align: left;
 }
-.navr, .footr {
+.align-r {
 	float: right;
 	text-align: right;
 }
-@media only screen and (max-width: 69ch) {
-	.navl, .footl, .footr {width: 100%;}
-	.navr {
-		width: 100%;
-		font-size: 1.8rem;
-	}
+/* Visual separator between header, article and footer */
+hr {
+	border-top: 2px solid;
+	border-color: #7f7f7f;
+	border-color: var(--l);
+	border-bottom: none;
+}
+
+
+/*** NAVIGATION ***/
+/* Don't let `#nav-list` affect surroundings */
+#nav {
+	position: absolute;
+	top: 0;
+	right: 0;
 }
-.noha a:link, .noha a:visited {
+/* Not a real link, so don't highlight it */
+#nav-show {
 	color: #121212;
 	color: var(--f);
 }
-.noha a:hover, .noha a:focus, .noha a:active {
-	color: #0000ff;
-	color: var(--a);
+/* Submenu hidden until interaction, then appears on top.
+ * Delay disappearance to hide flicker on mobile Firefox. */
+#nav-list {
+	visibility: hidden;
+	transition-delay: 0.3s;
+	position: relative;
+	z-index: 1;
+	border: 2px solid;
+	background: #ededed;
+	background: var(--b);
+}
+/* Unhide on hover, click, and Tab-key focus */
+#nav:hover > #nav-list,
+#nav:focus-within > #nav-list,
+#nav-show:hover + #nav-list,
+#nav-show:focus + #nav-list,
+#nav-show:active + #nav-list {
+	visibility: visible;
+	transition-delay: 0s;
+}
+/* For the entries in `#nav-list' */
+.nav-entry {
+	padding: 0 0.5rem 0.2rem 0.5rem;
+}
+.nav-entry + .nav-entry {
+	border-top: 2px solid;
+	border-color: #7f7f7f;
+	border-color: var(--l);
+}
+.nav-entry-name {
+	font-size: 2rem;
+}
+.nav-entry-desc {
+	font-size: 1rem;
 }
 
-/* IE-compatible collapsible proofs */
-div.proof {
-	border: 3px dotted;
-	padding: 0.25rem 0.5rem;
+
+/*** COLLAPSIBLE BOXES ***/
+.collapse-hidden {
+	display: none;
+}
+/* Invisible checkbox, toggled by clicking label */
+.collapse-toggle {
+	display: none;
 }
-label.proof {
+.collapse > label,
+.collapse-starts + p > label {
 	color: #0000ff;
 	color: var(--a);
 	cursor: pointer;
 }
-.proof-hidden {display: none;}
-input.proof {display: none;}
-input.proof:checked + label {display: none;}
-input.proof:checked + label + .proof-hidden {display: block;}
-.proof-starts + p {margin-top: 0;}
+/* When the checkbox is ticked, hide label and show contents */
+.collapse-toggle:checked + label {
+	display: none;
+}
+.collapse-toggle:checked + label + .collapse-hidden {
+	display: block;
+}
+.collapse-starts + p {
+	margin-top: 0;
+}
+/* Visual differentiator for collapsible proofs */
+.proof {
+	padding: 0.25rem 0.5rem;
+	border: 3px dotted;
+}
+
+
+/*** MATHS TWEAKS ***/
+/* Prevent vertical overflow, allow horizontal scrolling */
+.katex-display {
+	padding-top: 0.25rem;
+	overflow-x: auto;
+	overflow-y: hidden;
+}
+/* Don't allow line breaks in inline formulas */
+p > .katex {
+	white-space: nowrap;
+}