oliver/landingpage-go
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Projekte aktualisiert und Design ueberarbeitet
All checks were successful
Deploy go.vanityontour.de / deploy (push) Successful in 7s
Details

Browse source 
VanityCast fehlte komplett, obwohl die App in Version 1.4 im App Store ist.
Neu dazu kommt eine Karte fuer Code & Infrastruktur (Forgejo/GitHub). News und
Stats bleiben aussen vor - beide leiten auf /admin bzw. /login und sind nicht
oeffentlich nutzbar.

Design: Abstands- und Typo-Skala ueber Custom Properties statt frei gewaehlter
Pixelwerte, Karten-Grid auf auto-fit umgestellt, je Projekt ein eigener Akzent
als Farbkante. Dazu Fokus-Ringe fuer Tastaturnutzung, prefers-reduced-motion
und scroll-margin, damit der Sticky-Header keine Ankerziele verdeckt.

Ausgehende Links laufen jetzt ueber die eigenen Kurzlinks, womit die Seite
Klickstatistiken bekommt. Impressum, Datenschutz und Mailto bleiben direkt.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Oliver 2026-07-27 09:45:46 +02:00
parent 94d3a2bae5
commit 03c1a526bd
No known key found for this signature in database
2 changed files with 383 additions and 179 deletions
Download patch file Download diff file Expand all files Collapse all files

358
assets/css/style.css
View file

@ -1,36 +1,76 @@
:root{ :root{
--bg:#0b0f14; --bg:#0b0f14;
--panel:#0f1720;
--panel2:#0c141c;
--text:#e9eef6; --text:#e9eef6;
--muted:#a8b3c2; --muted:#a8b3c2;
--line:rgba(255,255,255,.10); --line:rgba(255,255,255,.10);
--line-strong:rgba(255,255,255,.20);
--accent:#ff9b54; --accent:#ff9b54;
--accent2:#ffd29a; --accent2:#ffd29a;
/* Pro Karte ueberschrieben, damit die Projekte visuell auseinandergehen,
ohne dass jede Karte eine eigene Regel braucht. */
--card-accent: var(--accent);
--shadow: 0 18px 60px rgba(0,0,0,.45); --shadow: 0 18px 60px rgba(0,0,0,.45);
--radius:18px; --radius:18px;
--radius-sm:12px;
--max:1100px; --max:1100px;
--font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
/* Ein Abstands-Raster statt frei gewaehlter Pixelwerte. */
--sp-1:.5rem;
--sp-2:.75rem;
--sp-3:1rem;
--sp-4:1.5rem;
--sp-5:2rem;
--sp-6:3rem;
--sp-7:4.5rem;
--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
"Apple Color Emoji", "Segoe UI Emoji";
color-scheme: dark;
} }
*{ box-sizing:border-box; } *{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }
/* Sticky Header darf Ankerziele nicht verdecken. */
:target{ scroll-margin-top: 6rem; }
body{ body{
margin:0; margin:0;
min-height:100%;
font-family:var(--font); font-family:var(--font);
background: radial-gradient(1200px 700px at 20% -10%, rgba(255,155,84,.18), transparent 65%), background:
radial-gradient(900px 600px at 85% 5%, rgba(255,210,154,.12), transparent 60%), radial-gradient(1200px 700px at 20% -10%, rgba(255,155,84,.18), transparent 65%),
var(--bg); radial-gradient(900px 600px at 85% 5%, rgba(255,210,154,.12), transparent 60%),
var(--bg);
background-attachment: fixed;
color:var(--text); color:var(--text);
line-height:1.55; line-height:1.6;
-webkit-font-smoothing: antialiased;
text-wrap: pretty;
} }
a{ color:inherit; text-decoration:none; } a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; } a:hover{ text-decoration:underline; }
/* Sichtbarer Fokus fuer Tastaturnutzung, aber kein Ring bei Mausklick. */
a:focus-visible,
summary:focus-visible{
outline:2px solid var(--accent2);
outline-offset:3px;
border-radius:6px;
text-decoration:none;
}
img, svg{ max-width:100%; }
h1,h2,h3{ text-wrap: balance; }
.container{ .container{
width: min(var(--max), calc(100% - 40px)); width: min(var(--max), calc(100% - 2.5rem));
margin: 0 auto; margin-inline: auto;
} }
.skip{ .skip{
@ -38,97 +78,95 @@ a:hover{ text-decoration:underline; }
width:1px; height:1px; overflow:hidden; width:1px; height:1px; overflow:hidden;
} }
.skip:focus{ .skip:focus{
left:20px; top:16px; width:auto; height:auto; left:1.25rem; top:1rem; width:auto; height:auto;
padding:10px 14px; border-radius:10px; padding:.625rem .875rem; border-radius:var(--radius-sm);
background:var(--panel); border:1px solid var(--line); background:#0f1720; border:1px solid var(--line-strong);
z-index:999; z-index:999;
} }
/* ---------- Header ---------- */
.site-header{ .site-header{
position:sticky; top:0; z-index:50; position:sticky; top:0; z-index:50;
background: rgba(11,15,20,.75); background: rgba(11,15,20,.72);
backdrop-filter: blur(10px); backdrop-filter: blur(12px);
border-bottom:1px solid var(--line); border-bottom:1px solid var(--line);
} }
.header-inner{ .header-inner{
display:flex; display:flex;
justify-content:space-between; justify-content:space-between;
align-items:center; align-items:center;
padding: 14px 0; padding: var(--sp-2) 0;
gap:16px; gap: var(--sp-3);
flex-wrap:wrap;
} }
.brand{ display:flex; align-items:center; gap:12px; } .brand{ display:flex; align-items:center; gap:var(--sp-2); }
.brand:hover{ text-decoration:none; }
.brand-mark{ filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); } .brand-mark{ filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-title{ font-weight:800; letter-spacing:.2px; } .brand-title{ font-weight:800; letter-spacing:.2px; }
.brand-sub{ font-size:.92rem; color:var(--muted); } .brand-sub{ font-size:.9rem; color:var(--muted); }
.top-nav{ display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end; } .top-nav{ display:flex; gap:var(--sp-1); flex-wrap:wrap; }
.nav-link{ .nav-link{
padding:8px 10px; padding:.5rem .75rem;
border-radius:10px; border-radius:var(--radius-sm);
border:1px solid transparent; border:1px solid transparent;
color:var(--muted); color:var(--muted);
font-size:.95rem;
transition: color .15s ease, border-color .15s ease, background .15s ease;
} }
.nav-link:hover{ .nav-link:hover{
text-decoration:none; text-decoration:none;
color:var(--text); color:var(--text);
border-color: var(--line); border-color: var(--line);
background: rgba(255,255,255,.03); background: rgba(255,255,255,.04);
} }
.hero{ padding: 56px 0 36px; } /* ---------- Hero ---------- */
.hero{ padding: var(--sp-7) 0 var(--sp-6); }
.hero-inner{ .hero-inner{
display:grid; display:grid;
grid-template-columns: 1.2fr .8fr; grid-template-columns: 1.15fr .85fr;
gap: 28px; gap: var(--sp-5);
align-items:center; align-items:center;
} }
.kicker{ .kicker{
display:inline-block; display:inline-block;
padding:6px 10px; padding:.375rem .75rem;
border-radius:999px; border-radius:999px;
border:1px solid var(--line); border:1px solid var(--line);
background: rgba(255,255,255,.03); background: rgba(255,255,255,.03);
color:var(--muted); color:var(--muted);
margin:0 0 14px; font-size:.9rem;
margin:0 0 var(--sp-3);
} }
h1{ h1{
margin:0 0 14px; margin:0 0 var(--sp-3);
font-size: clamp(2.0rem, 3.4vw, 3.2rem); font-size: clamp(2rem, 1.3rem + 2.9vw, 3.4rem);
line-height:1.1; line-height:1.08;
letter-spacing:-.6px; letter-spacing:-.02em;
font-weight:800;
} }
.accent{ color: var(--accent2); } .accent{ color: var(--accent2); }
.lead{ .lead{
margin:0 0 18px; margin:0 0 var(--sp-4);
color:var(--muted); color:var(--muted);
max-width: 52ch; max-width: 52ch;
font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
} }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; } .hero-cta{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-bottom: var(--sp-4); }
.btn{
display:inline-flex; align-items:center; justify-content:center;
padding: 11px 14px;
border-radius: 12px;
border:1px solid var(--line);
background: rgba(255,255,255,.03);
box-shadow: 0 0 0 rgba(0,0,0,0);
font-weight:700;
transition: transform .12s ease, background .12s ease, border-color .12s ease;
white-space:nowrap;
}
.btn:hover{ text-decoration:none; transform: translateY(-1px); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.btn.primary{
border-color: rgba(255,155,84,.55);
background: linear-gradient(180deg, rgba(255,155,84,.28), rgba(255,155,84,.10));
}
.btn.ghost{ color:var(--text); }
.hero-badges{ display:flex; gap:10px; flex-wrap:wrap; } .hero-badges{
display:flex; gap:var(--sp-1); flex-wrap:wrap;
list-style:none; margin:0; padding:0;
}
.badge{ .badge{
font-size:.88rem; font-size:.85rem;
padding:6px 10px; padding:.375rem .75rem;
border-radius:999px; border-radius:999px;
border:1px solid var(--line); border:1px solid var(--line);
color:var(--muted); color:var(--muted);
@ -138,57 +176,115 @@ h1{
.hero-art{ .hero-art{
color: var(--accent); color: var(--accent);
background: linear-gradient(180deg, rgba(255,155,84,.16), rgba(255,155,84,.05)); background: linear-gradient(180deg, rgba(255,155,84,.16), rgba(255,155,84,.05));
border: 1px solid rgba(255,255,255,.10); border: 1px solid var(--line);
border-radius: var(--radius); border-radius: var(--radius);
box-shadow: var(--shadow); box-shadow: var(--shadow);
padding: 14px; padding: var(--sp-2);
} }
.hero-art svg{ width:100%; height:auto; display:block; } .hero-art svg{ width:100%; height:auto; display:block; }
.section{ padding: 44px 0; } /* ---------- Buttons ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center;
padding: .7rem 1.05rem;
border-radius: var(--radius-sm);
border:1px solid var(--line);
background: rgba(255,255,255,.03);
font-weight:700;
font-size:.95rem;
transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{
text-decoration:none;
transform: translateY(-1px);
border-color: var(--line-strong);
background: rgba(255,255,255,.07);
}
.btn:active{ transform: translateY(0); }
.btn.primary{
border-color: color-mix(in srgb, var(--card-accent) 55%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--card-accent) 28%, transparent),
color-mix(in srgb, var(--card-accent) 10%, transparent));
}
.btn.primary:hover{
border-color: color-mix(in srgb, var(--card-accent) 75%, transparent);
}
.btn.ghost{ color: var(--text); }
/* ---------- Sections ---------- */
.section{ padding: var(--sp-6) 0; }
.section.alt{ .section.alt{
background: linear-gradient(180deg, rgba(255,255,255,.02), transparent); background: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
border-top: 1px solid var(--line); border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
} }
.section-head{ margin-bottom: var(--sp-4); }
.section-head h2{ .section-head h2{
margin:0 0 6px; margin:0 0 .375rem;
font-size: 1.6rem; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem);
letter-spacing:-.2px; letter-spacing:-.01em;
} }
.section-head p{ margin:0 0 18px; color:var(--muted); } .section-head p{ margin:0; color:var(--muted); max-width: 60ch; }
/* ---------- Projektkarten ---------- */
.grid{ .grid{
display:grid; display:grid;
grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
gap: 16px; gap: var(--sp-3);
} }
.card{ .card{
position:relative;
overflow:hidden;
border-radius: var(--radius); border-radius: var(--radius);
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
border:1px solid var(--line); border:1px solid var(--line);
box-shadow: 0 10px 40px rgba(0,0,0,.25); box-shadow: 0 10px 40px rgba(0,0,0,.25);
padding: 18px; padding: var(--sp-4);
display:flex; display:flex;
flex-direction:column; flex-direction:column;
gap: var(--sp-3);
justify-content:space-between; justify-content:space-between;
min-height: 210px; transition: border-color .15s ease, transform .15s ease;
} }
.card h3{ margin:8px 0 10px; font-size:1.25rem; } /* Farbkante oben statt bunter Flaeche - ordnet zu, ohne laut zu sein. */
.card p{ margin:0 0 14px; color:var(--muted); } .card::before{
content:"";
position:absolute; inset:0 0 auto 0;
height:3px;
background: linear-gradient(90deg, var(--card-accent), transparent 70%);
opacity:.9;
}
.card:hover{
border-color: color-mix(in srgb, var(--card-accent) 40%, var(--line));
transform: translateY(-2px);
}
.card h3{ margin:.25rem 0 .5rem; font-size:1.3rem; letter-spacing:-.01em; }
.card p{ margin:0; color:var(--muted); }
.card strong{ color: var(--text); font-weight:700; }
.card-meta{
display:flex; align-items:center; gap:var(--sp-1);
flex-wrap:wrap; margin:0;
}
.card-tag{ font-size:.85rem; color:var(--muted); }
.card-actions{ display:flex; gap:var(--sp-1); flex-wrap:wrap; }
.card-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.pill{ .pill{
display:inline-flex; display:inline-flex;
align-items:center; align-items:center;
justify-content:center; padding: .3rem .7rem;
padding: 5px 10px;
border-radius: 999px; border-radius: 999px;
background: rgba(255,155,84,.18); background: color-mix(in srgb, var(--card-accent) 18%, transparent);
border:1px solid rgba(255,155,84,.35); border:1px solid color-mix(in srgb, var(--card-accent) 40%, transparent);
font-size:.85rem; font-size:.8rem;
font-weight:800; font-weight:800;
color: var(--accent2); letter-spacing:.02em;
color: color-mix(in srgb, var(--card-accent) 65%, white);
} }
.pill.subtle{ .pill.subtle{
background: rgba(255,255,255,.05); background: rgba(255,255,255,.05);
@ -196,71 +292,90 @@ h1{
color: var(--muted); color: var(--muted);
} }
.note{ /* Markenfarben der einzelnen Projekte. */
margin-top: 16px; .is-cast{ --card-accent:#34bed1; }
padding: 14px 16px; .is-stay{ --card-accent:#7bd88f; }
border-radius: 14px; .is-expense{ --card-accent:#ffd29a; }
border:1px dashed rgba(255,255,255,.18); .is-code{ --card-accent:#9d8cff; }
background: rgba(255,255,255,.02); .is-blog{ --card-accent:#ff9b54; }
color: var(--muted);
} /* ---------- Support ---------- */
.split{ .split{
display:flex; display:flex;
align-items:center; align-items:center;
justify-content:space-between; justify-content:space-between;
gap: 18px; gap: var(--sp-4);
flex-wrap:wrap; flex-wrap:wrap;
} }
.support-actions{ display:flex; gap:10px; flex-wrap:wrap; } .split-copy{ max-width: 58ch; }
.split-copy h2{ margin:0 0 .5rem; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); }
.split-copy p{ margin:0; color:var(--muted); }
.support-actions{ display:flex; gap:var(--sp-1); flex-wrap:wrap; }
/* ---------- Social & Kontakt ---------- */
.social{ .social{
display:flex; display:flex;
gap:10px; gap:var(--sp-1);
flex-wrap:wrap; flex-wrap:wrap;
margin-bottom: 18px; margin-bottom: var(--sp-4);
} }
.social-link{ .social-link{
border:1px solid var(--line); border:1px solid var(--line);
background: rgba(255,255,255,.03); background: rgba(255,255,255,.03);
padding: 10px 12px; padding: .6rem .9rem;
border-radius: 12px; border-radius: var(--radius-sm);
color: var(--text); color: var(--text);
font-size:.95rem;
transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.social-link:hover{
text-decoration:none;
transform: translateY(-1px);
border-color: var(--line-strong);
background: rgba(255,255,255,.06);
} }
.social-link:hover{ text-decoration:none; transform: translateY(-1px); }
.contact{ .contact{
border-radius: var(--radius); border-radius: var(--radius);
border:1px solid var(--line); border:1px solid var(--line);
background: rgba(255,255,255,.02); background: rgba(255,255,255,.025);
padding: 16px; padding: var(--sp-4);
} }
.contact h3{ margin:0 0 8px; } .contact h3{ margin:0 0 .5rem; }
.fineprint{ margin:10px 0 0; color:var(--muted); font-size:.92rem; } .contact p{ margin:0; color:var(--muted); }
.contact-mail{
color: var(--accent2);
font-weight:700;
word-break: break-word;
}
.fineprint{ margin-top:.75rem !important; font-size:.92rem; }
.fineprint a{ color: var(--accent2); }
/* ---------- FAQ ---------- */
.faq{ .faq{
border-radius: var(--radius); border-radius: var(--radius);
border:1px solid var(--line); border:1px solid var(--line);
background: rgba(255,255,255,.02); background: rgba(255,255,255,.025);
padding: 12px 14px; padding: var(--sp-2) var(--sp-3);
margin: 10px 0; margin-bottom: var(--sp-1);
} }
.faq summary{ .faq summary{
cursor:pointer; cursor:pointer;
font-weight:800; font-weight:700;
} padding: .35rem 0;
.faq-body{ color:var(--muted); padding-top: 10px; } list-style-position: outside;
code{
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: .95em;
background: rgba(255,255,255,.06);
border: 1px solid var(--line);
padding: 2px 6px;
border-radius: 8px;
} }
.faq[open]{ border-color: var(--line-strong); }
.faq-body{ color:var(--muted); padding: .5rem 0 .35rem; }
.faq-body p{ margin:0; }
/* ---------- Footer ---------- */
.site-footer{ .site-footer{
padding: 22px 0; padding: var(--sp-4) 0;
border-top:1px solid var(--line); border-top:1px solid var(--line);
color: var(--muted); color: var(--muted);
} }
@ -268,17 +383,36 @@ code{
display:flex; display:flex;
justify-content:space-between; justify-content:space-between;
align-items:flex-start; align-items:flex-start;
gap: 12px; gap: var(--sp-3);
flex-wrap:wrap; flex-wrap:wrap;
} }
.footer-links{ display:flex; gap:12px; flex-wrap:wrap; } .footer-brand{ margin:0; }
.footer-links{ display:flex; gap:var(--sp-3); flex-wrap:wrap; }
.footer-links a{ color: var(--muted); } .footer-links a{ color: var(--muted); }
.footer-links a:hover{ color: var(--text); text-decoration:none; } .footer-links a:hover{ color: var(--text); text-decoration:none; }
.muted{ color: var(--muted); } .muted{ color: var(--muted); }
/* ---------- Responsive ---------- */
@media (max-width: 900px){ @media (max-width: 900px){
.hero{ padding: var(--sp-5) 0 var(--sp-4); }
.hero-inner{ grid-template-columns: 1fr; } .hero-inner{ grid-template-columns: 1fr; }
.hero-art{ order: -1; } .hero-art{ order: -1; }
.grid{ grid-template-columns: 1fr; } .header-inner{ gap: var(--sp-1); }
}
@media (max-width: 560px){
.brand-sub{ display:none; }
.card-actions .btn,
.hero-cta .btn{ flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*, *::before, *::after{
animation-duration:.01ms !important;
transition-duration:.01ms !important;
}
.btn:hover, .card:hover, .social-link:hover{ transform:none; }
} }

204
index.html
View file

@ -3,18 +3,23 @@
<head> <head>
<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 http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src 'none'; frame-src 'none'; object-src 'none'; upgrade-insecure-requests; block-all-mixed-content;" /> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src 'none'; frame-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'; upgrade-insecure-requests; block-all-mixed-content;" />
<meta name="referrer" content="strict-origin-when-cross-origin" /> <meta name="referrer" content="strict-origin-when-cross-origin" />
<meta name="description" content="Vanity on Tour: Vanlife trifft Technik – Apps, Tools, Blog & Projekte." /> <meta name="description" content="Vanity on Tour: Vanlife trifft Technik. VanityCast, StaySense, Expense Logbook, Blog und Open-Source-Projekte – gebündelt an einem Ort." />
<title>Vanity on Tour – Go</title> <meta name="theme-color" content="#0b0f14" />
<title>Vanity on Tour – Alle Projekte an einem Ort</title>
<!-- Open Graph --> <!-- Open Graph -->
<meta property="og:title" content="Vanity on Tour – Go" /> <meta property="og:title" content="Vanity on Tour – Alle Projekte an einem Ort" />
<meta property="og:description" content="Vanlife trifft Technik – Apps, Tools, Blog & Projekte an einem Ort." /> <meta property="og:description" content="VanityCast, StaySense, Expense Logbook, Blog und Open Source. Vanlife trifft Technik." />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:locale" content="de_DE" />
<meta property="og:site_name" content="Vanity on Tour" />
<meta property="og:url" content="https://go.vanityontour.de/" /> <meta property="og:url" content="https://go.vanityontour.de/" />
<meta property="og:image" content="https://go.vanityontour.de/assets/img/og.jpg" /> <meta property="og:image" content="https://go.vanityontour.de/assets/img/og.jpg" />
<meta name="twitter:card" content="summary_large_image" />
<link rel="canonical" href="https://go.vanityontour.de/" />
<link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml" /> <link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml" />
<link rel="stylesheet" href="/assets/css/style.css" /> <link rel="stylesheet" href="/assets/css/style.css" />
</head> </head>
@ -24,18 +29,18 @@
<header class="site-header"> <header class="site-header">
<div class="container header-inner"> <div class="container header-inner">
<div class="brand"> <a class="brand" href="/" aria-label="Vanity on Tour – Startseite">
<img class="brand-mark" src="/assets/img/van.svg" alt="" width="40" height="40" /> <img class="brand-mark" src="/assets/img/van.svg" alt="" width="40" height="40" />
<div class="brand-text"> <span class="brand-text">
<div class="brand-title">Vanity on Tour</div> <span class="brand-title">Vanity on Tour</span>
<div class="brand-sub">Vanlife trifft Technik</div> <span class="brand-sub">Vanlife trifft Technik</span>
</div> </span>
</div> </a>
<nav class="top-nav" aria-label="Schnellzugriff"> <nav class="top-nav" aria-label="Schnellzugriff">
<a class="nav-link" href="#projekte">Projekte</a> <a class="nav-link" href="#projekte">Projekte</a>
<a class="nav-link" href="#support">Support</a> <a class="nav-link" href="#support">Support</a>
<a class="nav-link" href="#social">Social</a> <a class="nav-link" href="#social">Kontakt</a>
</nav> </nav>
</div> </div>
</header> </header>
@ -47,24 +52,24 @@
<p class="kicker">🚐 unterwegs. technisch. ehrlich.</p> <p class="kicker">🚐 unterwegs. technisch. ehrlich.</p>
<h1>Alles Wichtige von <span class="accent">Vanity on Tour</span> – an einem Ort.</h1> <h1>Alles Wichtige von <span class="accent">Vanity on Tour</span> – an einem Ort.</h1>
<p class="lead"> <p class="lead">
Tools, Apps, Blog & Projekte – für Menschen, die lieber frei stehen als still sitzen. Apps, Tools, Blog und Open Source – für Menschen, die lieber frei stehen
als still sitzen.
</p> </p>
<div class="hero-cta"> <div class="hero-cta">
<a class="btn primary" href="#projekte">Aktuelle Projekte</a> <a class="btn primary" href="#projekte">Projekte ansehen</a>
<a class="btn ghost" href="https://vanityontour.de" target="_blank" rel="noopener">Zum Blog</a> <a class="btn ghost" href="https://go.vanityontour.de/blog" rel="noopener">Zum Blog</a>
</div> </div>
<div class="hero-badges" aria-label="Highlights"> <ul class="hero-badges" aria-label="Eigenschaften">
<span class="badge">Schnell</span> <li class="badge">Ohne Konto nutzbar</li>
<span class="badge">Mobile‑first</span> <li class="badge">Kein Tracking durch Dritte</li>
<span class="badge">DSGVO‑freundlich</span> <li class="badge">Selbst gehostet</li>
</div> </ul>
</div> </div>
<div class="hero-art" aria-hidden="true"> <div class="hero-art" aria-hidden="true">
<!-- Lightweight inline SVG (no external images required) --> <svg viewBox="0 0 540 420" focusable="false">
<svg viewBox="0 0 540 420" role="img" aria-label="">
<defs> <defs>
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1"> <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="currentColor" stop-opacity="0.35" /> <stop offset="0%" stop-color="currentColor" stop-opacity="0.35" />
@ -92,64 +97,105 @@
<div class="container"> <div class="container">
<div class="section-head"> <div class="section-head">
<h2>Projekte</h2> <h2>Projekte</h2>
<p>Das Zeug, das wirklich klickt. (Und hoffentlich dein Vanlife leichter macht.)</p> <p>Apps und Werkzeuge, die im Van entstanden sind – und dort auch benutzt werden.</p>
</div> </div>
<div class="grid"> <div class="grid">
<article class="card"> <article class="card is-cast">
<div class="card-top"> <div class="card-top">
<span class="pill">Neu</span> <p class="card-meta">
<h3>StaySense</h3> <span class="pill">iOS App</span>
<span class="card-tag">Version 1.4</span>
</p>
<h3>VanityCast</h3>
<p> <p>
Standort-Infos für Camper: Umwelt‑Kontext, Umgebung & nützliche Hinweise – Die Podcast-App für bewusstes Hören: eigene Audio-Engine mit
direkt im Browser. <strong>Spots in der Nähe</strong> sind geplant (2026). Lautstärke-Angleichung und Smart Speed, smarte Inbox, Hörstatistiken
und Playlisten. Läuft auf iPhone und CarPlay – <strong>komplett ohne Konto</strong>.
</p> </p>
</div> </div>
<div class="card-actions"> <div class="card-actions">
<a class="btn primary" href="https://staysense.vanityontour.de" target="_blank" rel="noopener">StaySense öffnen</a> <a class="btn primary" href="https://go.vanityontour.de/vanitycast-ios" rel="noopener">Im App Store laden</a>
<a class="btn ghost" href="https://landing.staysense.vanityontour.de" target="_blank" rel="noopener noreferrer">Was kann das?</a> <a class="btn ghost" href="https://go.vanityontour.de/vanitycast-web" rel="noopener">Alle Funktionen</a>
<a class="btn ghost" href="https://go.vanityontour.de/vanitycast" rel="noopener">Beta testen</a>
</div> </div>
</article> </article>
<article class="card"> <article class="card is-stay">
<div class="card-top"> <div class="card-top">
<span class="pill subtle">App</span> <p class="card-meta">
<span class="pill subtle">Web-App</span>
</p>
<h3>StaySense</h3>
<p>
Standort-Check fürs Vanlife: Umwelt-Kontext, Umgebung und nützliche
Hinweise – direkt im Browser, ohne Store-Download.
<strong>Spots in der Nähe</strong> sind für 2026 geplant.
</p>
</div>
<div class="card-actions">
<a class="btn primary" href="https://go.vanityontour.de/staysense" rel="noopener">StaySense öffnen</a>
<a class="btn ghost" href="https://go.vanityontour.de/staysense-info" rel="noopener">Was kann das?</a>
</div>
</article>
<article class="card is-expense">
<div class="card-top">
<p class="card-meta">
<span class="pill subtle">App</span>
</p>
<h3>Vanity Expense Logbook</h3> <h3>Vanity Expense Logbook</h3>
<p> <p>
Ausgaben & Fahrten im Griff – fürs Leben unterwegs. Ausgaben und Fahrten im Griff – fürs Leben unterwegs.
Ideal, wenn du wissen willst, wohin dein Geld fährt. Ideal, wenn du wissen willst, wohin dein Geld fährt.
</p> </p>
</div> </div>
<div class="card-actions"> <div class="card-actions">
<a class="btn primary" href="https://app.vanityontour.de" target="_blank" rel="noopener">Mehr erfahren</a> <a class="btn primary" href="https://go.vanityontour.de/expense" rel="noopener">Mehr erfahren</a>
<a class="btn ghost" href="mailto:app@vanityontour.de">Feedback geben</a> <a class="btn ghost" href="mailto:app@vanityontour.de">Feedback geben</a>
</div> </div>
</article> </article>
<article class="card"> <article class="card is-code">
<div class="card-top"> <div class="card-top">
<span class="pill subtle">Blog</span> <p class="card-meta">
<h3>Vanity on Tour</h3> <span class="pill subtle">Open Source</span>
</p>
<h3>Code &amp; Infrastruktur</h3>
<p> <p>
Produkttests, Stellplatz‑Tests, Technik‑Kram und gesellschaftliche Themen – Werkzeuge, Landingpages und Automatisierungen liegen offen –
ohne Marketing-Zuckerguss. auf der eigenen Forgejo-Instanz und gespiegelt nach GitHub.
Selbst gehostet, weil es geht.
</p> </p>
</div> </div>
<div class="card-actions"> <div class="card-actions">
<a class="btn primary" href="https://vanityontour.de" target="_blank" rel="noopener">Zum Blog</a> <a class="btn primary" href="https://go.vanityontour.de/git" rel="noopener">Forgejo</a>
<a class="btn ghost" href="https://vanityontour.de" target="_blank" rel="noopener">Neueste Artikel</a> <a class="btn ghost" href="https://go.vanityontour.de/github" rel="noopener">GitHub</a>
</div> </div>
</article> </article>
<article class="card is-blog">
<div class="card-top">
<p class="card-meta">
<span class="pill subtle">Blog</span>
</p>
<h3>Vanity on Tour</h3>
<p>
Produkttests, Stellplatz-Tests, Technik-Kram und gesellschaftliche
Themen – ohne Marketing-Zuckerguss.
</p>
</div>
<div class="card-actions">
<a class="btn primary" href="https://go.vanityontour.de/blog" rel="noopener">Zum Blog</a>
</div>
</article>
</div> </div>
</div>
<div style="height: 3rem;"></div>
</section> </section>
<section id="support" class="section alt"> <section id="support" class="section alt">
<div class="container split"> <div class="container split">
<div> <div class="split-copy">
<h2>Support</h2> <h2>Support</h2>
<p> <p>
Wenn dir meine Tools, Tests oder Artikel helfen: Ein kleiner Support ist wie ein Wenn dir meine Tools, Tests oder Artikel helfen: Ein kleiner Support ist wie ein
@ -157,7 +203,7 @@
</p> </p>
</div> </div>
<div class="support-actions"> <div class="support-actions">
<a class="btn primary" href="https://ko-fi.com/vanityontour" target="_blank" rel="noopener">Support-Seite öffnen</a> <a class="btn primary" href="https://go.vanityontour.de/support" rel="noopener">Support-Seite öffnen</a>
<a class="btn ghost" href="#contact">Kooperation anfragen</a> <a class="btn ghost" href="#contact">Kooperation anfragen</a>
</div> </div>
</div> </div>
@ -166,26 +212,29 @@
<section id="social" class="section"> <section id="social" class="section">
<div class="container"> <div class="container">
<div class="section-head"> <div class="section-head">
<h2>Social & Kontakt</h2> <h2>Social &amp; Kontakt</h2>
<p>Such dir den Kanal aus – ich bin nicht wählerisch.</p> <p>Such dir den Kanal aus – ich bin nicht wählerisch.</p>
</div> </div>
<div class="social"> <nav class="social" aria-label="Social-Media-Kanäle">
<a class="social-link" href="https://vanityontour.de" target="_blank" rel="noopener" aria-label="Website">🌐 Website</a> <a class="social-link" href="https://go.vanityontour.de/blog" rel="noopener"><span aria-hidden="true">🌐</span> Website</a>
<a class="social-link" href="https://github.com/OliverGiertz" target="_blank" rel="noopener" aria-label="GitHub">💻 GitHub</a> <a class="social-link" href="https://go.vanityontour.de/git" rel="noopener"><span aria-hidden="true">🧑‍💻</span> Forgejo</a>
<a class="social-link" href="https://www.instagram.com/vanity.on.tour/" target="_blank" rel="noopener" aria-label="Instagram">📷 Instagram</a> <a class="social-link" href="https://go.vanityontour.de/github" rel="noopener"><span aria-hidden="true">💻</span> GitHub</a>
<a class="social-link" href="https://bsky.app/profile/olivergiertz.bsky.social" target="_blank" rel="noopener" aria-label="Bluesky">🦋 Bluesky</a> <a class="social-link" href="https://go.vanityontour.de/instagram" rel="noopener"><span aria-hidden="true">📷</span> Instagram</a>
<a class="social-link" href="https://x.com/olivergiertz" target="_blank" rel="noopener" aria-label="X">𝕏 Twitter</a> <a class="social-link" href="https://go.vanityontour.de/bluesky" rel="noopener"><span aria-hidden="true">🦋</span> Bluesky</a>
</div> <a class="social-link" href="https://go.vanityontour.de/x" rel="noopener"><span aria-hidden="true">𝕏</span> Twitter</a>
</nav>
<div id="contact" class="contact"> <div id="contact" class="contact">
<h3>Kontakt</h3> <h3>Kontakt</h3>
<p> <p>
Für Kooperationen, Presse oder „Kannst du mal eben…?“ Für Kooperationen, Presse oder „Kannst du mal eben…?“<br />
<br /> <a class="contact-mail" href="mailto:kontakt@vanityontour.de">kontakt@vanityontour.de</a>
<a href="mailto:kontakt@vanityontour.de">kontakt@vanityontour.de</a> </p>
<p class="fineprint">
Fragen zu einer App? Dann direkt an
<a href="mailto:app@vanityontour.de">app@vanityontour.de</a>.
</p> </p>
<div style="height: 2rem;"></div>
</div> </div>
</div> </div>
</section> </section>
@ -193,45 +242,66 @@
<section id="faq" class="section alt"> <section id="faq" class="section alt">
<div class="container"> <div class="container">
<div class="section-head"> <div class="section-head">
<h2>Mini‑FAQ</h2> <h2>Mini-FAQ</h2>
<p>Damit niemand raten muss, was Sache ist.</p> <p>Damit niemand raten muss, was Sache ist.</p>
</div> </div>
<details class="faq">
<summary>Was ist VanityCast?</summary>
<div class="faq-body">
<p>
Eine Podcast-App für iPhone und CarPlay, die auf bewusstes Hören ausgelegt ist:
smarte Inbox statt endloser Feed-Liste, Hörstatistiken, eigene Audio-Engine.
Es gibt keinen Account und keine Registrierung.
</p>
</div>
</details>
<details class="faq"> <details class="faq">
<summary>Ist StaySense eine App?</summary> <summary>Ist StaySense eine App?</summary>
<div class="faq-body"> <div class="faq-body">
<p> <p>
Eher eine Website, die sich wie eine App anfühlt. Du kannst sie überall nutzen – Eher eine Website, die sich wie eine App anfühlt. Du kannst sie überall nutzen –
ohne Store‑Download: <a href="https://staysense.vanityontour.de" target="_blank" rel="noopener">staysense.vanityontour.de</a> ohne Store-Download.
</p> </p>
</div> </div>
</details> </details>
<details class="faq"> <details class="faq">
<summary>StaySense - Warum keine Spots?</summary> <summary>StaySense – warum keine Spots?</summary>
<div class="faq-body"> <div class="faq-body">
<p> <p>
Fokus auf Standort‑Infos statt „hier ist ein Spot“. Spots in der Nähe sind geplant – Fokus auf Standort-Infos statt „hier ist ein Spot“. Spots in der Nähe sind geplant –
aber erst, wenn es sauber & sinnvoll umgesetzt ist. aber erst, wenn es sauber und sinnvoll umgesetzt ist.
</p> </p>
</div> </div>
</details> </details>
<details class="faq">
<summary>Warum laufen die Links über go.vanityontour.de?</summary>
<div class="faq-body">
<p>
Alle Weiterleitungen laufen über einen selbst gehosteten Kurzlink-Dienst auf dem
eigenen Server. Kein Bitly, keine Weitergabe an Dritte – und Ziele bleiben
änderbar, ohne dass ein gedruckter QR-Code neu gemacht werden muss.
</p>
</div>
</details>
</div> </div>
</section> </section>
</main> </main>
<footer class="site-footer"> <footer class="site-footer">
<div class="container footer-inner"> <div class="container footer-inner">
<div> <p class="footer-brand">
<strong>Oliver / Vanity on Tour</strong><br/> <strong>Oliver / Vanity on Tour</strong><br/>
<span class="muted">Vanlife seit Jahren – Technik im Kopf, Staub an den Reifen.</span> <span class="muted">Vanlife seit Jahren – Technik im Kopf, Staub an den Reifen.</span>
</div> </p>
<div class="footer-links"> <nav class="footer-links" aria-label="Rechtliches">
<a href="https://vanityontour.de/impressum" target="_blank" rel="noopener">Impressum</a> <a href="https://vanityontour.de/impressum" target="_blank" rel="noopener">Impressum</a>
<a href="https://vanityontour.de/datenschutz" target="_blank" rel="noopener">Datenschutz</a> <a href="https://vanityontour.de/datenschutz" target="_blank" rel="noopener">Datenschutz</a>
</div> </nav>
</div> </div>
</footer> </footer>
</body> </body>