paritybit.ca

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

commit 40146bd9f4fdcac68cfe67e87206c62c3881f987
parent bf0cb7f5eb90ece6533fda100f067410e45d713c
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Fri, 31 Dec 2021 14:37:02 -0500

Add light theme

Diffstat:
Mbuild/footer.html | 2+-
Mstyle/main.css | 89+++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------
2 files changed, 65 insertions(+), 26 deletions(-)

diff --git a/build/footer.html b/build/footer.html @@ -1 +1 @@ -</main><hr><footer><small><div style="float:left"><a href="https://fediring.net/previous?host=www.paritybit.ca">←</a> <a href="https://fediring.net/">Fediring</a> <a href="https://fediring.net/next?host=www.paritybit.ca">→</a></div><center>© 2019-2021 Jake Bauer — <a href="https://creativecommons.org/licenses/by/4.0/legalcode">CC-BY 4.0</a> <a href="https://webring.xxiivv.com/#paritybit" target="_blank" style="float:right"><img src="/img/icon.white.svg" width="20px" height="20px" alt="XXIIVV webring"/></a></center></small></footer></body></html> +</main><hr><footer><small><div style="float:left"><a href="https://fediring.net/previous?host=www.paritybit.ca">←</a> <a href="https://fediring.net/">Fediring</a> <a href="https://fediring.net/next?host=www.paritybit.ca">→</a></div><center>© 2019-2021 Jake Bauer — <a href="https://creativecommons.org/licenses/by/4.0/legalcode">CC-BY 4.0</a> <a href="https://webring.xxiivv.com/#paritybit" target="_blank" style="float:right"><img id="xxiivv-icon" src="/img/icon.white.svg" width="20px" height="20px" alt="XXIIVV webring"/></a></center></small></footer></body></html> diff --git a/style/main.css b/style/main.css @@ -11,7 +11,6 @@ body { header { text-align: center; - clear: both; margin: 0.7em auto; font-size: 2em; font-weight: bold; @@ -40,13 +39,16 @@ nav a { text-decoration: none; } +nav a:hover { + text-decoration: underline; +} + a, nav a:visited { color: #83b3d8; } -a:hover, li a:hover, nav a:hover { - color: #b3e8ff !important; - text-decoration: underline; +a:hover { + text-decoration: none; } a:visited { @@ -68,16 +70,15 @@ figcaption { } input { - color: #ddd; - background-color: #363636; - padding: 0.2em; + color: #ccc; + background-color: #333; + border: 2px inset #585858; } button { - color: #ddd; + color: #ccc; background-color: #333; border: 2px outset #585858; - padding: 0.2em 0.4em; } button:hover { @@ -92,31 +93,21 @@ table, th, td { border: 2px solid #585858; border-collapse: collapse; text-align: left; - padding: 0.25em 0.5em; } th { - color: #ddd; background-color: #363636; } .byline { font-size: 0.9rem; - margin-bottom: 16px; -} - -.rss-icon { - display: inline-block; - margin-left: 0.5em; } .note { background-color: #245; - color: #ddd; border-radius: 5px; box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.5); - padding: 20px 30px; - margin-bottom: 10px; + padding: 15px 20px; } .note a, .note a:visited{ @@ -126,10 +117,8 @@ th { #table-of-contents { float: right; - margin: 0em 0em 1em 1em; width: 45%; border: 2px #585858 solid; - border-radius: 5px; background-color: #363636; } @@ -143,16 +132,13 @@ pre { background-color: #333; overflow: auto; padding: 0.5em; - text-indent: -0.25em; /*Needed otherwise first line indented for some reason*/ line-height: 1.1rem; } code { font-family: "IBM Plex Mono", monospace; font-size: 0.9rem; - color: #ddd; background-color: #333; - padding: 1px 4px; } @media print { @@ -178,3 +164,56 @@ code { margin-top: 1.5em; } } + +@media (prefers-color-scheme: light) { + body { + background-color: #fcfcfc; + color: #111; + } + a, nav a:visited { + color: #134799; + } + a:visited { + color: #551a8b; + } + blockquote { + border-left: 3px solid #134799; + } + input { + color: #111; + background-color: #eee; + border: 2px inset #aaa; + } + button { + color: #111; + background-color: #eee; + border: 2px outset #aaa; + } + button:hover { + border: 2px outset #134799; + } + button:active { + border: 2px inset #aaa; + } + th { + background-color: #ccc; + } + .note { + background-color: #69a; + } + .note a, .note a:visited{ + color: #111; + } + #table-of-contents { + background-color: #eee; + } + pre { + background-color: #ccc; + } + code { + background-color: #ccc; + } + #xxiivv-icon { + filter: invert(1); + } +}