sourcehut
/
core.sr.ht
mirror of https://git.sr.ht/~sircmpwn/core.sr.ht
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Make favicon visible in a light theme 

The SVG version now switches colors with the browser's theme. An outline
is added to both SVG and PNG versions for browsers that do not support
`prefers-color-scheme` or SVG favicons. The PNG version now has an added
`sizes="any"` attribute to work around Chrome preferring it over SVG.
This commit is contained in:
Umar Getagazov 2023-02-08 14:25:56 +00:00 committed by Drew DeVault
parent fb54daf26c
commit 83d4943c74
3 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
srht/static/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

15
srht/static/logo.svg
View File

@ -1 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#fff" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
<style>
@media (prefers-color-scheme: light) {
#outline { display: none }
#logo { stroke: black }
}
@media (prefers-color-scheme: dark) {
#outline { display: none }
#logo { stroke: white }
}
</style>
<circle id="outline" cx="64" cy="64" r="50" fill="none" stroke-width="14" stroke="#888" />
<circle id="logo" cx="64" cy="64" r="50" fill="none" stroke-width="10" stroke="white" />
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 245 B

After

Width:  |  Height:  |  Size: 499 B

2
srht/templates/layout.html
View File

@ -8,7 +8,7 @@
{% endblock %}
{% block favicon %}
<link rel="icon" type="image/svg+xml" href="/static/logo.svg" />
<link rel="icon" type="image/png" href="/static/logo.png" />
<link rel="icon" type="image/png" href="/static/logo.png" sizes="any" />
{% endblock favicon %}
{% if app.debug %}
<link rel="stylesheet" href="/static/main.css">