3024588
/
trihub-ernaehrung-advinters
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor navigation structure and styles for improved consistency and usability

Sprint2/rev
koriboh 2026-09-29 19:46:41 +02:00
parent dc0de8df76
commit c592bff01a
5 changed files with 37 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
css/kontakt.css
View File

@ -105,88 +105,7 @@
max-width: 660px; max-width: 660px;
} }
/* ---------- Header ---------- */ /* Die Navigationsleiste oben wird von css/navigation.css gestylt (.site-navigation). */
.kontakt-seite .site-header {
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 16px 0;
background: rgba(7, 20, 25, 0.85);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
}
.kontakt-seite .site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: min(100% - 48px, calc(var(--container) + 48px));
}
.kontakt-seite .brand {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
color: inherit;
}
.kontakt-seite .brand__logo img {
display: block;
height: 52px;
width: auto;
border-radius: 12px;
border: 1px solid var(--border);
background: #fff;
}
.kontakt-seite .brand__name {
display: block;
font-family: var(--font-display);
font-weight: 700;
letter-spacing: 0.06em;
color: var(--text-primary);
}
.kontakt-seite .brand__label {
display: block;
font-size: 0.8rem;
color: var(--text-muted);
}
.kontakt-seite .header-nav {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.kontakt-seite .header-nav a {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
padding: 0 14px;
border-radius: 999px;
color: var(--text-muted);
text-decoration: none;
font-size: 0.92rem;
transition: background-color 0.15s ease, color 0.15s ease;
}
.kontakt-seite .header-nav a:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--text-primary);
}
.kontakt-seite .header-nav a.nav-back {
border: 1px solid var(--border);
}
/* ---------- Hero ---------- */ /* ---------- Hero ---------- */
@ -698,11 +617,6 @@
gap: 32px; gap: 32px;
} }
.kontakt-seite .site-header .container {
flex-direction: column;
align-items: flex-start;
}
.kontakt-seite .map-frame { .kontakt-seite .map-frame {
height: 380px; height: 380px;
} }

9
css/navigation.css
View File

@ -1,4 +1,4 @@
/* Shahnam und Vincent: Gemeinsame Navigation für US 04-05. */ /* Shahnam und Vincent: Gemeinsame Navigation für US 04-05. */
:root { :root {
--navigation-height: 99px; --navigation-height: 99px;
scroll-padding-top: calc(var(--navigation-offset, var(--navigation-height)) + 16px); scroll-padding-top: calc(var(--navigation-offset, var(--navigation-height)) + 16px);
@ -70,8 +70,15 @@
white-space: nowrap; white-space: nowrap;
} }
/* Hover-Highlight, übernommen aus der ursprünglichen Navigationsleiste in kontakt.css. */
.site-navigation__links a {
border-radius: 8px;
transition: background-color 0.15s ease, color 0.15s ease;
}
.site-navigation__links a:hover, .site-navigation__links a:hover,
.site-navigation__links a:focus-visible { .site-navigation__links a:focus-visible {
background: rgb(255 255 255 / 6%);
color: var(--text-primary); color: var(--text-primary);
} }

35
html/kontakt.html
View File

@ -11,31 +11,38 @@
href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Sora:wght@400;600;700&display=swap" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Sora:wght@400;600;700&display=swap"
rel="stylesheet"> rel="stylesheet">
<link rel="stylesheet" href="../css/site.css"> <link rel="stylesheet" href="../css/site.css">
<link rel="stylesheet" href="../css/navigation.css">
<link rel="stylesheet" href="../css/kontakt.css"> <link rel="stylesheet" href="../css/kontakt.css">
<script src="../js/navigation.js" defer></script>
<script src="../js/kontakt.js" defer></script> <script src="../js/kontakt.js" defer></script>
</head> </head>
<body> <body>
<div class="kontakt-seite"> <div class="kontakt-seite">
<!-- Header --> <!-- Gemeinsame Navigation (Styles: css/navigation.css) -->
<header class="site-header"> <header class="site-navigation">
<div class="container"> <div class="site-navigation__bar">
<a class="brand" href="../index.html"> <div class="brand">
<span class="brand__logo"> <a class="brand__logo" href="../index.html" aria-label="Zurück zur Übersicht">
<img src="../images/trihub-logo.jpg" alt="Trihub – fit und vital ab 50!" width="1024" height="1024"> <img src="../images/trihub-logo.jpg" alt="Trihub – fit und vital ab 50!" width="1024" height="1024">
</span> </a>
<span class="brand__text"> <div class="brand__text">
<span class="brand__name">TRI-HUB</span> <span class="brand__name">TRI-HUB</span>
<span class="brand__label">Kontakt &amp; Unterstützung</span> <span class="brand__label">Kontakt &amp; Unterstützung</span>
</span> </div>
</a> </div>
<nav class="header-nav" aria-label="Seitennavigation"> <button class="menu-toggle" type="button" aria-controls="navigation-links" aria-expanded="false"
<a href="#nachricht">Nachricht</a> aria-label="Menü öffnen">☰</button>
<a href="#kontaktinfos">Kontaktinfos</a> <nav class="site-navigation__links" id="navigation-links" aria-label="Seitennavigation">
<a href="#standort">Standort</a> <ul>
<a class="nav-back" href="../index.html">Zurück zur Übersicht</a> <li><a href="#nachricht">Nachricht</a></li>
<li><a href="#kontaktinfos">Kontaktinfos</a></li>
<li><a href="#standort">Standort</a></li>
<li><a href="../index.html">Zurück zur Übersicht</a></li>
</ul>
</nav> </nav>
</div> </div>
<div class="site-navigation__backdrop" aria-hidden="true"></div>
</header> </header>
<main id="main-content"> <main id="main-content">

4
index.html
View File

@ -43,7 +43,7 @@
<li><a href="#leistungen">Pakete</a></li> <li><a href="#leistungen">Pakete</a></li>
<li><a href="#berater">Berater</a></li> <li><a href="#berater">Berater</a></li>
<li><a href="#beratung">Infos</a></li> <li><a href="#beratung">Infos</a></li>
<li><a href="../html/kontakt.html">Kontakt</a></li> <li><a href="html/kontakt.html">Kontakt</a></li>
</ul> </ul>
</nav> </nav>
</div> </div>
@ -201,7 +201,7 @@
<p>Vereinbare ein unverbindliches Kennenlerngespräch – wir schauen gemeinsam, ob die Beratung zu <p>Vereinbare ein unverbindliches Kennenlerngespräch – wir schauen gemeinsam, ob die Beratung zu
dir dir
passt.</p> passt.</p>
<a class="btn btn-primary" href="../trihub-ernaehrung-advinters/html/kontakt.html">Jetzt unverbindlich anfragen</a> <a class="btn btn-primary" href="html/kontakt.html">Jetzt unverbindlich anfragen</a>
</div> </div>
</div> </div>

7
js/navigation.js
View File

@ -1,4 +1,4 @@
(() => { (() => {
const navigation = document.querySelector('.site-navigation'); const navigation = document.querySelector('.site-navigation');
if (!navigation) return; if (!navigation) return;
@ -27,7 +27,10 @@
const link = event.target.closest('a'); const link = event.target.closest('a');
if (!link || !mobileView.matches) return; if (!link || !mobileView.matches) return;
setMenuOpen(false); setMenuOpen(false);
const target = document.querySelector(link.getAttribute('href')); // Nur Anker-Sprünge innerhalb der Seite; Links zu anderen Seiten übernimmt der Browser.
const href = link.getAttribute('href');
if (!href || !href.startsWith('#')) return;
const target = document.querySelector(href);
if (target) { if (target) {
const hadTabindex = target.hasAttribute('tabindex'); const hadTabindex = target.hasAttribute('tabindex');
if (!hadTabindex) target.setAttribute('tabindex', '-1'); if (!hadTabindex) target.setAttribute('tabindex', '-1');