Mobile-friendly header redesign, CSS improvements

5 files changed, 50 insertions, 22 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>