From bc667feec6db87f6ad95bb311df8dbbe441b186c Mon Sep 17 00:00:00 2001
From: Rohan Kumar <seirdy@seirdy.one>
Date: Mon, 1 Feb 2021 22:59:56 -0800
Subject: [PATCH] Fix: visible dark webring icon in Webkit

Dark mode now switches to a different icon instead of
inverting it. There's probably a better way but I'll figure that out
later.
---
 assets/css/dark.css                     |   2 +-
 assets/p/merveilles_ring_dark.png       | Bin 0 -> 307 bytes
 assets/p/merveilles_ring_dark.svg       |   1 +
 layouts/index.html                      |  14 +++++++++++++-
 layouts/shortcodes/indieweb-author.html |   2 +-
 layouts/shortcodes/indieweb-icon.html   |   2 +-
 6 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 assets/p/merveilles_ring_dark.png
 create mode 100644 assets/p/merveilles_ring_dark.svg

diff --git a/assets/css/dark.css b/assets/css/dark.css
index 9be52b1..a54d354 100644
--- a/assets/css/dark.css
+++ b/assets/css/dark.css
@@ -5,7 +5,7 @@
 	}
 
 	/* IndieWeb u-photo should be distinct from the background */
-	.dark-invert {
+	.u-photo {
 		-webkit-filter: invert(100%);
 		filter: invert(100%);
 	}
diff --git a/assets/p/merveilles_ring_dark.png b/assets/p/merveilles_ring_dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e13dc2a46ef1f01d056650e16c1f1a0bcd51b30
GIT binary patch
literal 307
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnF3?v&v(vJfvl>na*SN8&+|Ac@@Rcty?Jx@uH
zUoeB1K>Jtc1^@S{X59a3eQE(ve3Pe(V@L&K@&YvhhsWBx7jZ5LU%=_38Q-9FAZ8zD
zXhUYT;jDR2RfQ+)jJX?qN_fK0cTb-_U3y~LG-gNBO`=cFroHp1I&#`pQew&J?gvb7
zpE}Gpm^S_3k2wNqR(AyYK6wd<#xV(VxQpM2i(_4MCXp%T>AR~5g%KPbQ<gW+Ilxn%
zRb^UUS;~-J^^<MJ(xpD{6qZkab8l}o(~V1P3$zz9s2oUPQVCb)G%#rD^z>42n5)6c
ZP}pmJev|B~LZIszJYD@<);T3K0RWr{iNpW^

literal 0
HcmV?d00001

diff --git a/assets/p/merveilles_ring_dark.svg b/assets/p/merveilles_ring_dark.svg
new file mode 100644
index 0000000..26be4c5
--- /dev/null
+++ b/assets/p/merveilles_ring_dark.svg
@@ -0,0 +1 @@
+<svg fill="none" height="300" stroke="#fff" stroke-linecap="square" stroke-width="28" width="300" xmlns="http://www.w3.org/2000/svg"><path d="M201.962 210a60 60 0 10-103.924-60l-50 86.603"/><path d="M98.038 210a60 60 0 10103.924-60l-50-86.603"/><path d="M150 120a60 60 0 100 120h100"/></svg>
diff --git a/layouts/index.html b/layouts/index.html
index a74cfaf..ed5cad3 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -4,7 +4,19 @@
 <!--svg image with a fallback to a PNG when SVG is unsupported-->
 {{- $merveilles_svg := resources.GetMatch (printf "/p/merveilles_ring.svg") -}}
 {{ $merveilles_png := resources.GetMatch (printf "/p/merveilles_ring.png") -}}
-<a href="https://webring.xxiivv.com/#random" target="_blank" rel="noopener"><picture class="dark-invert">
+{{- $merveilles_svg_dark := resources.GetMatch (printf "/p/merveilles_ring_dark.svg") -}}
+{{ $merveilles_png_dark := resources.GetMatch (printf "/p/merveilles_ring_dark.png") -}}
+<a href="https://webring.xxiivv.com/#random" target="_blank" rel="noopener"><picture>
+	{{ $merveilles_svg_src := $merveilles_svg_dark | resources.Fingerprint "md5" -}}
+	<source
+		srcset="{{ $merveilles_svg_src.RelPermalink }}"
+		type="image/svg+xml"
+		media="(prefers-color-scheme: dark)">
+	{{ $merveilles_png_src := $merveilles_png_dark | resources.Fingerprint "md5" -}}
+	<source
+		srcset="{{ $merveilles_png_src.RelPermalink }}"
+		type="image/png"
+		media="(prefers-color-scheme: dark)">
 	{{ $merveilles_svg_src := $merveilles_svg | resources.Fingerprint "md5" -}}
 	<source
 		srcset="{{ $merveilles_svg_src.RelPermalink }}"
diff --git a/layouts/shortcodes/indieweb-author.html b/layouts/shortcodes/indieweb-author.html
index 2209cf4..8bd7850 100644
--- a/layouts/shortcodes/indieweb-author.html
+++ b/layouts/shortcodes/indieweb-author.html
@@ -1,3 +1,3 @@
 <!-- re-using the indefinetly-cached favicon to avoid bloating page size -->
 {{ $favicon := resources.Get "/favicon.png" | resources.Fingerprint "md5" -}}
-<span itemprop="author" class="h-card p-author"><a href="https://seirdy.one" rel="author home" class="u-url url"><img class="u-photo dark-invert" src="{{ $favicon.RelPermalink }}" width="16" height="16" alt="Rohan Kumar" > <span class="p-name"><span class="p-given-name">Rohan</span> <span class="p-family-name">Kumar</span></span></a></span>
+<span itemprop="author" class="h-card p-author"><a href="https://seirdy.one" rel="author home" class="u-url url"><img class="u-photo" src="{{ $favicon.RelPermalink }}" width="16" height="16" alt="Rohan Kumar" > <span class="p-name"><span class="p-given-name">Rohan</span> <span class="p-family-name">Kumar</span></span></a></span>
diff --git a/layouts/shortcodes/indieweb-icon.html b/layouts/shortcodes/indieweb-icon.html
index 5ccf6fd..89add8b 100644
--- a/layouts/shortcodes/indieweb-icon.html
+++ b/layouts/shortcodes/indieweb-icon.html
@@ -1,3 +1,3 @@
 <!-- re-using the indefinetly-cached favicon to avoid bloating page size -->
 {{ $favicon := resources.Get "/favicon.png" | resources.Fingerprint "md5" -}}
-<img class="u-photo dark-invert" src="{{ $favicon.RelPermalink }}" width="16" height="16" alt="Rohan Kumar">
+<img class="u-photo" src="{{ $favicon.RelPermalink }}" width="16" height="16" alt="Rohan Kumar">