From 61d9208578f38cf05de38cf9212f37d0b229fd08 Mon Sep 17 00:00:00 2001 From: Emirhan Sahin <2023251@stud.hs-mannheim.de> Date: Mon, 28 Sep 2026 18:07:19 +0000 Subject: [PATCH] fix: Navbar-Layout in index.html korrigiert und Skip-Link entfernt --- index.html | 233 ------------------ src/components/navigationsbar/navigation.html | 16 +- src/styles/navigation.css | 21 +- 3 files changed, 12 insertions(+), 258 deletions(-) diff --git a/index.html b/index.html index ef2e8d7..1e74bb1 100644 --- a/index.html +++ b/index.html @@ -10,9 +10,6 @@ /> Ernährung · Tri-hub - - - @@ -151,236 +148,6 @@ background: rgba(16, 185, 129, 0.14); } - /* ===== Navigationsleiste ===== */ - .skip-link { - position: absolute; - top: -100px; - left: 16px; - z-index: 100; - padding: 10px 16px; - border-radius: 8px; - background: var(--green); - color: #04150e; - font-weight: 700; - } - - .skip-link:focus { - top: 12px; - } - - .navbar { - position: sticky; - top: 0; - z-index: 50; - border-bottom: 1px solid rgba(248, 250, 252, 0.08); - background: rgba(13, 13, 26, 0.84); - backdrop-filter: blur(18px); - -webkit-backdrop-filter: blur(18px); - } - - .navbar__inner { - position: relative; - width: min(var(--max), calc(100% - 40px)); - min-height: 76px; - margin: 0 auto; - display: flex; - align-items: center; - justify-content: space-between; - gap: 24px; - } - - .navbar__brand { - display: flex; - align-items: center; - gap: 12px; - min-width: 0; - } - - .navbar__logo-img { - width: 40px; - height: 40px; - flex: none; - object-fit: contain; - } - - .navbar__brand-text { - display: flex; - flex-direction: column; - line-height: 1.2; - } - - .navbar__brand-title { - color: var(--white); - font-size: 1.15rem; - font-weight: 700; - letter-spacing: 0.04em; - } - - .navbar__brand-tagline { - color: var(--muted); - font-size: 0.72rem; - } - - .navbar__toggle { - display: none; - width: 44px; - height: 44px; - padding: 0; - border: 1px solid var(--line); - border-radius: 10px; - background: transparent; - color: var(--white); - cursor: pointer; - align-items: center; - justify-content: center; - } - - .navbar__toggle-icon, - .navbar__toggle-icon::before, - .navbar__toggle-icon::after { - display: block; - width: 20px; - height: 2px; - border-radius: 2px; - background: currentColor; - transition: - transform 0.2s ease, - opacity 0.2s ease; - } - - .navbar__toggle-icon { - position: relative; - } - - .navbar__toggle-icon::before, - .navbar__toggle-icon::after { - content: ""; - position: absolute; - left: 0; - } - - .navbar__toggle-icon::before { - top: -6px; - } - - .navbar__toggle-icon::after { - top: 6px; - } - - .navbar__toggle[aria-expanded="true"] .navbar__toggle-icon { - background: transparent; - } - - .navbar__toggle[aria-expanded="true"] .navbar__toggle-icon::before { - transform: translateY(6px) rotate(45deg); - } - - .navbar__toggle[aria-expanded="true"] .navbar__toggle-icon::after { - transform: translateY(-6px) rotate(-45deg); - } - - .navbar__menu { - display: flex; - align-items: center; - gap: 22px; - margin: 0; - padding: 0; - list-style: none; - color: var(--muted); - font-size: 0.9rem; - font-weight: 500; - } - - .navbar__link { - display: inline-flex; - align-items: center; - gap: 6px; - transition: color 0.2s ease; - } - - .navbar__link:hover, - .navbar__link[aria-current="page"] { - color: var(--white); - } - - .navbar__link--home { - padding: 9px 14px; - border: 1px solid rgba(16, 185, 129, 0.42); - border-radius: 999px; - color: var(--white); - background: rgba(16, 185, 129, 0.07); - } - - .navbar__link--home:hover { - background: rgba(16, 185, 129, 0.14); - } - - .navbar__home-icon { - display: inline-flex; - width: 18px; - height: 18px; - } - - .navbar__home-icon svg { - width: 100%; - height: 100%; - } - - .navbar a:focus-visible, - .navbar__toggle:focus-visible { - outline: 2px solid var(--green); - outline-offset: 3px; - } - - @media (max-width: 1024px) { - .navbar__toggle { - display: inline-flex; - } - - .navbar__nav { - position: absolute; - top: 100%; - right: 0; - left: 0; - display: none; - padding: 12px 0 20px; - border-bottom: 1px solid var(--line); - background: rgba(13, 13, 26, 0.97); - } - - .navbar__nav.is-open { - display: block; - } - - .navbar__menu { - flex-direction: column; - align-items: stretch; - gap: 4px; - } - - .navbar__link { - display: flex; - padding: 12px 4px; - font-size: 1rem; - } - - .navbar__link--home { - justify-content: center; - margin-top: 8px; - } - } - - @media (max-width: 600px) { - .navbar__inner { - width: min(var(--max), calc(100% - 28px)); - min-height: 68px; - } - - .navbar__brand-tagline { - display: none; - } - } - .container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; diff --git a/src/components/navigationsbar/navigation.html b/src/components/navigationsbar/navigation.html index 255751a..00be4db 100644 --- a/src/components/navigationsbar/navigation.html +++ b/src/components/navigationsbar/navigation.html @@ -1,8 +1,10 @@ - -