From 03accd13c0a6ec4de2d8001edf3ce7553f831160 Mon Sep 17 00:00:00 2001 From: Prefetch Date: Tue, 27 Sep 2022 21:20:05 +0200 Subject: Clean up CSS, minor design changes --- static/logo256.png | Bin 0 -> 7152 bytes static/logo256x256.gif | Bin 2061 -> 0 bytes static/main.css | 127 +++++++++++++++++++++++++++++++++++++------------ 3 files changed, 96 insertions(+), 31 deletions(-) create mode 100644 static/logo256.png delete mode 100644 static/logo256x256.gif (limited to 'static') diff --git a/static/logo256.png b/static/logo256.png new file mode 100644 index 0000000..d6b9961 Binary files /dev/null and b/static/logo256.png differ diff --git a/static/logo256x256.gif b/static/logo256x256.gif deleted file mode 100644 index a778340..0000000 Binary files a/static/logo256x256.gif and /dev/null differ diff --git a/static/main.css b/static/main.css index b9ac894..f275aa6 100644 --- a/static/main.css +++ b/static/main.css @@ -1,34 +1,99 @@ +/* Colour scheme */ +:root { + --b: #ededed; + --f: #121212; + --a: #0000ff; +} +.darkinv {} +@media only screen and (prefers-color-scheme: dark) { + :root { + --b: #121212; + --f: #ededed; + --a: #ffff00; + } + .darkinv {filter: invert(100%)} +} + +/* Basic elements */ body { - background:#e3e3e3; - color:#161616; - max-width:80ch; - margin:auto; - padding:1em 0; - font-family:sans-serif; -} -h1,h2,h3 {text-align:center} -h1 {font-size:200%;} -h2 {font-size:160%;} -h3 {font-size:120%;} -a {text-decoration:none;color:#0000ff;} -.noha a:link, .noha a:visited {color:#161616;} -.noha a:hover, .noha a:focus, .noha a:active {color:#0000ff;} -.nav {height:3rem;font-size:250%;} -.navl {float:left;text-align:left;} -.navr {float:right;text-align:right;} -.footl {float:left;text-align:left;} -.footr {float:right;text-align:right;} -pre {filter:invert(100%);} -@media (prefers-color-scheme: dark) { - body {background:#161616;filter:invert(100%);} + background: #ededed; + background: var(--b); + color: #121212; + color: var(--f); + + max-width: 80ch; + margin: auto; + padding: 1rem 0; + + font-family: sans-serif; + line-height: 1.5; +} +h1,h2,h3 {text-align: center;} +h1 {font-size: 2.0rem;} +h2 {font-size: 1.6rem;} +h3 {font-size: 1.2rem;} +a { + text-decoration: none; + color: #0000ff; + color: var(--a); +} +img { + display: block; + max-width: 100%; + height: auto; + margin: auto; +} + +/* Header and footer */ +.nav { + height: 3rem; + font-size: 2.4rem; + padding: 0.25rem 0; +} +.navl { + float: left; + text-align: left; +} +.navr { + float: right; + text-align: right; +} +@media only screen and (max-width: 64ch) { + .navl {width: 100%;} + .navr { + width: 100%; + font-size: 1.8rem; + } +} +.footl { + float: left; + text-align: left; +} +.footr { + float: right; + text-align: right; +} +.noha a:link, .noha a:visited { + color: #121212; + color: var(--f); +} +.noha a:hover, .noha a:focus, .noha a:active { + color: #0000ff; + color: var(--a); +} + +/* Collapsible boxes */ +label { + color: #0000ff; + color: var(--a); + cursor: pointer; } .accordion { - display:block; - padding:0ch 1ch; - border-style:dotted; -} -input {display:none;} -label {color:#0000ff;cursor:pointer;} -input + label + .hidden {display:none;} -input:checked + label {display:none;} -input:checked + label + .hidden {display:block;} + display: block; + padding: 0 0.5rem; + border-style: dotted; +} +input {display: none;} +input + label + .hidden {display: none;} +input:checked + label {display: none;} +input:checked + label + .hidden {display: block;} -- cgit v1.2.3