v2: CSS dark mode, including SVGs

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