diff options
author | Michał M. Sapka <michal@sapka.me> | 2023-03-04 00:33:33 +0100 |
---|---|---|
committer | Michał M. Sapka <michal@sapka.me> | 2023-03-04 00:33:33 +0100 |
commit | 9cace0982a14f4c8a83371c7edf2b2acfa3843cb (patch) | |
tree | 5a090ddfe58dc3becdfee1578a9c06be82947190 /static | |
parent | 03ab8024ac302847d0608c141dc1d306cc74d119 (diff) |
chore: extract colors to vars
in preparation for dark mode
Diffstat (limited to 'static')
-rw-r--r-- | static/style.css | 34 |
1 files changed, 25 insertions, 9 deletions
diff --git a/static/style.css b/static/style.css index 557b4c5..5e4f35c 100644 --- a/static/style.css +++ b/static/style.css @@ -1,10 +1,25 @@ -::root { +:root { --menu-bg: #fff; --site-bg: #fff; --text-color: #000; --link-color: #000; + + --article-bg: ##fcfcfc; + --article-border-color: #f3f1f1; + --article-shadow-color: rgba(0,0,0,0.42); + + --h2-color: #000000; + + --blockquote-border-color: #d2d2d2; + --blockquote-color: ##666666; + + --pre-bg: #f0f0f0; } +@media (prefers-color-scheme: dark) { + :root { + } +} /* ----------- Entire site */ body { font-family: 'helvetica'; @@ -77,7 +92,7 @@ h1 { height: 40px; } } - +p /* ----------- Main navigation */ .left-column nav { margin-top: 30px; @@ -148,11 +163,11 @@ main { article { margin-bottom: 20px; padding: 25px; - background-color: ##fcfcfc; + background-color: var(--article-bg); border-style: solid; - border-color: #f3f1f1; + border-color: var(--article-border-color); border-radius: 3px; - box-shadow: -1px 8px 35px -18px rgba(0,0,0,0.42); + box-shadow: -1px 8px 35px -18px var(--article-shadow-color); line-height: 1.32em; } article p { @@ -171,24 +186,25 @@ h2 { text-align: left; padding: 0; margin: 0; - color: #000000; + color: var(--h2-color); font-size: 1.5em; + line-height: 35px; } blockquote { border: 0; border-left: 3px; border-style: solid; - border-color: #d2d2d2; + border-color: var(--blockquote-border-color); margin-left: 15px; padding-left: 15px; - color: #666666; + color: var(--blockquote-color); } pre { width: 93%; padding-bottom: 5px; white-space: pre-wrap; padding: 11px; - background-color: #f0f0f0; + background-color: var(--pre-bg); word-break: keep-all; } |