melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: use full-bleed gradient for mobile app icons

Browse Source
This commit is contained in:
mkelvers
2026-05-06 20:21:51 +02:00
parent 7ec7ca206d
commit 403d4e50bb
6 changed files with 52 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
static/app-icon.svg Normal file
View File

@@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<defs>
<radialGradient id="bg" cx="35%" cy="35%" r="75%">
<stop offset="0%" stop-color="#FB923C" />
<stop offset="100%" stop-color="#C2410C" />
</radialGradient>
</defs>
<!-- Background square (for mobile home screen / maskable) -->
<rect width="100" height="100" fill="url(#bg)" />
<!-- Crescent moon cutout -->
<path
d="M70 50a25 25 0 1 1 -25 -25 20 20 0 1 0 25 25z"
fill="#FFF7ED"
transform="translate(-2 -2)"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 559 B

21
static/apple-touch-icon-120x120-precomposed.svg
View File

@@ -4,20 +4,15 @@
<stop offset="0%" stop-color="#FB923C" /> <stop offset="0%" stop-color="#FB923C" />
<stop offset="100%" stop-color="#C2410C" /> <stop offset="100%" stop-color="#C2410C" />
</radialGradient> </radialGradient>
<clipPath id="clip">
<circle cx="50" cy="50" r="45" />
</clipPath>
</defs> </defs>
<!-- Base --> <!-- Background square (for mobile home screen / maskable) -->
<circle cx="50" cy="50" r="45" fill="url(#bg)" /> <rect width="100" height="100" fill="url(#bg)" />
<!-- Crescent moon cutout --> <!-- Crescent moon cutout -->
<g clip-path="url(#clip)"> <path
<path d="M70 50a25 25 0 1 1 -25 -25 20 20 0 1 0 25 25z"
d="M70 50a25 25 0 1 1 -25 -25 20 20 0 1 0 25 25z" fill="#FFF7ED"
fill="#FFF7ED" transform="translate(-2 -2)"
transform="translate(-2 -2)" />
/> </svg>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 636 B

After

Width:  |  Height:  |  Size: 559 B

21
static/apple-touch-icon-120x120.svg
View File

@@ -4,20 +4,15 @@
<stop offset="0%" stop-color="#FB923C" /> <stop offset="0%" stop-color="#FB923C" />
<stop offset="100%" stop-color="#C2410C" /> <stop offset="100%" stop-color="#C2410C" />
</radialGradient> </radialGradient>
<clipPath id="clip">
<circle cx="50" cy="50" r="45" />
</clipPath>
</defs> </defs>
<!-- Base --> <!-- Background square (for mobile home screen / maskable) -->
<circle cx="50" cy="50" r="45" fill="url(#bg)" /> <rect width="100" height="100" fill="url(#bg)" />
<!-- Crescent moon cutout --> <!-- Crescent moon cutout -->
<g clip-path="url(#clip)"> <path
<path d="M70 50a25 25 0 1 1 -25 -25 20 20 0 1 0 25 25z"
d="M70 50a25 25 0 1 1 -25 -25 20 20 0 1 0 25 25z" fill="#FFF7ED"
fill="#FFF7ED" transform="translate(-2 -2)"
transform="translate(-2 -2)" />
/> </svg>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 636 B

After

Width:  |  Height:  |  Size: 559 B

21
static/apple-touch-icon-precomposed.svg
View File

@@ -4,20 +4,15 @@
<stop offset="0%" stop-color="#FB923C" /> <stop offset="0%" stop-color="#FB923C" />
<stop offset="100%" stop-color="#C2410C" /> <stop offset="100%" stop-color="#C2410C" />
</radialGradient> </radialGradient>
<clipPath id="clip">
<circle cx="50" cy="50" r="45" />
</clipPath>
</defs> </defs>
<!-- Base --> <!-- Background square (for mobile home screen / maskable) -->
<circle cx="50" cy="50" r="45" fill="url(#bg)" /> <rect width="100" height="100" fill="url(#bg)" />
<!-- Crescent moon cutout --> <!-- Crescent moon cutout -->
<g clip-path="url(#clip)"> <path
<path d="M70 50a25 25 0 1 1 -25 -25 20 20 0 1 0 25 25z"
d="M70 50a25 25 0 1 1 -25 -25 20 20 0 1 0 25 25z" fill="#FFF7ED"
fill="#FFF7ED" transform="translate(-2 -2)"
transform="translate(-2 -2)" />
/> </svg>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 636 B

After

Width:  |  Height:  |  Size: 559 B

21
static/apple-touch-icon.svg
View File

@@ -4,20 +4,15 @@
<stop offset="0%" stop-color="#FB923C" /> <stop offset="0%" stop-color="#FB923C" />
<stop offset="100%" stop-color="#C2410C" /> <stop offset="100%" stop-color="#C2410C" />
</radialGradient> </radialGradient>
<clipPath id="clip">
<circle cx="50" cy="50" r="45" />
</clipPath>
</defs> </defs>
<!-- Base --> <!-- Background square (for mobile home screen / maskable) -->
<circle cx="50" cy="50" r="45" fill="url(#bg)" /> <rect width="100" height="100" fill="url(#bg)" />
<!-- Crescent moon cutout --> <!-- Crescent moon cutout -->
<g clip-path="url(#clip)"> <path
<path d="M70 50a25 25 0 1 1 -25 -25 20 20 0 1 0 25 25z"
d="M70 50a25 25 0 1 1 -25 -25 20 20 0 1 0 25 25z" fill="#FFF7ED"
fill="#FFF7ED" transform="translate(-2 -2)"
transform="translate(-2 -2)" />
/> </svg>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 636 B

After

Width:  |  Height:  |  Size: 559 B

4
static/manifest.json
View File

@@ -8,13 +8,13 @@
"theme_color": "#fb923c", "theme_color": "#fb923c",
"icons": [ "icons": [
{ {
"src": "/static/favicon.svg", "src": "/static/app-icon.svg",
"sizes": "any", "sizes": "any",
"type": "image/svg+xml", "type": "image/svg+xml",
"purpose": "any" "purpose": "any"
}, },
{ {
"src": "/static/favicon.svg", "src": "/static/app-icon.svg",
"sizes": "any", "sizes": "any",
"type": "image/svg+xml", "type": "image/svg+xml",
"purpose": "maskable" "purpose": "maskable"