Setup dark-mode rules and icons

13 files changed, 123 insertions, 17 deletions

diff --git a/deps.mk b/deps.mk
index 2cfa8e0..52096cc 100644
--- a/deps.mk
+++ b/deps.mk
@@ -12,13 +12,19 @@ pages.adoc = \
 
 images.svg = \
 	src/content/img/atom.svg \
-	src/content/img/database-light.svg \
-	src/content/img/diagram-light.svg \
-	src/content/img/envelope.svg \
+	src/content/img/database/dark.svg \
+	src/content/img/database/light.svg \
+	src/content/img/diagram/dark.svg \
+	src/content/img/diagram/light.svg \
+	src/content/img/envelope/dark.svg \
+	src/content/img/envelope/light.svg \
 	src/content/img/favicon.svg \
-	src/content/img/link.svg \
-	src/content/img/logo.svg \
-	src/content/img/shield-light.svg \
+	src/content/img/link/dark.svg \
+	src/content/img/link/light.svg \
+	src/content/img/logo/dark.svg \
+	src/content/img/logo/light.svg \
+	src/content/img/shield/dark.svg \
+	src/content/img/shield/light.svg \
 
 src/content/blog/1970/01/01/launch.htmlbody	src/content/blog/1970/01/01/launch.snippets	src/content/blog/1970/01/01/launch.conf:	src/content/blog/1970/01/01/launch.adoc
 src/content/blog/2000/01/01/feature-ann.htmlbody	src/content/blog/2000/01/01/feature-ann.snippets	src/content/blog/2000/01/01/feature-ann.conf:	src/content/blog/2000/01/01/feature-ann.adoc
diff --git a/mkdeps.sh b/mkdeps.sh
index 7044a6e..e2ba064 100755
--- a/mkdeps.sh
+++ b/mkdeps.sh
@@ -18,9 +18,9 @@ files() {
 }
 
 
-articles                   | varlist 'articles.adoc'
-pages                      | varlist    'pages.adoc'
-find src/content/img/*.svg | varlist 'images.svg'
+articles                            | varlist 'articles.adoc'
+pages                               | varlist    'pages.adoc'
+find src/content/img/ -name '*.svg' | varlist 'images.svg'
 
 
 files    | sed 's/^\(.*\)\.adoc$/\1.htmlbody\t\1.snippets\t\1.conf:\t\1.adoc/'
diff --git a/src/content/img/database-light.svg b/src/content/img/database/light.svg
index 5843d8f..5843d8f 100644
--- a/src/content/img/database-light.svg
+++ b/src/content/img/database/light.svg
diff --git a/src/content/img/diagram-light.svg b/src/content/img/diagram/light.svg
index 3e9275a..3e9275a 100644
--- a/src/content/img/diagram-light.svg
+++ b/src/content/img/diagram/light.svg
diff --git a/src/content/img/envelope.svg b/src/content/img/envelope.svg
deleted file mode 100644
index c2251f4..0000000
--- a/src/content/img/envelope.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg width="22" height="22" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
-  <path d="M1664 1504v-768q-32 36-69 66-268 206-426 338-51 43-83 67t-86.5 48.5-102.5 24.5h-2q-48 0-102.5-24.5t-86.5-48.5-83-67q-158-132-426-338-37-30-69-66v768q0 13 9.5 22.5t22.5 9.5h1472q13 0 22.5-9.5t9.5-22.5zm0-1051v-24.5l-.5-13-3-12.5-5.5-9-9-7.5-14-2.5h-1472q-13 0-22.5 9.5t-9.5 22.5q0 168 147 284 193 152 401 317 6 5 35 29.5t46 37.5 44.5 31.5 50.5 27.5 43 9h2q20 0 43-9t50.5-27.5 44.5-31.5 46-37.5 35-29.5q208-165 401-317 54-43 100.5-115.5t46.5-131.5zm128-37v1088q0 66-47 113t-113 47h-1472q-66 0-113-47t-47-113v-1088q0-66 47-113t113-47h1472q66 0 113 47t47 113z" />
-</svg>
diff --git a/src/content/img/envelope/dark.svg b/src/content/img/envelope/dark.svg
new file mode 100644
index 0000000..63da96e
--- /dev/null
+++ b/src/content/img/envelope/dark.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="22" height="22" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="white" d="M1664 1504v-768q-32 36-69 66-268 206-426 338-51 43-83 67t-86.5 48.5-102.5 24.5h-2q-48 0-102.5-24.5t-86.5-48.5-83-67q-158-132-426-338-37-30-69-66v768q0 13 9.5 22.5t22.5 9.5h1472q13 0 22.5-9.5t9.5-22.5zm0-1051v-24.5l-.5-13-3-12.5-5.5-9-9-7.5-14-2.5h-1472q-13 0-22.5 9.5t-9.5 22.5q0 168 147 284 193 152 401 317 6 5 35 29.5t46 37.5 44.5 31.5 50.5 27.5 43 9h2q20 0 43-9t50.5-27.5 44.5-31.5 46-37.5 35-29.5q208-165 401-317 54-43 100.5-115.5t46.5-131.5zm128-37v1088q0 66-47 113t-113 47h-1472q-66 0-113-47t-47-113v-1088q0-66 47-113t113-47h1472q66 0 113 47t47 113z" />
+</svg>
diff --git a/src/content/img/envelope/light.svg b/src/content/img/envelope/light.svg
new file mode 100644
index 0000000..16a1225
--- /dev/null
+++ b/src/content/img/envelope/light.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="22" height="22" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+  <path fill="black" d="M1664 1504v-768q-32 36-69 66-268 206-426 338-51 43-83 67t-86.5 48.5-102.5 24.5h-2q-48 0-102.5-24.5t-86.5-48.5-83-67q-158-132-426-338-37-30-69-66v768q0 13 9.5 22.5t22.5 9.5h1472q13 0 22.5-9.5t9.5-22.5zm0-1051v-24.5l-.5-13-3-12.5-5.5-9-9-7.5-14-2.5h-1472q-13 0-22.5 9.5t-9.5 22.5q0 168 147 284 193 152 401 317 6 5 35 29.5t46 37.5 44.5 31.5 50.5 27.5 43 9h2q20 0 43-9t50.5-27.5 44.5-31.5 46-37.5 35-29.5q208-165 401-317 54-43 100.5-115.5t46.5-131.5zm128-37v1088q0 66-47 113t-113 47h-1472q-66 0-113-47t-47-113v-1088q0-66 47-113t113-47h1472q66 0 113 47t47 113z" />
+</svg>
diff --git a/src/content/img/link.svg b/src/content/img/link/dark.svg
index e5c7050..6a9868a 100644
--- a/src/content/img/link.svg
+++ b/src/content/img/link/dark.svg
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg width="22" height="22" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
   <path fill-rule="evenodd"
+        fill="white"
         d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z" />
 </svg>
diff --git a/src/content/img/link/light.svg b/src/content/img/link/light.svg
new file mode 100644
index 0000000..471ea6f
--- /dev/null
+++ b/src/content/img/link/light.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="22" height="22" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd"
+        fill="black"
+        d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z" />
+</svg>
diff --git a/src/content/img/logo/dark.svg b/src/content/img/logo/dark.svg
new file mode 100644
index 0000000..7db07e8
--- /dev/null
+++ b/src/content/img/logo/dark.svg
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="97.998352mm"
+   height="25.445784mm"
+   viewBox="0 0 97.998355 25.445784"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.0.2-2 (e86c870879, 2021-01-15)"
+   sodipodi:docname="logo.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4"
+     inkscape:cx="172.8097"
+     inkscape:cy="160.17501"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(312.12183,57.683393)">
+    <g
+       id="g861"
+       transform="translate(0,-35.863382)"
+       style="opacity:0.993;fill:#f3f3f3;fill-opacity:1">
+      <text
+         xml:space="preserve"
+         style="font-size:50.8px;line-height:1.25;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;fill:#f3f3f3;fill-opacity:1;stroke-width:0.264583"
+         x="-281.67905"
+         y="0"
+         id="text835"><tspan
+           sodipodi:role="line"
+           id="tspan833"
+           x="-281.67905"
+           y="0"
+           style="font-size:25.4px;fill:#f3f3f3;fill-opacity:1;stroke-width:0.264583">PAPO</tspan></text>
+    </g>
+    <path
+       style="fill:#05a610;fill-opacity:1;stroke-width:0.999995"
+       d="m -300.66171,-32.351716 c -2.20713,-0.46143 -3.87555,-2.257505 -4.42191,-4.760251 l -0.12303,-0.563569 h 1.93698 c 1.74845,0 1.94947,0.03937 2.06536,0.404522 0.37638,1.185885 2.11619,1.599593 3.11552,0.740835 l 0.57499,-0.494117 0.10248,-4.168139 0.10246,-4.16814 1.90981,-0.05911 1.9098,-0.05911 -0.0654,4.567668 c -0.0713,4.982553 -0.13205,5.261405 -1.49954,6.886578 -1.12791,1.340443 -3.62881,2.086511 -5.60751,1.672836 z m -7.1397,-6.956274 c -1.06861,-0.254174 -2.66368,-1.406202 -3.32101,-2.398594 -0.72016,-1.087242 -1.13967,-2.860954 -0.95656,-4.044362 0.37818,-2.444183 2.32723,-4.500996 4.68418,-4.943162 l 0.76143,-0.142843 v 1.955873 c 0,1.767273 -0.039,1.968255 -0.40453,2.084265 -1.18589,0.376388 -1.59959,2.116205 -0.74081,3.115518 l 0.49412,0.574997 4.2706,0.102468 4.27059,0.102467 0.0589,1.895643 0.0589,1.895644 -4.26008,-0.02098 c -2.34305,-0.01154 -4.55514,-0.09116 -4.91578,-0.176936 z m 15.71838,-1.748963 c 0,-1.539425 0.0605,-1.946877 0.28918,-1.946877 0.15905,0 0.52792,-0.283737 0.81974,-0.630527 0.74231,-0.882186 0.71669,-1.879015 -0.0685,-2.664187 l -0.59903,-0.599039 h -4.11446 -4.11445 v -1.960965 -1.960964 l 4.55979,0.06532 4.55979,0.06532 1.12714,0.635763 c 1.86233,1.050447 3.07402,3.113684 3.07402,5.234375 0,2.167041 -1.65357,4.481362 -3.76683,5.272036 -1.81339,0.678474 -1.7664,0.718648 -1.7664,-1.510258 z m -12.55224,-3.320204 -0.56356,-0.08844 v -3.870054 c 0,-2.12853 0.10018,-4.337197 0.22263,-4.908149 0.48855,-2.278071 2.29328,-3.942727 4.72217,-4.355688 3.12238,-0.530868 5.99493,1.507013 6.63568,4.707572 l 0.13334,0.666036 h -1.94935 c -1.76078,0 -1.96177,-0.03913 -2.07773,-0.404523 -0.40078,-1.262726 -2.20743,-1.622429 -3.19395,-0.635913 l -0.59904,0.599039 v 4.188132 4.188132 l -1.38331,0.0012 c -0.76082,6.57e-4 -1.63691,-0.03865 -1.94688,-0.08729 z"
+       id="path861" />
+  </g>
+</svg>
diff --git a/src/content/img/logo.svg b/src/content/img/logo/light.svg
index f9f2976..f9f2976 100644
--- a/src/content/img/logo.svg
+++ b/src/content/img/logo/light.svg
diff --git a/src/content/img/shield-light.svg b/src/content/img/shield/light.svg
index 5126931..5126931 100644
--- a/src/content/img/shield-light.svg
+++ b/src/content/img/shield/light.svg
diff --git a/src/content/index.adoc b/src/content/index.adoc
index 4065605..e13706f 100644
--- a/src/content/index.adoc
+++ b/src/content/index.adoc
@@ -16,7 +16,10 @@ export custom_body=true
             <h2>Why Papo?</h2>
             <div class="why_papo-cards-container">
               <div class="why_papo-card">
-                <img class="icon" src="img/shield-light.svg" alt="shild icon" />
+                <picture>
+                  <source srcset="img/shield/dark.svg" media="(prefers-color-scheme: dark)" />
+                  <img       src="img/shield/light.svg" class="icon" alt="an icon of a small outlined shield inside a chat bubble" />
+                </picture>
                 <h3>Privacy-first hosted team chat</h3>
                 <p>
                   A convenient hosted service for you to subscribe to and delegate management of,
@@ -25,7 +28,10 @@ export custom_body=true
                 </p>
               </div>
               <div class="why_papo-card">
-                <img class="icon" src="img/database-light.svg" alt="database with an x icon" />
+                <picture>
+                  <source srcset="img/database/dark.svg" media="(prefers-color-scheme: dark)" />
+                  <img       src="img/database/light.svg" class="icon" alt="an outlined database icon with an &quot;X&quot; marker on its right-bottom corner" />
+                </picture>
                 <h3>No gratuitous data collection</h3>
                 <p>
                   No "accept necessary cookies" or third-party tracking.  Revenue is made via
@@ -33,7 +39,10 @@ export custom_body=true
                 </p>
               </div>
               <div class="why_papo-card">
-                <img class="icon" src="img/diagram-light.svg" alt="diagram icon" />
+                <picture>
+                  <source srcset="img/diagram/dark.svg" media="(prefers-color-scheme: dark)" />
+                  <img       src="img/diagram/light.svg" class="icon" alt="a small outlined icon of a cog surrounded by 6 smaller circles with a short dashed line between the cog and each circle, where each circle also has 2 dashed lines coming from and going to the next circle, fully surrounding the inner cog" />
+                </picture>
                 <h3>Build for interoperability</h3>
                 <p>
                   Built on existing open standards, we're not in the business of profiting from
@@ -52,5 +61,5 @@ export custom_body=true
             <h3>Purposefully designed to consectetur adipiscing elit</h3>
           </div>
         </hgroup>
-	<!-- https://codepen.io/Laisses/pen/qBzwmoz -->
+        <!-- https://codepen.io/Laisses/pen/qBzwmoz -->
 ++++