From 9557f9d508bf9bb61d4bb804084d6508f94e34f4 Mon Sep 17 00:00:00 2001 From: EuAndreh Date: Sun, 9 Apr 2023 08:37:00 -0300 Subject: v2: CSS dark mode, including SVGs --- v2/src/content/img/dark-mode.xml | 12 ++++++ v2/src/content/img/envelope.svg | 4 -- v2/src/content/img/envelope.svg.uncolored | 4 ++ v2/src/content/img/favicon.svg | 62 ------------------------------- v2/src/content/img/favicon.svg.uncolored | 62 +++++++++++++++++++++++++++++++ v2/src/content/img/link.svg | 5 --- v2/src/content/img/link.svg.uncolored | 5 +++ v2/src/content/img/linkto.svg | 7 ---- v2/src/content/img/linkto.svg.uncolored | 7 ++++ v2/src/content/img/lock.svg | 4 -- v2/src/content/img/lock.svg.uncolored | 4 ++ v2/src/content/style.css | 51 +++++++++++++++++++++---- 12 files changed, 138 insertions(+), 89 deletions(-) create mode 100644 v2/src/content/img/dark-mode.xml delete mode 100644 v2/src/content/img/envelope.svg create mode 100644 v2/src/content/img/envelope.svg.uncolored delete mode 100644 v2/src/content/img/favicon.svg create mode 100644 v2/src/content/img/favicon.svg.uncolored delete mode 100644 v2/src/content/img/link.svg create mode 100644 v2/src/content/img/link.svg.uncolored delete mode 100644 v2/src/content/img/linkto.svg create mode 100644 v2/src/content/img/linkto.svg.uncolored delete mode 100644 v2/src/content/img/lock.svg create mode 100644 v2/src/content/img/lock.svg.uncolored (limited to 'v2/src/content') diff --git a/v2/src/content/img/dark-mode.xml b/v2/src/content/img/dark-mode.xml new file mode 100644 index 0000000..7c2b572 --- /dev/null +++ b/v2/src/content/img/dark-mode.xml @@ -0,0 +1,12 @@ + + + diff --git a/v2/src/content/img/envelope.svg b/v2/src/content/img/envelope.svg deleted file mode 100644 index c2251f4..0000000 --- a/v2/src/content/img/envelope.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/v2/src/content/img/envelope.svg.uncolored b/v2/src/content/img/envelope.svg.uncolored new file mode 100644 index 0000000..c2251f4 --- /dev/null +++ b/v2/src/content/img/envelope.svg.uncolored @@ -0,0 +1,4 @@ + + + + diff --git a/v2/src/content/img/favicon.svg b/v2/src/content/img/favicon.svg deleted file mode 100644 index ce566b2..0000000 --- a/v2/src/content/img/favicon.svg +++ /dev/null @@ -1,62 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/v2/src/content/img/favicon.svg.uncolored b/v2/src/content/img/favicon.svg.uncolored new file mode 100644 index 0000000..ce566b2 --- /dev/null +++ b/v2/src/content/img/favicon.svg.uncolored @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/v2/src/content/img/link.svg b/v2/src/content/img/link.svg deleted file mode 100644 index e5c7050..0000000 --- a/v2/src/content/img/link.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - diff --git a/v2/src/content/img/link.svg.uncolored b/v2/src/content/img/link.svg.uncolored new file mode 100644 index 0000000..e5c7050 --- /dev/null +++ b/v2/src/content/img/link.svg.uncolored @@ -0,0 +1,5 @@ + + + + diff --git a/v2/src/content/img/linkto.svg b/v2/src/content/img/linkto.svg deleted file mode 100644 index d4d9fe1..0000000 --- a/v2/src/content/img/linkto.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - diff --git a/v2/src/content/img/linkto.svg.uncolored b/v2/src/content/img/linkto.svg.uncolored new file mode 100644 index 0000000..d4d9fe1 --- /dev/null +++ b/v2/src/content/img/linkto.svg.uncolored @@ -0,0 +1,7 @@ + + + + + diff --git a/v2/src/content/img/lock.svg b/v2/src/content/img/lock.svg deleted file mode 100644 index 1a4a18e..0000000 --- a/v2/src/content/img/lock.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/v2/src/content/img/lock.svg.uncolored b/v2/src/content/img/lock.svg.uncolored new file mode 100644 index 0000000..1a4a18e --- /dev/null +++ b/v2/src/content/img/lock.svg.uncolored @@ -0,0 +1,4 @@ + + + + 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; -- cgit v1.2.3