rene/vereinshaus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Branding: Logo, Favicon und App-Icon eingebaut

Browse source
This commit is contained in:
rene 2026-05-20 16:40:43 +02:00
parent 77c6f513b5
commit bb0e67b2bd
7 changed files with 51 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

5
app/src/app.html
View file

@ -4,13 +4,12 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="light" /> <meta name="color-scheme" content="light" />
<meta name="theme-color" content="#1e40af" /> <meta name="theme-color" content="#0F172A" />
<meta name="mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" /> <meta name="apple-mobile-web-app-status-bar-style" content="default" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="apple-touch-icon" sizes="180x180" href="/icons/icon-512.svg" />
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">

13
app/src/routes/(app)/+layout.svelte
View file

@ -83,7 +83,10 @@
<div class="shell"> <div class="shell">
<header> <header>
<span class="logo">vereins.haus</span> <a href="/" class="logo">
<img src="/favicon.svg" alt="" width="28" height="28" />
vereins.haus
</a>
<button class="logout-btn" onclick={logout}>Abmelden</button> <button class="logout-btn" onclick={logout}>Abmelden</button>
</header> </header>
@ -124,10 +127,14 @@
} }
.logo { .logo {
font-size: 1.1rem; display: flex;
align-items: center;
gap: 0.45rem;
font-size: 1.05rem;
font-weight: 700; font-weight: 700;
color: #1e40af; color: #0f172a;
letter-spacing: -0.02em; letter-spacing: -0.02em;
text-decoration: none;
} }
.logout-btn { .logout-btn {

10
app/src/routes/onboarding/+page.svelte
View file

@ -55,7 +55,10 @@
<svelte:head><title>Einrichtung — vereins.haus</title></svelte:head> <svelte:head><title>Einrichtung — vereins.haus</title></svelte:head>
<div class="shell"> <div class="shell">
<div class="logo">vereins.haus</div> <div class="logo">
<img src="/favicon.svg" alt="" width="36" height="36" />
vereins.haus
</div>
<div class="card"> <div class="card">
<!-- Fortschritt --> <!-- Fortschritt -->
@ -178,9 +181,12 @@
} }
.logo { .logo {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 700; font-weight: 700;
color: #1e40af; color: #0f172a;
letter-spacing: -0.02em; letter-spacing: -0.02em;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }

8
app/static/favicon.svg Normal file
View file

@ -0,0 +1,8 @@
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="64" height="64" rx="16" fill="#0F172A"/>
<path d="M18 30L32 18L46 30V44C46 45.1046 45.1046 46 44 46H20C18.8954 46 18 45.1046 18 44V30Z" fill="white"/>
<circle cx="25" cy="33" r="3" fill="#22C55E"/>
<circle cx="39" cy="33" r="3" fill="#22C55E"/>
<circle cx="32" cy="41" r="3" fill="#22C55E"/>
<path d="M25 33L32 41L39 33" stroke="#22C55E" stroke-width="2" stroke-linecap="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 508 B

8
app/static/icons/icon-512.svg Normal file
View file

@ -0,0 +1,8 @@
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="512" height="512" rx="120" fill="#0F172A"/>
<path d="M140 236L256 140L372 236V340C372 353.255 361.255 364 348 364H164C150.745 364 140 353.255 140 340V236Z" fill="white"/>
<circle cx="196" cy="256" r="20" fill="#22C55E"/>
<circle cx="316" cy="256" r="20" fill="#22C55E"/>
<circle cx="256" cy="324" r="20" fill="#22C55E"/>
<path d="M196 256L256 324L316 256" stroke="#22C55E" stroke-width="12" stroke-linecap="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 548 B

11
app/static/logo.svg Normal file
View file

@ -0,0 +1,11 @@
<svg width="720" height="220" viewBox="0 0 720 220" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="720" height="220" rx="28" fill="white"/>
<rect x="28" y="28" width="164" height="164" rx="36" fill="#0F172A"/>
<path d="M72 108L110 74L148 108V146C148 150.418 144.418 154 140 154H80C75.582 154 72 150.418 72 146V108Z" fill="white"/>
<circle cx="92" cy="116" r="8" fill="#22C55E"/>
<circle cx="128" cy="116" r="8" fill="#22C55E"/>
<circle cx="110" cy="136" r="8" fill="#22C55E"/>
<path d="M92 116L110 136L128 116" stroke="#22C55E" stroke-width="4" stroke-linecap="round"/>
<text x="230" y="108" fill="#0F172A" font-size="52" font-family="Inter, Arial, sans-serif" font-weight="700">vereins.haus</text>
<text x="232" y="146" fill="#475569" font-size="22" font-family="Inter, Arial, sans-serif" font-weight="500">Die einfache Vereins-App</text>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 879 B

9
app/vite.config.ts
View file

@ -14,14 +14,13 @@ export default defineConfig({
name: 'vereins.haus', name: 'vereins.haus',
short_name: 'vereins.haus', short_name: 'vereins.haus',
description: 'Vereinsverwaltung die einfach funktioniert', description: 'Vereinsverwaltung die einfach funktioniert',
theme_color: '#1e40af', theme_color: '#0F172A',
background_color: '#f8fafc', background_color: '#0F172A',
display: 'standalone', display: 'standalone',
start_url: '/', start_url: '/',
icons: [ icons: [
{ src: '/icons/icon-192.png', sizes: '192x192', type: 'image/png', purpose: 'any' }, { src: '/icons/icon-512.svg', sizes: '512x512', type: 'image/svg+xml', purpose: 'any maskable' },
{ src: '/icons/icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable' }, { src: '/favicon.svg', sizes: '64x64', type: 'image/svg+xml', purpose: 'any' }
{ src: '/icons/apple-touch-icon.png', sizes: '180x180', type: 'image/png' }
] ]
}, },
injectManifest: { injectManifest: {