Nav-Bar: Menü näher ans Logo (statt rechts an die Kante gepresst) + Polarlicht-Kategorien
- .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).
This commit is contained in:
+58
-4
@@ -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%;
|
||||
|
||||
+16
-2
@@ -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 `<a class="nav-flat${isActive(item.href) ? " active" : ""}" href="${item.href}">${t(item.key)}</a>`;
|
||||
return `<a class="nav-flat${farbklasse}${isActive(item.href) ? " active" : ""}" href="${item.href}">${t(item.key)}</a>`;
|
||||
}
|
||||
const activeChild = item.children.some((c) => isActive(c.href));
|
||||
return `
|
||||
<div class="nav-group${activeChild ? " open-hint" : ""}">
|
||||
<button type="button" aria-expanded="false">${t(item.key)} <span aria-hidden="true">▾</span></button>
|
||||
<button type="button" class="${farbklasse.trim()}" aria-expanded="false">${t(item.key)} <span aria-hidden="true">▾</span></button>
|
||||
<div class="nav-dropdown">
|
||||
${item.children
|
||||
.map(
|
||||
|
||||
Reference in New Issue
Block a user