aboutsummaryrefslogtreecommitdiff
path: root/v2/src/content/style.css
diff options
context:
space:
mode:
authorEuAndreh <eu@euandre.org>2023-04-09 08:37:00 -0300
committerEuAndreh <eu@euandre.org>2023-04-09 08:47:40 -0300
commit9557f9d508bf9bb61d4bb804084d6508f94e34f4 (patch)
tree49913ee12da48bcb13d036826c94939c32e7e108 /v2/src/content/style.css
parentv2: i18n of the collection name, "article" collection in root (diff)
downloadeuandre.org-9557f9d508bf9bb61d4bb804084d6508f94e34f4.tar.gz
euandre.org-9557f9d508bf9bb61d4bb804084d6508f94e34f4.tar.xz
v2: CSS dark mode, including SVGs
Diffstat (limited to 'v2/src/content/style.css')
-rw-r--r--v2/src/content/style.css51
1 files changed, 44 insertions, 7 deletions
diff --git a/v2/src/content/style.css b/v2/src/content/style.css
index 0ec67a8..7797065 100644
--- a/v2/src/content/style.css
+++ b/v2/src/content/style.css
@@ -1,11 +1,48 @@
+/* Colors */
+
+:root {
+ --color: black;
+ --background-color: white;
+ --nav-color: hsl(0, 100%, 25%);
+ --fade-color: #555;
+ --quote-color: hsl(0, 0%, 41%);
+ --code-border-color: hsla(0, 0%, 0%, 0.3);
+ --link-color: #0000ee;
+ --link-color-visited: #551a8b;
+}
+
+@media(prefers-color-scheme: dark) {
+ :root {
+ --color: white;
+ --background-color: black;
+ --fade-color: #aaa;
+ --nav-color: hsl(0, 100%, 75%);
+ --quote-color: hsl(0, 0%, 59%);
+ --code-border-color: hsla(0, 0%, 100%, 0.3);
+ --link-color: hsl(211, 100%, 60%);
+ --link-color-visited: hsl(242, 100%, 80%);
+ }
+}
+
+
/* General declarations */
body {
+ color: var(--color);
+ background-color: var(--background-color);
margin: 0px auto;
padding: 1%;
max-width: 750px;
}
+a {
+ color: var(--link-color);
+}
+
+a:visited {
+ color: var(--link-color-visited);
+}
+
.svg-icon {
vertical-align: middle;
}
@@ -14,7 +51,7 @@ body {
/* Navigation header */
nav a {
- color: maroon;
+ color: var(--nav-color);
font-size: 18px;
margin: 12px;
text-decoration: none;
@@ -25,7 +62,7 @@ nav ul, nav li {
}
nav ul li a {
- color: black;
+ color: var(--color);
font-size: 14px;
margin: 6px;
}
@@ -34,14 +71,14 @@ nav ul li a {
/* Article bodies */
.timestamp {
- color: #555;
+ color: var(--fade-color);
font-size: 14px;
font-style: italic;
}
blockquote {
font-style: italic;
- color: dimgrey;
+ color: var(--quote-color);
padding-left: 10px;
border-left: 3px solid #ccc;
}
@@ -81,7 +118,7 @@ footer li a {
margin-right: 3px;
padding-right: 3px;
border-right: 1px solid;
- border-color: hsla(0, 0%, 0%, 0.3);
+ border-color: var(--code-border-color);
text-align: right;
user-select: none;
}
@@ -108,7 +145,7 @@ pre {
/* Code block anchors */
.line-number a, a.code-line-anchor {
- color: black;
+ color: var(--color);
text-decoration: none;
}
@@ -120,7 +157,7 @@ a.code-line-anchor:hover {
/* Header anchor */
.header-anchor {
- color: black;
+ color: var(--color);
text-decoration: none;
display: block;
margin-bottom: 15px;