mobile: Hamburger-Menü ☰ — nur Logo + Icon im Header
- 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:
@@ -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}}
|
||||
.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}}
|
||||
.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::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}}
|
||||
@@ -140,7 +142,7 @@ def _base_template(title: str, content: str, active: str = "") -> str:
|
||||
.contact-info h3{{margin-bottom:1rem}}
|
||||
.contact-info p{{margin-bottom:0.5rem}}
|
||||
@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 .logo{{font-size:0.9rem}}
|
||||
.site-header .logo::before{{width:22px;height:22px}}
|
||||
@@ -197,8 +199,8 @@ def _base_template(title: str, content: str, active: str = "") -> str:
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<a href="/" class="logo">IT-Hilfe-Sofort.de</a>
|
||||
<button class="menu-toggle" onclick="document.getElementById('mainNav').classList.toggle('open')">Menü</button>
|
||||
<nav id="mainNav" style="display:flex;align-items:center;gap:0.25rem">
|
||||
<button class="menu-toggle" onclick="document.getElementById('mainNav').classList.toggle('open')" aria-label="Menü">☰</button>
|
||||
<nav id="mainNav">
|
||||
<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="/leistungen/pflegedienste" class="nav-link{" active" if active == "leistungen" else ""}">Leistungen</a>
|
||||
|
||||
Reference in New Issue
Block a user