From f34df498c517a462aad98f2ab528a6d15974e46c Mon Sep 17 00:00:00 2001 From: Matt Arnold Date: Thu, 10 Apr 2025 19:24:21 -0400 Subject: The great ui commit css crimes --- static/style.css | 131 ++++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 111 insertions(+), 20 deletions(-) (limited to 'static') diff --git a/static/style.css b/static/style.css index 8e258e5..affd975 100644 --- a/static/style.css +++ b/static/style.css @@ -1,34 +1,125 @@ -body { - font-family: Arial, sans-serif; - margin: 0; - padding: 0; - background-color: #f4f4f4; +main { + font-family: monospace, monospace; + max-width: 38rem; + padding: 2rem; + margin: auto; } header { - background-color: #333; - color: #fff; - padding: 1rem; + max-width: 50rem; + padding: 2rem; + margin: auto; + background-color: #040529; + color: #9978fc; } -header h1 { - margin: 0; +@media only screen and (max-device-width: 736px) { + main { + padding: 0rem; + } + + header { + padding: 0rem; + } } -header a { - color: #fff; - text-decoration: none; +::selection { + background: #d3869b; } -main { - padding: 1rem; +body { + background: #282828; + color: #ebdbb2; +} + +pre { + background-color: #3c3836; + padding: 1em; + border: 0; +} + +a, +a:active, +a:visited { + color: #b16286; + background-color: #1d2021; +} + +h1, +h2, +h3, +h4, +h5 { + margin-bottom: .1rem; +} + +blockquote { + border-left: 1px solid #bdae93; + margin: 0.5em 10px; + padding: 0.5em 10px; +} + +footer { + text-align: center; +} + +@media (prefers-color-scheme: light) { + body { + background: #fbf1c7; + color: #3c3836; + } + + pre { + background-color: #ebdbb2; + padding: 1em; + border: 0; + } + + a, + a:active, + a:visited { + color: #b16286; + background-color: #f9f5d7; + } + + h1, + h2, + h3, + h4, + h5 { + margin-bottom: .1rem; + } + + blockquote { + border-left: 1px solid #655c54; + margin: 0.5em 10px; + padding: 0.5em 10px; + } +} + +/* Style the button that is used to open and close the collapsible content */ +.collapsible { + background-color: #eee; + color: #444; + cursor: pointer; + padding: 18px; + width: 100%; + border: none; + text-align: left; + outline: none; + font-size: 15px; } -a { - color: #333; - text-decoration: none; +/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ +.active, +.collapsible:hover { + background-color: #ccc; } -a:hover { - text-decoration: underline; +/* Style the collapsible content. Note: hidden by default */ +.content { + padding: 0 18px; + display: none; + overflow: hidden; + background-color: #f1f1f1; } \ No newline at end of file -- cgit 1.4.1-2-gfad0