Mobile-friendly header redesign, CSS improvements

author: Prefetch 2023-03-03 14:09:23 +0100
committer: Prefetch 2023-03-03 14:09:23 +0100
commit: 7edaa33d1b9aef05fedc82375ca010461c009edf (patch)
tree: c60710ce64920a1cdd8d0cfa387d6f479868928a
parent: 52ff45a7c687d502492be0fa6e54f9b99d501465 (diff)
7 files changed, 251 insertions, 78 deletions
diff --git a/source/_includes/footer.html b/source/_includes/footer.html
index b3679e8..5cba67d 100644
--- a/source/_includes/footer.html
+++ b/source/_includes/footer.html
@@ -1,8 +1,7 @@
-<hr>
-<div class="footl noha">
-&copy; 2023 Marcus R.A. Newman,
-<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
+<div class="align-l">
+  &copy; Marcus R.A. Newman,
+  <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA</a>.
 </div>
-<div class="footr noha">
-<a href="https://prefetch.goatcounter.com/">Visitor statistics</a>
+<div class="align-r">
+  <a href="https://prefetch.goatcounter.com/">Visitor statistics</a>
 </div>
diff --git a/source/_includes/header.html b/source/_includes/header.html
new file mode 100644
index 0000000..c6cb457
--- /dev/null
+++ b/source/_includes/header.html
@@ -0,0 +1,38 @@
+<div class="align-l">
+  <a href="/">PREFETCH</a>
+</div>
+<div id="nav" class="align-r">
+  <a id="nav-show" href="#">{menu}</a>
+  <div id="nav-list">
+    <div class="nav-entry">
+      <a href="/blog/">
+        <div class="nav-entry-name">
+          blog
+        </div>
+        <div class="nav-entry-desc">
+          technical musings of a philosopher
+        </div>
+      </a>
+    </div>
+    <div class="nav-entry">
+      <a href="/code/">
+        <div class="nav-entry-name">
+          code
+        </div>
+        <div class="nav-entry-desc">
+          tiny miscreations of a programmer
+        </div>
+      </a>
+    </div>
+    <div class="nav-entry">
+      <a href="/know/">
+        <div class="nav-entry-name">
+          know
+        </div>
+        <div class="nav-entry-desc">
+          terrifying mumblings of a physicist
+        </div>
+      </a>
+    </div>
+  </div>
+</div>
diff --git a/source/_includes/navigation.html b/source/_includes/navigation.html
deleted file mode 100644
index a5c835c..0000000
--- a/source/_includes/navigation.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="nav noha">
-<div class="navl"><a href="/">PREFETCH</a></div>
-<div class="navr">
-<a href="/blog/">blog</a>&emsp;
-<a href="/code/">code</a>&emsp;
-<a href="/know/">know</a>
-</div>
-</div>
-<hr>
diff --git a/source/_includes/preamble.html b/source/_includes/preamble.html
index 4d3c92f..8104e6b 100644
--- a/source/_includes/preamble.html
+++ b/source/_includes/preamble.html
@@ -17,7 +17,7 @@
 {% if page.layout == "concept" or page.maths %}
 <link rel="stylesheet" href="/infra/css/katex.min.css?v=20221008">
 {% endif %}
-<link rel="stylesheet" href="/infra/css/main.css?v=20221119">
+<link rel="stylesheet" href="/infra/css/main.css?v=20230303">
 
 {% if jekyll.environment == "production" %}
 <script data-goatcounter="https://prefetch.goatcounter.com/count" async src="/infra/js/count.js?v=20221103"></script>
diff --git a/source/_includes/proof/start.html b/source/_includes/proof/start.html
index 780b159..062c9d6 100644
--- a/source/_includes/proof/start.html
+++ b/source/_includes/proof/start.html
@@ -1,6 +1,6 @@
-<div class="proof">
-<input type="checkbox" class="proof" id="{{ include.id }}"/>
-<label class="proof" for="{{ include.id }}">{{ include.label | default: "Proof" }}</label>
-<div class="proof-hidden" markdown="1">
-<div class="proof-starts"></div>
-<label class="proof" for="{{ include.id }}">{{ include.label | default: "Proof" }}.</label>
+<div class="collapse proof">
+<input type="checkbox" id="{{ include.id }}" class="collapse-toggle"/>
+<label for="{{ include.id }}">{{ include.label | default: "Proof" }}</label>
+<div class="collapse-hidden" markdown="1">
+<div class="collapse-starts"></div>
+<label for="{{ include.id }}">{{ include.label | default: "Proof" }}.</label>
diff --git a/source/_layouts/default.html b/source/_layouts/default.html
index 66a70a2..1d02557 100644
--- a/source/_layouts/default.html
+++ b/source/_layouts/default.html
@@ -1,12 +1,20 @@
 <!DOCTYPE html>
 <html>
-<head>
-{% include preamble.html %}
-<title>{{ page.title | replace: "<br>", " " }} | {{ site.title }}</title>
-</head>
-<body>
-{% include navigation.html %}
-{{ content }}
-{% include footer.html %}
-</body>
+  <head>
+    {% include preamble.html %}
+    <title>{{ page.title | replace: "<br>", " " }} | {{ site.title }}</title>
+  </head>
+  <body>
+    <div id="header" class="no-hl-a">
+      {% include header.html %}
+    </div>
+    <div id="article">
+      <hr>
+      {{ content }}
+      <hr>
+    </div>
+    <div id="footer" class="no-hl-a">
+      {% include footer.html %}
+    </div>
+  </body>
 </html>
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;
+}
author	Prefetch	2023-03-03 14:09:23 +0100
committer	Prefetch	2023-03-03 14:09:23 +0100
commit	7edaa33d1b9aef05fedc82375ca010461c009edf (patch)
tree	c60710ce64920a1cdd8d0cfa387d6f479868928a
parent	52ff45a7c687d502492be0fa6e54f9b99d501465 (diff)