summaryrefslogtreecommitdiff
path: root/static
diff options
context:
space:
mode:
authorMichał M. Sapka <michal@sapka.me>2023-03-04 00:33:33 +0100
committerMichał M. Sapka <michal@sapka.me>2023-03-04 00:33:33 +0100
commit9cace0982a14f4c8a83371c7edf2b2acfa3843cb (patch)
tree5a090ddfe58dc3becdfee1578a9c06be82947190 /static
parent03ab8024ac302847d0608c141dc1d306cc74d119 (diff)
chore: extract colors to vars
in preparation for dark mode
Diffstat (limited to 'static')
-rw-r--r--static/style.css34
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;
}