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/dynamic.mk | 16 ++++++-- v2/src/bin/makemake | 19 +++++++++- 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 +++++++++++++++++++++---- v2/src/lib/category-header.html | 2 +- v2/src/lib/index-postamble.html | 2 +- v2/src/lib/index-preamble.html | 2 +- 17 files changed, 170 insertions(+), 98 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') diff --git a/v2/dynamic.mk b/v2/dynamic.mk index ba07dfe..e4f349d 100644 --- a/v2/dynamic.mk +++ b/v2/dynamic.mk @@ -7,7 +7,7 @@ include generated.mk .SUFFIXES: -.SUFFIXES: .page .md .content .conf .html .categoryentry .indexentry .xmlentry +.SUFFIXES: .page .md .content .conf .html .categoryentry .indexentry .xmlentry .uncolored .page.md: @@ -31,6 +31,13 @@ include generated.mk .md.xmlentry: xmlentry $< > $@ +.uncolored: + printf '%s\n%s\n%s\n' \ + "`head -n2 $<`" \ + "`cat src/content/img/dark-mode.xml`" \ + "`tail -n +3 $<`" \ + > $@ + all: public @@ -39,7 +46,7 @@ all: public $(all-generated.conf) $(all-generated.content): $(non-content) $(all-generated.conf): src/lib/base.conf src/lib/generated.conf -src/lib/generated.conf: src/bin/conf +src/lib/generated.conf: src/bin/conf $(svgs) conf > $@ $(all-generated.categories): @@ -53,8 +60,8 @@ $(all-generated.xml): clean: rm -rf \ - $(all-generated) $(pages-mds) public/ *.sentinel generated.mk \ - po/po4a.cfg src/content/.gitignore \ + $(all-generated) $(pages-mds) $(svgs) public/ *.sentinel \ + generated.mk po/po4a.cfg src/content/.gitignore \ src/content/*/*.category src/content/*/*/*.category \ src/content/*/*.categorysort src/content/*/*/*.categorysort \ src/content/*/*.html src/content/*/*/*.html \ @@ -73,6 +80,7 @@ content = \ $(all-generated.index) \ $(all-generated.xml) \ $(static-content) \ + $(svgs) \ containers = \ $(all-generated.snippets) \ 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 @@ + + + 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; 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 @@

$index_recent_title_html - $icon_atom_alt + $icon_atom_alt

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 @@

$index_category_title_html - $icon_linkto_alt + $icon_linkto_alt

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 @@

$index_recent_title_html - $icon_atom_alt + $icon_atom_alt