DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Badges kräftiger für bessere Lesbarkeit + Admin-Install-Icon endlich zuverlässig

Browse Source 
Badges ("NEU", "HANDGEMACHT" ...) sitzen direkt auf Produktfotos mit
unterschiedlichsten Hintergründen — die alte, sehr transparente Pille
ging auf manchen Fotos optisch unter. Gleiche Farben/gleicher Stil,
aber kräftigerer (deutlich weniger transparenter) Hintergrund + eigener
Rand + dezenter Schlagschatten hinterm Text für Kontrast auf jedem
Untergrund.

Den eigentlichen Grund für das wacklige Verhalten beim Installieren des
Admin-Bereichs gefunden: Sveltia CMS liest selbst den "logo"-Eintrag in
config.yml (eigentlich nur fürs Branding IN der CMS-Oberfläche gedacht)
und fügt daraus automatisch EIGENE Icon-/Manifest-Verknüpfungen in den
<head> ein — u.a. ein live generiertes, eigenes Manifest als blob:-URL
— NACH unseren eigenen. Zwei "rel=manifest"-Links gleichzeitig sind
technisch erlaubt, aber welcher beim Installieren gewinnt, war nicht
zuverlässig vorhersagbar. Das erklärt, warum es mal geklappt hat und
mal nicht, unabhängig vom Icon-Inhalt selbst.

Fix: ein MutationObserver entfernt Sveltias eigene, automatisch
eingefügte Icon-/Manifest-Verknüpfungen sofort wieder, sobald sie
auftauchen — übrig bleiben ausschließlich unsere eigenen (Favicon =
echtes Logo, Install-Icon = lila V). Verifiziert: nach vollständigem
Laden inkl. Sveltia sind nur noch unsere 5 eigenen Verknüpfungen im
<head> vorhanden, 0 Installability-Errors.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-03 01:24:40 +02:00
co-authored by Claude Sonnet 5
parent 8da322699b
commit 1b55604cba
2 changed files with 35 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+9 -4
View File
@@ -189,7 +189,10 @@ a.card:hover {
.product-slot { display: flex; }
.product-slot > a { flex: 1; }
/* Badges */
/* Badges — sitzen direkt auf Produktfotos (unterschiedlichste Hintergründe/Farben), deshalb
braucht die Pille genug eigene Kraft, um immer lesbar zu bleiben: kräftigerer (weniger
transparenter) Hintergrund + eigener Rand in derselben Farbe + dezenter Schlagschatten hinterm
Text. Farbton und Grundstil bleiben exakt gleich, nur die Durchsetzungskraft ist höher. */
.badge {
display: inline-block;
font-size: 0.72rem;
@@ -198,11 +201,13 @@ a.card:hover {
text-transform: uppercase;
padding: 0.3em 0.75em;
border-radius: 999px;
background: rgba(95, 211, 236, 0.14);
background: rgba(95, 211, 236, 0.34);
border: 1px solid rgba(95, 211, 236, 0.6);
color: var(--c-accent);
text-shadow: 0 1px 3px rgba(10, 9, 16, 0.65);
}
.badge-sale { background: rgba(231, 135, 154, 0.16); color: var(--c-sale); }
.badge-sold-out { background: rgba(183, 174, 196, 0.16); color: var(--c-text-muted); }
.badge-sale { background: rgba(231, 135, 154, 0.36); border-color: rgba(231, 135, 154, 0.6); color: var(--c-sale); }
.badge-sold-out { background: rgba(183, 174, 196, 0.32); border-color: rgba(183, 174, 196, 0.55); color: var(--c-text-muted); }
/* Placeholder art (kein echtes Produktfoto vorhanden) */
.img-placeholder {