diff options
author | EuAndreh <eu@euandre.org> | 2023-04-09 08:37:00 -0300 |
---|---|---|
committer | EuAndreh <eu@euandre.org> | 2023-04-09 08:47:40 -0300 |
commit | 9557f9d508bf9bb61d4bb804084d6508f94e34f4 (patch) | |
tree | 49913ee12da48bcb13d036826c94939c32e7e108 /v2/src | |
parent | v2: i18n of the collection name, "article" collection in root (diff) | |
download | euandre.org-9557f9d508bf9bb61d4bb804084d6508f94e34f4.tar.gz euandre.org-9557f9d508bf9bb61d4bb804084d6508f94e34f4.tar.xz |
v2: CSS dark mode, including SVGs
Diffstat (limited to 'v2/src')
-rwxr-xr-x | v2/src/bin/makemake | 19 | ||||
-rw-r--r-- | v2/src/content/img/dark-mode.xml | 12 | ||||
-rw-r--r-- | v2/src/content/img/envelope.svg.uncolored (renamed from v2/src/content/img/envelope.svg) | 0 | ||||
-rw-r--r-- | v2/src/content/img/favicon.svg.uncolored (renamed from v2/src/content/img/favicon.svg) | 0 | ||||
-rw-r--r-- | v2/src/content/img/link.svg.uncolored (renamed from v2/src/content/img/link.svg) | 0 | ||||
-rw-r--r-- | v2/src/content/img/linkto.svg.uncolored (renamed from v2/src/content/img/linkto.svg) | 0 | ||||
-rw-r--r-- | v2/src/content/img/lock.svg.uncolored (renamed from v2/src/content/img/lock.svg) | 0 | ||||
-rw-r--r-- | v2/src/content/style.css | 51 | ||||
-rw-r--r-- | v2/src/lib/category-header.html | 2 | ||||
-rw-r--r-- | v2/src/lib/index-postamble.html | 2 | ||||
-rw-r--r-- | v2/src/lib/index-preamble.html | 2 |
11 files changed, 76 insertions, 12 deletions
diff --git a/v2/src/bin/makemake b/v2/src/bin/makemake index 06041b0..3f4679d 100755 --- a/v2/src/bin/makemake +++ b/v2/src/bin/makemake @@ -182,9 +182,23 @@ for lang in $(langs); do printf '\n' done + git ls-files | - grep '\.page' | - sed "s|^$CONTENT_PREFIX\(.*\)\.page|\1.md|" > "$CONTENT_PREFIX"/.gitignore + grep '\.uncolored' | + varlist 'svgs.uncolored' +# shellcheck disable=2016 +printf 'svgs = $(svgs.uncolored:.uncolored=)\n\n' + + +{ + git ls-files | + grep '\.page' | + sed "s|^$CONTENT_PREFIX\(.*\)\.page|\1.md|" + + git ls-files | + grep '\.uncolored' | + sed "s|^$CONTENT_PREFIX\(.*\)\.uncolored|\1|" +} > "$CONTENT_PREFIX"/.gitignore for e in $(extensions '.categories' '.extrahtml' '.extrafeeds' '.index' '.xml'); do @@ -211,4 +225,5 @@ git ls-files src/ | git ls-files "$CONTENT_PREFIX"/ | grep -v '\.md$' | grep -v '\.page$' | + grep -v '\.uncolored$' | varlist 'static-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 @@ + <defs> + <style> + path { + fill: black; + } + @media(prefers-color-scheme: dark) { + path { + fill: white; + } + } + </style> + </defs> diff --git a/v2/src/content/img/envelope.svg b/v2/src/content/img/envelope.svg.uncolored index c2251f4..c2251f4 100644 --- a/v2/src/content/img/envelope.svg +++ b/v2/src/content/img/envelope.svg.uncolored diff --git a/v2/src/content/img/favicon.svg b/v2/src/content/img/favicon.svg.uncolored index ce566b2..ce566b2 100644 --- a/v2/src/content/img/favicon.svg +++ b/v2/src/content/img/favicon.svg.uncolored diff --git a/v2/src/content/img/link.svg b/v2/src/content/img/link.svg.uncolored index e5c7050..e5c7050 100644 --- a/v2/src/content/img/link.svg +++ b/v2/src/content/img/link.svg.uncolored diff --git a/v2/src/content/img/linkto.svg b/v2/src/content/img/linkto.svg.uncolored index d4d9fe1..d4d9fe1 100644 --- a/v2/src/content/img/linkto.svg +++ b/v2/src/content/img/linkto.svg.uncolored diff --git a/v2/src/content/img/lock.svg b/v2/src/content/img/lock.svg.uncolored index 1a4a18e..1a4a18e 100644 --- a/v2/src/content/img/lock.svg +++ b/v2/src/content/img/lock.svg.uncolored 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; diff --git a/v2/src/lib/category-header.html b/v2/src/lib/category-header.html index a69b198..03f0949 100644 --- a/v2/src/lib/category-header.html +++ b/v2/src/lib/category-header.html @@ -1,6 +1,6 @@ <h2 id="$category"> <a href="#$category">$index_recent_title_html</a> <a href="$feed_url"> - <img class="simple-icon" src="$icon_atom_url" alt="$icon_atom_alt" /> + <img class="svg-icon" src="$icon_atom_url" alt="$icon_atom_alt" /> </a> </h2> diff --git a/v2/src/lib/index-postamble.html b/v2/src/lib/index-postamble.html index 92ebbf2..899c88c 100644 --- a/v2/src/lib/index-postamble.html +++ b/v2/src/lib/index-postamble.html @@ -3,6 +3,6 @@ <h2> <a href="$by_category_url"> $index_category_title_html - <img class="simple-icon" src="$icon_linkto_url" alt="$icon_linkto_alt" /> + <img class="svg-icon" src="$icon_linkto_url" alt="$icon_linkto_alt" /> </a> </h2> diff --git a/v2/src/lib/index-preamble.html b/v2/src/lib/index-preamble.html index 2c17031..57563bc 100644 --- a/v2/src/lib/index-preamble.html +++ b/v2/src/lib/index-preamble.html @@ -1,7 +1,7 @@ <h2> $index_recent_title_html <a href="$feed_url"> - <img class="simple-icon" src="$icon_atom_url" alt="$icon_atom_alt" /> + <img class="svg-icon" src="$icon_atom_url" alt="$icon_atom_alt" /> </a> </h2> <ul class="no-style"> |