From 84522ccb19d952799abe6c057335b820fd1a101c Mon Sep 17 00:00:00 2001 From: Nikolas Date: Mon, 28 Oct 2024 18:14:19 +0200 Subject: replace simple.css with neat.css --- static/neat.min.css | 158 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 158 insertions(+) create mode 100644 static/neat.min.css (limited to 'static/neat.min.css') diff --git a/static/neat.min.css b/static/neat.min.css new file mode 100644 index 0000000..15e21f2 --- /dev/null +++ b/static/neat.min.css @@ -0,0 +1,158 @@ +* { + box-sizing: border-box; +} + +:root { + color-scheme: light dark; + --light: #fff; + --lesslight: #efefef; + --dark: #404040; + --moredark: #000; + --link: royalblue; + border-top: 5px solid var(--dark); + line-height: 1.5em; + font-family: system-ui, sans-serif; + font-size: 16px; + color: var(--dark); +} + +h1 { + line-height: 1em; +} + +button, input { + font-size: 1em; /* Override browser default font shrinking*/ +} + +input { + border: 1px solid var(--dark); + background-color: var(--lesslight); + border-radius: .25em; + padding: .5em; +} + +pre { + background-color: var(--lesslight); + margin: 0.5em 0 0.5em 0; + padding: 0.5em; + overflow: auto; +} + +code { + background-color: var(--lesslight); +} + +body { + background-color: var(--light); + margin: 0; + max-width: 800px; + padding: 0 20px 20px 20px; + margin-left: auto; + margin-right: auto; +} + +a { + outline: none; + color: var(--dark); +} + +a:hover { + text-decoration-color: var(--link); +} + +img { + max-width: 100%; + height: auto; +} + +button, .button, input[type=submit] { + display: inline-block; + background-color: var(--dark); + color: var(--light); + text-align: center; + padding: .5em; + border-radius: .25em; + text-decoration: none; + border: none; + cursor: pointer; +} + +button:hover, .button:hover, input[type=submit]:hover { + color: var(--lesslight); + background-color: var(--moredark); +} + +/* Add a margin between side-by-side buttons */ +button + button, .button + .button, input[type=submit] + input[type=submit] { + margin-left: 1em; +} + +.center { + display: block; + margin-left: auto; + margin-right: auto; + text-align: center; +} + +.bordered { + border: 3px solid; +} + +.home { + display: inline-block; + background-color: var(--dark); + color: var(--light); + margin-top: 20px; + padding: 5px 10px 5px 10px; + text-decoration: none; + font-weight: bold; +} + + +/* Desktop sizes */ +@media (min-width: 600px) { + ol.twocol { + column-count: 2; + } + + .row { + display: flex; + flex-direction: row; + padding: 0; + width: 100%; + } + + /* Make everything in a row a column */ + .row > * { + display: block; + flex: 1 1 auto; + max-width: 100%; + width: 100%; + } + + .row > *:not(:last-child) { + margin-right: 10px; + } +} + +/* Dark mode overrides (confusingly inverse) */ +@media (prefers-color-scheme: dark) { + :root { + --light: #222; + --lesslight: #333; + --dark: #eee; + --moredark: #fefefe; + } + /* This fixes an odd blue then white shadow on FF in dark mode */ + *:focus { + outline: var(--light); + box-shadow: 0 0 0 .25em var(--link); + } +} + +/* Printing */ +@media print { + .home { + display: none; + } +} \ No newline at end of file -- cgit v1.2.3