danielkrause/it-hilf-sofort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile: Hamburger-Menü ☰ — nur Logo + Icon im Header

Browse Source 
- Button-Text 'Menü' durch ☰ ersetzt (1.6rem, 44x44px Touch-Target)
- Nav display:flex aus inline-style entfernt → jetzt im CSS
- Mobile: nur Logo + Hamburger sichtbar, Nav per CSS versteckt
- aria-label 'Menü' für Accessibility
This commit is contained in:
Hermes Agent
2026-06-25 19:41:36 +02:00
parent 1ec35411da
commit 9375f9d426
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.py
+6 -4
View File
@@ -57,7 +57,9 @@ def _base_template(title: str, content: str, active: str = "") -> str:
.site-header .logo::before{{content:'';display:inline-block;width:28px;height:28px;background:linear-gradient(135deg,#20228a,#3b4fd4);border-radius:6px}} .site-header .logo::before{{content:'';display:inline-block;width:28px;height:28px;background:linear-gradient(135deg,#20228a,#3b4fd4);border-radius:6px}}
.nav-link{{color:#4a5568;text-decoration:none;font-size:0.9rem;padding:0.5rem 0.75rem;border-radius:6px;transition:all 0.15s;font-weight:500}} .nav-link{{color:#4a5568;text-decoration:none;font-size:0.9rem;padding:0.5rem 0.75rem;border-radius:6px;transition:all 0.15s;font-weight:500}}
.nav-link:hover,.nav-link.active{{color:#20228a;background:#f0f2ff}} .nav-link:hover,.nav-link.active{{color:#20228a;background:#f0f2ff}}
.menu-toggle{{background:none;border:none;color:#4a5568;font-size:0.9rem;font-weight:600;cursor:pointer;padding:0.5rem;display:none}} .menu-toggle{{background:none;border:none;color:#1a1a2e;font-size:1.5rem;cursor:pointer;padding:0.5rem;display:none;line-height:1;width:40px;height:40px;border-radius:8px;transition:background 0.15s}}
.menu-toggle:hover{{background:#f0f2f5}}
nav#mainNav{{display:flex;align-items:center;gap:0.25rem}}
.hero{{background:linear-gradient(135deg,#20228a 0%,#2d3496 40%,#1a1e6e 100%);color:#fff;padding:6rem 2rem;text-align:center;position:relative;overflow:hidden}} .hero{{background:linear-gradient(135deg,#20228a 0%,#2d3496 40%,#1a1e6e 100%);color:#fff;padding:6rem 2rem;text-align:center;position:relative;overflow:hidden}}
.hero::after{{content:'';position:absolute;top:-50%;right:-20%;width:500px;height:500px;background:rgba(255,255,255,0.03);border-radius:50%;pointer-events:none}} .hero::after{{content:'';position:absolute;top:-50%;right:-20%;width:500px;height:500px;background:rgba(255,255,255,0.03);border-radius:50%;pointer-events:none}}
.hero h1{{font-size:2.8rem;font-weight:800;letter-spacing:-0.03em;line-height:1.15;margin-bottom:1.25rem;position:relative;z-index:1}} .hero h1{{font-size:2.8rem;font-weight:800;letter-spacing:-0.03em;line-height:1.15;margin-bottom:1.25rem;position:relative;z-index:1}}
@@ -140,7 +142,7 @@ def _base_template(title: str, content: str, active: str = "") -> str:
.contact-info h3{{margin-bottom:1rem}} .contact-info h3{{margin-bottom:1rem}}
.contact-info p{{margin-bottom:0.5rem}} .contact-info p{{margin-bottom:0.5rem}}
@media(max-width:767px){{ @media(max-width:767px){{
.menu-toggle{{display:block}} .menu-toggle{{display:flex;align-items:center;justify-content:center;font-size:1.6rem;width:44px;height:44px}}
.site-header{{padding:0 1rem;height:56px}} .site-header{{padding:0 1rem;height:56px}}
.site-header .logo{{font-size:0.9rem}} .site-header .logo{{font-size:0.9rem}}
.site-header .logo::before{{width:22px;height:22px}} .site-header .logo::before{{width:22px;height:22px}}
@@ -197,8 +199,8 @@ def _base_template(title: str, content: str, active: str = "") -> str:
<body> <body>
<header class="site-header"> <header class="site-header">
<a href="/" class="logo">IT-Hilfe-Sofort.de</a> <a href="/" class="logo">IT-Hilfe-Sofort.de</a>
<button class="menu-toggle" onclick="document.getElementById('mainNav').classList.toggle('open')">Menü</button> <button class="menu-toggle" onclick="document.getElementById('mainNav').classList.toggle('open')" aria-label="Menü">☰</button>
<nav id="mainNav" style="display:flex;align-items:center;gap:0.25rem"> <nav id="mainNav">
<a href="/" class="nav-link{" active" if active == "home" else ""}">Startseite</a> <a href="/" class="nav-link{" active" if active == "home" else ""}">Startseite</a>
<a href="/blog/telematik-vorschriften" class="nav-link{" active" if active == "blog" else ""}">Blog</a> <a href="/blog/telematik-vorschriften" class="nav-link{" active" if active == "blog" else ""}">Blog</a>
<a href="/leistungen/pflegedienste" class="nav-link{" active" if active == "leistungen" else ""}">Leistungen</a> <a href="/leistungen/pflegedienste" class="nav-link{" active" if active == "leistungen" else ""}">Leistungen</a>