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%;
|
||||
|
||||
Reference in New Issue
Block a user