Link to Merveilles webring!

My site's first Webring. I plan to join a few others, and to create
three of my own.

assets/css/dark.css

@@ -5,7 +5,7 @@
 	}
 
 	/* IndieWeb u-photo should be distinct from the background */
-	.u-photo {
+	.dark-invert {
 		-webkit-filter: invert(100%);
 		filter: invert(100%);
 	}

assets/p/merveilles_ring.svg

@@ -0,0 +1 @@
+<svg fill="none" height="300" stroke="#000" 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>

layouts/index.html

@@ -1,4 +1,17 @@
 {{ define "main" }}
 {{ .Content }}
 {{- partial "posts.html" . -}}
+<!--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_src := $merveilles_svg | resources.Fingerprint "md5" -}}
+	<source
+		srcset="{{ $merveilles_svg_src.RelPermalink }}"
+		type="image/svg+xml">
+	{{ $merveilles_png_src := $merveilles_png | resources.Fingerprint "md5" -}}
+	<img
+		width="{{ $merveilles_png.Width }}"
+		src="{{ $merveilles_png_src.RelPermalink }}" alt="Merevilles logo">
+</picture></a>
 {{ end }}

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

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" src="{{ $favicon.RelPermalink }}" width="16" height="16" alt="Rohan Kumar">
+<img class="u-photo dark-invert" src="{{ $favicon.RelPermalink }}" width="16" height="16" alt="Rohan Kumar">