summaryrefslogtreecommitdiff
path: root/source
diff options
context:
space:
mode:
Diffstat (limited to 'source')
-rw-r--r--source/_includes/footer.html11
-rw-r--r--source/_includes/header.html38
-rw-r--r--source/_includes/navigation.html9
-rw-r--r--source/_includes/preamble.html2
-rw-r--r--source/_includes/proof/start.html12
-rw-r--r--source/_layouts/default.html26
-rw-r--r--source/infra/css/main.css231
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;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-31 05:54:35 +0000