From 49285301aca568d045fdbd3c3f9f03f9ec176843 Mon Sep 17 00:00:00 2001 From: Nikolas Date: Sat, 16 Nov 2024 18:51:15 +0000 Subject: simplify css --- static/neat.min.css | 158 ---------------------------------------------------- static/styles.css | 73 ++++++++++++++++++++++++ 2 files changed, 73 insertions(+), 158 deletions(-) delete mode 100644 static/neat.min.css create mode 100644 static/styles.css (limited to 'static') diff --git a/static/neat.min.css b/static/neat.min.css deleted file mode 100644 index 15e21f2..0000000 --- a/static/neat.min.css +++ /dev/null @@ -1,158 +0,0 @@ -* { - 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 diff --git a/static/styles.css b/static/styles.css new file mode 100644 index 0000000..5fa959e --- /dev/null +++ b/static/styles.css @@ -0,0 +1,73 @@ +html { + --lesslight: #efefef; + --dark: #404040; + --moredark: #000; + line-height: 1.4em; + font-family: sans-serif; + font-size: 16px; + color: var(--dark); +} + +pre { + background-color: var(--lesslight); + margin: 0.5em 0 0.5em 0; + padding: 0.5em; + overflow: auto; +} + +code { + background-color: var(--lesslight); +} + +body { + margin: 0; + max-width: 800px; + padding: 0 20px 20px 20px; + margin-left: auto; + margin-right: auto; +} + +a { + outline: none; + color: var(--moredark); +} + +img { + max-width: 100%; + height: auto; + max-height: 40rem; +} + +.center { + display: block; + margin-left: auto; + margin-right: auto; + text-align: center; +} + + +/* 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; + } +} \ No newline at end of file -- cgit v1.2.3