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 --- TODOs.md | 31 ++++++---------- 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 +- 18 files changed, 182 insertions(+), 117 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 diff --git a/TODOs.md b/TODOs.md index bbc5b76..1512cbe 100644 --- a/TODOs.md +++ b/TODOs.md @@ -527,23 +527,16 @@ Future-proof wesite (and also later software): Move brinquedoteca out of jekyll? -dark mode -sitemap -# FIXMEs: -# - feeds by category -# - link to next and/or previous in -# - validate input variables: regex for date (same as _plugins/linter.rb) -# - `date -d` isn't POSIX -# - parse commonmark and use a custom HTML emitter over 
 regex
-# - handle mixture of personal scripts
-
-po4a for markdown...
-
-render slides
-
-error on missing variable owith envsubst?
-
-how to use tmp fd over tmpfile?
-
-build makemake output in parallel
+FIXMEs:
+- how to use tmp fd over tmpfile?
+- DIY CommonMark parser
+- DIY envsubst, with errors on undefined variables
+- `date -d` isn't POSIX: DIY simple replacement
+- po4a for markdown...
+- render slides
+- sitemap
+- shrink CSS
+- link to next and/or previous in 
+- link to translations
+- build makemake output in parallel
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
           
         

         
    
-- 
cgit v1.2.3