fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-27 14:12:09 +00:00
Code Issues Projects Releases Wiki Activity

Fix: visible dark webring icon in Webkit

Browse source 
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.
This commit is contained in:
Rohan Kumar 2021-02-01 22:59:56 -08:00
parent 4e7a0c8bde
commit bc667feec6
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
6 changed files with 17 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/css/dark.css
View file

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

BIN
assets/p/merveilles_ring_dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 307 B

1
assets/p/merveilles_ring_dark.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 292 B

14
layouts/index.html
View file

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

2
layouts/shortcodes/indieweb-author.html
View file

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

2
layouts/shortcodes/indieweb-icon.html
View file

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