summaryrefslogtreecommitdiff
path: root/templates
diff options
context:
space:
mode:
authorSteph Enders <steph@senders.io>2024-03-10 16:02:06 -0400
committerSteph Enders <steph@senders.io>2024-03-10 16:02:06 -0400
commit99e582d5fa60537fe73c8e6f5bdf0de60871a134 (patch)
treedfbc1ed73b78094de34b222ac7820b482bedeeac /templates
parent39e99cd01628128a79810ab043b440424d7afde8 (diff)
Added darkmode theme for website!
Diffstat (limited to 'templates')
-rw-r--r--templates/index.css65
1 files changed, 51 insertions, 14 deletions
diff --git a/templates/index.css b/templates/index.css
index 911fe58..25f0ddb 100644
--- a/templates/index.css
+++ b/templates/index.css
@@ -1,20 +1,50 @@
:root {
- --blue: #7BD3EA;
- --green: #A1EEBD;
- --pink: #F6D6D6;
+ --accent-color: #7BD3EA;
+ --primary-color: #A1EEBD;
+ --secondary-color: #F6D6D6;
--bg-color: #ffffeb;
--color: black;
--code-color: white;
--quote-color: #aaa;
--quote-text: black;
--footer-text: black;
- --border-color: var(--pink);
- --article-border-color: var(--green);
- --article-border-outset-color: var(--blue);
+ --border-color: var(--secondary-color);
+ --article-border-color: var(--primary-color);
+ --article-border-outset-color: var(--accent-color);
--main-width: 800px;
}
+@media (prefers-color-scheme: dark) {
+ :root {
+ --accent-color: #7BD3EA;
+ --primary-color: #A1EEBD;
+ --secondary-color: #BE90FF;
+ --bg-color: #2d2d2d;
+ --color: #fff;
+ --code-color: #1b1b4f;
+ --code-color: #3e3e53;
+ --quote-color: #999;
+ --quote-text: #fff;
+ --footer-text: black;
+ --border-color: var(--secondary-color);
+ --article-border-color: var(--primary-color);
+ --article-border-outset-color: var(--accent-color);
+ }
+
+ a {
+ color: var(--accent-color);
+ }
+
+ a:focus {
+ color: var(--secondary-color);
+ }
+
+ a:visited {
+ color: var(--accent-color);
+ }
+}
+
/* #261c35 # darkmode bg-color */
/* #ffa # links */
/* #3E7 or this? */
@@ -36,8 +66,8 @@ html, body {
font-size: 3em;
text-decoration: underline;
text-decoration-style: wavy;
- text-decoration-color: var(--pink);
- color: #000;
+ text-decoration-color: var(--secondary-color);
+ color: var(--color);
font-family: monospace;
}
@@ -69,7 +99,7 @@ main article h1 {
}
main footer {
- background-color: var(--pink);
+ background-color: var(--secondary-color);
margin: 16px 0;
padding: 2px 16px;
color: var(--footer-text);
@@ -104,11 +134,18 @@ pre, code {
main article figure blockquote {
padding: 8px;
- background-color: var(--pink);
- box-shadow: 8px 8px var(--blue);
+ background-color: var(--secondary-color);
+ box-shadow: 8px 8px var(--accent-color);
color: var(--quote-text);
}
+@media (prefers-color-scheme: dark) {
+ main article figure blockquote {
+ background-color: var(--bg-color);
+ border: 4px solid var(--secondary-color);
+ }
+}
+
main article figure blockquote p:before {
content: '“';
font-size: 2em;
@@ -135,7 +172,7 @@ main article figure blockquote cite {
}
hr {
- border-color: var(--pink);
+ border-color: var(--secondary-color);
border-style: solid;
}
@@ -143,11 +180,11 @@ main article table {
border-collapse: collapse;
}
main article table thead {
- background-color: var(--green);
+ background-color: var(--primary-color);
}
main article table tr td,
main article table tr th {
- border: 1px solid var(--blue);
+ border: 1px solid var(--accent-color);
padding: 2px 8px;
}