From 7edaa33d1b9aef05fedc82375ca010461c009edf Mon Sep 17 00:00:00 2001
From: Prefetch
Date: Fri, 3 Mar 2023 14:09:23 +0100
Subject: Mobile-friendly header redesign, CSS improvements
---
source/infra/css/main.css | 231 ++++++++++++++++++++++++++++++++++++----------
1 file changed, 184 insertions(+), 47 deletions(-)
(limited to 'source/infra/css')
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;
+}
--
cgit v1.2.3