From eba4a133454e6c4affa9af333a6305b3ca2d63e9 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Sun, 2 Aug 2026 16:27:38 +0200 Subject: [PATCH] =?UTF-8?q?Nav-Bar:=20Men=C3=BC=20n=C3=A4her=20ans=20Logo?= =?UTF-8?q?=20(statt=20rechts=20an=20die=20Kante=20gepresst)=20+=20Polarli?= =?UTF-8?q?cht-Kategorien?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - .nav-bar: justify-content von space-between auf flex-start + eigenen Gap gewechselt — Menü rückt näher ans Logo, übriger Platz bleibt rechts statt als große Lücke zwischen Logo und "Start" zu klaffen. - .nav-links Abstand nochmal erhöht (2.1rem -> 2.4rem), da "Start"/ "Manager" laut Rückmeldung immer noch zu eng wirkten. - Jede Nav-Kategorie (DogFather/HasiDog/Manager/Medien/Start) bekommt jetzt einen dezenten, augenschonenden Polarlicht-Schimmer in den ECHTEN Farben ihrer jeweiligen Welt (aus theme-dogfather/-hasidog/ -spicymedia.css) — ruhig im Normalzustand, etwas kräftiger bei Hover/ offenem Dropdown. "Links" bleibt bewusst neutral (keine eigene Welt). --- assets/css/main.css | 62 ++++++++++++++++++++++++++++++++++++++++++--- assets/js/main.js | 18 +++++++++++-- 2 files changed, 74 insertions(+), 6 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index a7b27c1..869707b 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -113,7 +113,13 @@ header.site-header { margin: 0 auto; display: flex; align-items: center; - justify-content: space-between; + /* Bewusst NICHT space-between: sonst landet der ganze freie Platz auf + großen Bildschirmen als große Lücke zwischen Logo und "Start", und + das Menü wirkt an die rechte Kante gepresst. Stattdessen rückt das + Menü mit festem Abstand direkt ans Logo heran, der übrige Platz + bleibt rechts nach dem Bewerben-Knopf. */ + justify-content: flex-start; + gap: clamp(2rem, 5vw, 4.5rem); padding: .9rem 0; flex-wrap: nowrap; } @@ -150,12 +156,16 @@ header.site-header { .nav-links { display: flex; align-items: center; - gap: 2.1rem; + gap: 2.4rem; } .nav-group { position: relative; } .nav-group > button { + position: relative; + isolation: isolate; + overflow: hidden; background: none; border: none; + border-radius: 999px; color: var(--text); font-weight: 600; font-size: 1.14rem; @@ -163,11 +173,55 @@ header.site-header { display: flex; align-items: center; gap: .3rem; - padding: .5rem 0; + padding: .5rem .8rem; + transition: color .2s ease; } .nav-group > button:hover, .nav-group.open > button { color: var(--accent); } -.nav-flat { font-weight: 600; font-size: 1.14rem; padding: .5rem 0; } +.nav-flat { + position: relative; + isolation: isolate; + overflow: hidden; + border-radius: 999px; + font-weight: 600; + font-size: 1.14rem; + padding: .5rem .8rem; + transition: color .2s ease; +} .nav-flat:hover, .nav-flat.active { color: var(--accent); } + +/* Augenschonende Polarlicht-Schimmer je Kategorie, in den echten Farben + der jeweiligen Welt (siehe theme-dogfather/-hasidog/-spicymedia.css) — + sehr dezent im Ruhezustand, etwas kräftiger bei Hover/offenem Dropdown. + Bewusst subtil (niedrige Deckkraft), damit die Kopfzeile ruhig bleibt. */ +.nav-group > button::before, .nav-flat::before { + content: ""; + position: absolute; + inset: -70% -35%; + z-index: -1; + background: + radial-gradient(circle at 28% 30%, var(--brand-1, transparent), transparent 62%), + radial-gradient(circle at 74% 72%, var(--brand-2, transparent), transparent 62%); + filter: blur(9px) saturate(1.25); + opacity: .22; + animation: nav-cta-aurora 11s ease-in-out infinite alternate; + pointer-events: none; + transition: opacity .3s ease; +} +.nav-group:hover > button::before, +.nav-group.open > button::before, +.nav-flat:hover::before, +.nav-flat.active::before { + opacity: .5; +} +@media (prefers-reduced-motion: reduce) { + .nav-group > button::before, .nav-flat::before { animation: none; } +} + +.nav-item-dogfather { --brand-1: rgba(143, 217, 234, .9); --brand-2: rgba(139, 92, 246, .85); } +.nav-item-hasidog { --brand-1: rgba(143, 217, 234, .9); --brand-2: rgba(199, 204, 209, .8); } +.nav-item-manager { --brand-1: rgba(217, 74, 92, .85); --brand-2: rgba(232, 147, 58, .8); } +.nav-item-medien { --brand-1: rgba(143, 217, 234, .7); --brand-2: rgba(217, 74, 92, .6); } +.nav-item-start { --brand-1: rgba(143, 217, 234, .85); --brand-2: rgba(139, 92, 246, .5); } .nav-dropdown { position: absolute; top: 100%; diff --git a/assets/js/main.js b/assets/js/main.js index e1865ea..731d192 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -238,14 +238,28 @@ return href === currentFile; } + /* Ordnet jedem Nav-Punkt die Farbklasse SEINER Welt zu (siehe + .nav-item-* in main.css, Farben aus theme-dogfather/-hasidog/ + -spicymedia.css) — für den augenschonenden Polarlicht-Schimmer pro + Kategorie. "Links" bekommt bewusst keine Farbe (keine eigene Welt, + sitzt direkt neben dem schon bunten Bewerben-Knopf). */ + const NAV_FARBKLASSE = { + nav_start: "nav-item-start", + nav_dogfather: "nav-item-dogfather", + nav_hasidog: "nav-item-hasidog", + nav_manager: "nav-item-manager", + nav_medien: "nav-item-medien", + }; + function renderNavItem(item) { + const farbklasse = NAV_FARBKLASSE[item.key] ? ` ${NAV_FARBKLASSE[item.key]}` : ""; if (!item.children) { - return `${t(item.key)}`; + return `${t(item.key)}`; } const activeChild = item.children.some((c) => isActive(c.href)); return `
- +
${item.children .map(