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:
2026-08-02 16:27:38 +02:00
parent a0ccf38902
commit eba4a13345
2 changed files with 74 additions and 6 deletions
+58 -4
View File
@@ -113,7 +113,13 @@ header.site-header {
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
align-items: center; 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; padding: .9rem 0;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
@@ -150,12 +156,16 @@ header.site-header {
.nav-links { .nav-links {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 2.1rem; gap: 2.4rem;
} }
.nav-group { position: relative; } .nav-group { position: relative; }
.nav-group > button { .nav-group > button {
position: relative;
isolation: isolate;
overflow: hidden;
background: none; background: none;
border: none; border: none;
border-radius: 999px;
color: var(--text); color: var(--text);
font-weight: 600; font-weight: 600;
font-size: 1.14rem; font-size: 1.14rem;
@@ -163,11 +173,55 @@ header.site-header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: .3rem; gap: .3rem;
padding: .5rem 0; padding: .5rem .8rem;
transition: color .2s ease;
} }
.nav-group > button:hover, .nav-group.open > button { color: var(--accent); } .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); } .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 { .nav-dropdown {
position: absolute; position: absolute;
top: 100%; top: 100%;
+16 -2
View File
@@ -238,14 +238,28 @@
return href === currentFile; 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) { function renderNavItem(item) {
const farbklasse = NAV_FARBKLASSE[item.key] ? ` ${NAV_FARBKLASSE[item.key]}` : "";
if (!item.children) { 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)); const activeChild = item.children.some((c) => isActive(c.href));
return ` return `
<div class="nav-group${activeChild ? " open-hint" : ""}"> <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"> <div class="nav-dropdown">
${item.children ${item.children
.map( .map(