diff options
Diffstat (limited to 'site.css')
-rw-r--r-- | site.css | 58 |
1 files changed, 50 insertions, 8 deletions
@@ -1,6 +1,36 @@ +:root { + --background-color: #fff; + --text-color: #333; + --muted-color: #999; + --accent-color: #ccc; + --link-color: #09e; + --header-color: #4a0; +} + +@media print { + :root { + --background-color: #fff; + --text-color: #000; + --muted-color: #000; + --accent-color: rgba(0, 0, 0, 0); + --link-color: #000; + --header-color: #000; + } +} + +@media (prefers-color-scheme: dark) { + :root { + --background-color: #222; + --text-color: #bbb; + --muted-color: #999; + --accent-color: #666; + } +} + html { + background-color: var(--background-color); font-family: sans-serif; - color: #333; + color: var(--text-color); padding: 0; margin: 0; } @@ -10,7 +40,7 @@ body { margin: 0; } -main, footer { +main { max-width: 600px; margin-left: auto; margin-right: auto; @@ -18,22 +48,34 @@ main, footer { } a { - color: #07c; + color: var(--link-color); } -h1, h2 { - color: #390; +h1, +h2, +h1 a, +h2 a { + color: var(--header-color); } p, li { - line-height: 1.3; + line-height: 1.5; } li { margin-bottom: 1em; } +aside { + padding: 0 1em; + margin: 2em 0; + font-size: 1.2em; + border-left: 5px solid var(--accent-color); +} + footer { - border-top: 2px solid #999; - color: #999; + border-top: 2px solid var(--accent-color); + color: var(--muted-color); + padding-top: 1em; + font-size: 0.9em; } |