2 Commits

Author SHA1 Message Date
MechaCat02
a7d2df6e9e fix(icon): tilt the rings so the right band sits above the left
Some checks failed
Audit / cargo audit (backend) (push) Failing after 9m4s
Audit / npm audit (frontend) (push) Successful in 51s
Checks / Backend — cargo test + clippy + fmt (push) Failing after 1m0s
Checks / Frontend — vitest + svelte-check (push) Successful in 10m21s
E2E / Playwright E2E (chromium + webkit) (push) Failing after 8m40s
E2E / Cross-UA smoke matrix (push) Failing after 3m54s
Checks / Keepsake viewer — builds, self-contained, committed artifact in sync (push) Failing after 4m54s
Checks / E2E — typecheck + lint (push) Successful in 40s
Rotated -45 degrees about the icon's centre. Negative because SVG's y axis points down, so
a positive angle would have dropped the right band instead of lifting it.

The transform sits on the group rather than on the individual shapes. The two circles and
the arc that redraws the upper crossing are all still authored on the horizontal axis and
rotate together, so the interlock geometry did not have to be recomputed and the bands
still alternate -- one over at the first crossing, the other over at the second.

Re-checked the maskable safe zone, because the bounds recorded for the horizontal artwork
no longer describe it: the box is now 102.9-409.1 on both axes, not x 88-424 and y 139-373.
The circular crop needed no arithmetic at all -- the farthest painted point stays 168 from
the centre (the 51 centre offset plus radius 104 plus half the 26 stroke), inside the 204.8
safe radius, since rotating about that same centre cannot change any point's distance
from it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-18 20:11:33 +02:00
da2d4f67e7 fix(icon): wedding rings, and delete the skeleton favicon behind them
Some checks failed
Audit / cargo audit (backend) (push) Failing after 9m40s
E2E / Cross-UA smoke matrix (push) Has been cancelled
E2E / Playwright E2E (chromium + webkit) (push) Has been cancelled
Audit / npm audit (frontend) (push) Has been cancelled
Checks / Backend — cargo test + clippy + fmt (push) Has been cancelled
Checks / Frontend — vitest + svelte-check (push) Has been cancelled
Checks / Keepsake viewer — builds, self-contained, committed artifact in sync (push) Has been cancelled
Checks / E2E — typecheck + lint (push) Has been cancelled
The event is a wedding, so the camera icon becomes two interlocking bands. Drawn rather
than sourced: at 16px in a tab anything finer than the stroke turns to smudge, which is
why the camera it replaces was three shapes and no more. White on #8a6a2b, the event's
own theme_primary, so the icon, the site and the PWA chrome finally agree -- the
manifest's theme_color was still the #2563eb from the camera branding.

The rings span x 88-424 and y 139-373 including stroke, inside the centre-80% safe zone,
so an Android circle crop cannot clip them.

Also removes a second, competing icon declaration. `+layout.svelte` imported
`$lib/assets/favicon.svg` -- the orange Svelte logo from the project skeleton, which Vite
inlined as a data URI into the layout bundle -- and applied it via `<svelte:head>`. Which
of the two won was left to the browser: the link in app.html is parsed from the initial
HTML, this one is added at hydration, and Chrome keeps the former. So the skeleton logo
did not usually show, but nothing guaranteed that, and `ssr = false` means the branded
link is the only one present at first paint anyway. app.html is now the single source and
the skeleton asset is gone.
2026-08-18 18:03:31 +00:00
4 changed files with 32 additions and 16 deletions

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

View File

@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import favicon from '$lib/assets/favicon.svg';
import '../app.css'; import '../app.css';
import { initAuth, getToken, getUserId, clearPin } from '$lib/auth'; import { initAuth, getToken, getUserId, clearPin } from '$lib/auth';
import { initTheme } from '$lib/theme-store'; import { initTheme } from '$lib/theme-store';
@@ -227,9 +226,11 @@
}); });
</script> </script>
<svelte:head> <!-- NO `<svelte:head><link rel="icon">` here. There used to be one, pointing at
<link rel="icon" href={favicon} /> `$lib/assets/favicon.svg` — the orange Svelte logo from the project skeleton. Vite inlined it
</svelte:head> as a data URI into the layout bundle and this block applied it AFTER hydration, so it beat the
branded `<link rel="icon">` in app.html and the tab showed the framework's logo on every page.
app.html is now the single source for the icon; the skeleton asset is deleted. -->
{@render children()} {@render children()}

View File

@@ -1,12 +1,28 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" role="img" aria-label="EventSnap"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" role="img" aria-label="Hochzeit von Julia &amp; Jonas">
<!-- Full-bleed brand background keeps the icon "maskable": safe content sits within the centre 80%. --> <!-- Full-bleed brand background keeps the icon "maskable": safe content sits within the centre 80%
<rect width="512" height="512" fill="#2563eb"/> (51.2-460.8). Rotated, the rings span 102.9-409.1 on BOTH axes including stroke, so an Android
<g fill="none" stroke="#ffffff" stroke-width="22" stroke-linejoin="round" stroke-linecap="round"> circle crop cannot clip them. The stricter circular test is unaffected by the rotation: the
<!-- Camera body --> farthest painted point is 51 (centre offset) + 117 (radius + half stroke) = 168 from the
<rect x="116" y="172" width="280" height="200" rx="34"/> middle, comfortably inside the 204.8 safe radius, and rotating about that same middle does
<!-- Viewfinder bump --> not change any point's distance from it. -->
<path d="M212 172l24-34h40l24 34" fill="#ffffff" stroke="none"/> <rect width="512" height="512" fill="#8a6a2b"/>
<!-- Lens --> <!-- Two interlocking bands. Deliberately just the two rings: no gem, no shine, no inner bevel.
<circle cx="256" cy="276" r="58"/> This renders at 16px in a browser tab, where any detail smaller than the stroke width turns
into a smudge — the same reason the camera icon this replaces was three shapes and no more.
The -45° tilt lifts the right band above the left. It is negative because SVG's y axis points
down, so a positive angle would rotate the other way and drop the right band instead. Applying
it to the GROUP rather than to each shape is what keeps the interlock intact — the circles and
the overlap arc below are all still authored on the horizontal axis and rotate together, so
the crossing geometry never has to be recomputed. -->
<g fill="none" stroke="#ffffff" stroke-width="26" transform="rotate(-45 256 256)">
<circle cx="205" cy="256" r="104"/>
<circle cx="307" cy="256" r="104"/>
<!-- The interlock. Both circles above are drawn whole, so the right band covers the left one at
BOTH crossings and they read as merely overlapping. Redrawing this arc of the left band —
the segment through the upper intersection at (256, 165.4) — puts it back on top there
while the right stays on top at the lower crossing, which is what makes them look linked
rather than stacked. Keep it in sync if either circle moves. -->
<path d="M214.1 152.4A104 104 0 0 1 290.2 196.3"/>
</g> </g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 634 B

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@@ -8,7 +8,7 @@
"display": "standalone", "display": "standalone",
"orientation": "portrait", "orientation": "portrait",
"background_color": "#ffffff", "background_color": "#ffffff",
"theme_color": "#2563eb", "theme_color": "#8a6a2b",
"icons": [ "icons": [
{ {
"src": "/icon.svg", "src": "/icon.svg",