diff options
Diffstat (limited to 'source/infra/css')
| -rw-r--r-- | source/infra/css/main.css | 231 |
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; +} |