summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPatrick Spek <p.spek@tyil.nl>2022-02-14 18:09:38 +0100
committerPatrick Spek <p.spek@tyil.nl>2022-02-14 18:09:38 +0100
commit6437efd5c5f8b8d9f16b5450f6e5cfcbbdfe01ab (patch)
treef9078bdb83ccca8f928b2d271e181d5b16f6ee02
parent0d2bb0722ce17dae784088347d7d59e402e80c9d (diff)
downloadblog-6437efd5c5f8b8d9f16b5450f6e5cfcbbdfe01ab.tar.gz
blog-6437efd5c5f8b8d9f16b5450f6e5cfcbbdfe01ab.tar.bz2
Update CSS
-rw-r--r--assets/theme/main.scss48
1 files changed, 31 insertions, 17 deletions
diff --git a/assets/theme/main.scss b/assets/theme/main.scss
index 9cc1d1b..fd244ce 100644
--- a/assets/theme/main.scss
+++ b/assets/theme/main.scss
@@ -1,18 +1,32 @@
// Variables
-$bodyBackgroundColor: #fefefe;
-$bodyTextColor: #454545;
-$linkColor: #07a;
-$blockBackgroundColor: #f6f6f6;
-$blockBorderColor: #d7d7d7;
$mainWidth: 900px;
+// Colors
+@media (prefers-color-scheme: light) {
+ :root {
+ --bodyBackgroundColor: #d7d5d1;
+ --bodyForegroundColor: #2a2e2f;
+ --blockBackgroundColor: #c2beb9;
+ --linkForegroundColor: #07a;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --BodyBackgroundColor: #131516;
+ --BodyForegroundColor: #bcb7ae;
+ --BlockBackgroundColor: #1c1e1f;
+ --linkForegroundColor: #07a;
+ }
+}
+
// Actual CSS
html {
- background-color: $bodyBackgroundColor;
+ background-color: var(--bodyBackgroundColor);
}
body {
- color: $bodyTextColor;
+ color: var(--bodyForegroundColor);
font-size: 16px;
line-height: 1.4;
text-align: justify;
@@ -64,8 +78,8 @@ article {
}
section.admonition {
- background-color: #f6f6f6;
- border: 1px solid #d7d7d7;
+ background-color: var(--blockBackgroundColor);
+ border: 1px solid var(--bodyForegroundColor);
margin: .5rem auto 1.74rem auto;
width: 85%;
max-width: $mainWidth * .9;
@@ -122,7 +136,7 @@ section.admonition {
// Navigation bar
nav {
padding-bottom: 8px;
- border-bottom: double $bodyTextColor;
+ border-bottom: double var(--bodyForegroundColor);
text-align: center;
font-family: Sans;
@@ -130,7 +144,7 @@ nav {
margin: 0 0.5em;
font-size: 24px;
text-decoration: none;
- color: $bodyTextColor;
+ color: var(--bodyForegroundColor);
}
.brand-name {
@@ -138,20 +152,20 @@ nav {
display: block;
font-weight: bold;
font-size: 32px;
- color: $bodyTextColor;
+ color: var(--bodyForegroundColor);
margin-bottom: 8px;
}
}
// Generic links
a, a:visited {
- color: $linkColor;
+ color: var(--linkForegroundColor);
}
// Syntax highlighting
div.highlight {
- border: 2px solid $blockBorderColor;
- background-color: $blockBackgroundColor;
+ border: 2px solid var(--bodyForegroundColor);
+ background-color: var(--blockBackgroundColor);
width: 90%;
margin: 0 auto;
overflow-x: auto;
@@ -162,7 +176,7 @@ div.highlight {
}
.code-link {
- border-top: 1px dotted $blockBorderColor;
+ border-top: 1px dotted var(--bodyForegroundColor);
padding: 3px 8px;
text-align: right;
}
@@ -186,7 +200,7 @@ pre code {
margin: .5rem auto;
border-left: double black;
padding: 0.5em;
- background-color: $blockBackgroundColor;
+ background-color: var(--blockBackgroundColor);
blockquote {
font-style: italic;