Sprachschalter: Knopf + Kugel jetzt mit echten gemischten Flaggenfarben
Statt nur einem Farbton (glut) je Sprache gibt es jetzt 2-3 echte Landesfarben (farbstopps) pro Sprache: DE schwarz-rot-gold, CH rot-weiß, EN blau-weiß-rot, FR blau-weiß-rot, PT grün-gold-rot. Der Knopf- Hintergrund ist jetzt eine wandernde Aurora-Wolke aus genau diesen Farben (analog zum Bewerben-Knopf), die Kugel ein rotierender conic-gradient aus denselben Farben mit Glanzlicht obendrauf - wirkt wie eine kleine, echt gemischt eingefärbte Kugel statt einer flachen Einzelfarbe.
This commit is contained in:
+37
-6
@@ -209,9 +209,7 @@ header.site-header {
|
||||
padding: .4rem 1rem .4rem .55rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid color-mix(in srgb, var(--sprach-glut) 55%, rgba(255, 255, 255, .18));
|
||||
background:
|
||||
radial-gradient(circle at 28% 25%, color-mix(in srgb, var(--sprach-glut) 30%, transparent), transparent 65%),
|
||||
rgba(255, 255, 255, .04);
|
||||
background: rgba(10, 11, 15, .55);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(255, 255, 255, .05),
|
||||
0 3px 10px rgba(0, 0, 0, .35),
|
||||
@@ -227,6 +225,25 @@ header.site-header {
|
||||
0 6px 16px rgba(0, 0, 0, .4),
|
||||
0 0 24px color-mix(in srgb, var(--sprach-glut) 60%, transparent);
|
||||
}
|
||||
/* Ebene: die "Landesflagge" als weiche, wandernde Aurora-Wolke im
|
||||
Hintergrund des Knopfs — mehrere Farbflecken statt nur eines Farbtons,
|
||||
dieselbe Machart wie beim Bewerben-Knopf, nur mit den 2-3 echten
|
||||
Farben DIESER Sprache (siehe SPRACHEN.farbstopps in main.js). */
|
||||
.sprach-schalter > button::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -65%;
|
||||
z-index: -2;
|
||||
background: var(--sprach-aurora);
|
||||
filter: blur(8px) saturate(1.3);
|
||||
opacity: .85;
|
||||
animation: sprach-aurora-drift 7s ease-in-out infinite alternate;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes sprach-aurora-drift {
|
||||
from { transform: translate(-3%, -2%) rotate(0deg) scale(1); }
|
||||
to { transform: translate(3%, 3%) rotate(8deg) scale(1.12); }
|
||||
}
|
||||
/* Ebene: ein schmales Lichtband, das einmal quer durch den Knopf läuft —
|
||||
dieselbe Machart wie beim Bewerben-Knopf, nur in der Sprachfarbe. */
|
||||
.sprach-schalter > button::after {
|
||||
@@ -297,14 +314,20 @@ header.site-header {
|
||||
Flaggen-Emojis grundsätzlich nicht als Bild dar (siehe SPRACHEN oben in
|
||||
main.js). Ein außermittiges Glanzlicht + langsame Drehung lassen sie
|
||||
wie eine echte, beleuchtete Kugel wirken statt einer flachen Fläche. */
|
||||
/* Kugel-Grundfarbe: conic-gradient aus den 2-3 echten Landesfarben
|
||||
dieser Sprache (--sprach-stopps, siehe SPRACHEN.farbstopps in
|
||||
main.js) — wirkt wie eine kleine, marmoriert eingefärbte Kugel statt
|
||||
nur einem Farbton, plus Eigendrehung, damit die Farbmischung sichtbar
|
||||
"lebt". Glanzlicht kommt separat über ::before oben drauf. */
|
||||
.sprach-kugel {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
vertical-align: -4px;
|
||||
background:
|
||||
radial-gradient(circle at 32% 26%, #fff 0%, color-mix(in srgb, var(--sprach-glut) 85%, white 15%) 16%, var(--sprach-glut) 52%, color-mix(in srgb, var(--sprach-glut) 55%, black 45%) 100%);
|
||||
overflow: hidden;
|
||||
background: conic-gradient(from 0deg, var(--sprach-stopps));
|
||||
box-shadow:
|
||||
inset -3px -3px 5px rgba(0, 0, 0, .5),
|
||||
0 0 8px 2px color-mix(in srgb, var(--sprach-glut) 75%, transparent),
|
||||
@@ -312,6 +335,14 @@ header.site-header {
|
||||
flex-shrink: 0;
|
||||
animation: sprach-glut-puls 3.2s ease-in-out infinite, sprach-kugel-dreh 7s linear infinite;
|
||||
}
|
||||
.sprach-kugel::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .35) 16%, transparent 55%);
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
.sprach-schalter .nav-dropdown a .sprach-kugel { width: 16px; height: 16px; }
|
||||
/* Die Sprachfarbe zieht sich auch über die Schrift — kräftiger,
|
||||
leuchtender Text statt neutralem Weiß, plus ein sanft pulsierender
|
||||
@@ -334,7 +365,7 @@ header.site-header {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.sprach-kugel, .sprach-kurz, .sprach-schalter > button::after, .sprach-schalter .nav-dropdown { animation: none; }
|
||||
.sprach-kugel, .sprach-kurz, .sprach-schalter > button::before, .sprach-schalter > button::after, .sprach-schalter .nav-dropdown { animation: none; }
|
||||
}
|
||||
|
||||
/* "Bewerben" ist der Treffpunkt beider Welten (Team Dogi + Spicy Media) —
|
||||
|
||||
+27
-7
@@ -43,11 +43,15 @@
|
||||
aber bewusst gesättigter/heller (nicht die originalen, oft eher
|
||||
stumpfen Flaggenfarben), damit der Polarlicht-Effekt gut trägt. */
|
||||
const SPRACHEN = [
|
||||
{ code: "de", kurz: "DE", name: "Deutsch", glut: "#ffb300" },
|
||||
{ code: "de-CH", kurz: "CH", name: "Schwiizerdütsch", glut: "#ff3b3b" },
|
||||
{ code: "en", kurz: "EN", name: "English", glut: "#2f6bff" },
|
||||
{ code: "fr", kurz: "FR", name: "Français", glut: "#00c2ff" },
|
||||
{ code: "pt", kurz: "PT", name: "Português", glut: "#20d97a" },
|
||||
// "glut" = einzelne Leuchtfarbe (Text-Glow, Dropdown-Zeile).
|
||||
// "farbstopps" = mehrere Landesfarben, aus denen Knopf-Aurora und
|
||||
// Kugel-Verlauf gemischt werden — daher wirklich "gemischte Farben
|
||||
// wie bei den jeweiligen Nationalflaggen", nicht nur ein Farbton.
|
||||
{ code: "de", kurz: "DE", name: "Deutsch", glut: "#ffb300", farbstopps: ["#1a1a1a", "#dd0000", "#ffce00"] },
|
||||
{ code: "de-CH", kurz: "CH", name: "Schwiizerdütsch", glut: "#ff3b3b", farbstopps: ["#d52b1e", "#ffffff", "#d52b1e"] },
|
||||
{ code: "en", kurz: "EN", name: "English", glut: "#2f6bff", farbstopps: ["#00247d", "#ffffff", "#cf142b"] },
|
||||
{ code: "fr", kurz: "FR", name: "Français", glut: "#00c2ff", farbstopps: ["#0055a4", "#ffffff", "#ef4135"] },
|
||||
{ code: "pt", kurz: "PT", name: "Português", glut: "#20d97a", farbstopps: ["#046a38", "#ffcc00", "#da291c"] },
|
||||
];
|
||||
const SPRACHE_SCHLUESSEL = "dogi-sprache";
|
||||
|
||||
@@ -256,11 +260,27 @@
|
||||
/* Sprachumschalter — eigener nav-group-artiger Dropdown, zeigt die
|
||||
aktuell gewählte Sprache (Flagge + Kürzel) und listet beim Klick die
|
||||
übrigen 4 Sprachen auf. */
|
||||
/* Aus den 2-3 Landesfarben einer Sprache ein Aurora-Wolkenbild bauen
|
||||
(mehrere versetzte, weiche Farbflecken — dieselbe Machart wie beim
|
||||
Bewerben-Knopf, nur mit den Farben DIESER Sprache) plus eine
|
||||
Stopp-Liste für den conic-gradient der Kugel. */
|
||||
function sprachAurora(farben) {
|
||||
const positionen = ["22% 30%", "72% 28%", "48% 78%"];
|
||||
return farben
|
||||
.map((f, i) => `radial-gradient(circle at ${positionen[i % positionen.length]}, ${f}, transparent 60%)`)
|
||||
.join(", ");
|
||||
}
|
||||
function sprachKugelStopps(farben) {
|
||||
return [...farben, farben[0]].join(", ");
|
||||
}
|
||||
|
||||
function renderSprachSchalter() {
|
||||
const aktuell = getSprache();
|
||||
const aktiv = SPRACHEN.find((s) => s.code === aktuell) || SPRACHEN[0];
|
||||
const styleFuer = (s) =>
|
||||
`--sprach-glut:${s.glut};--sprach-aurora:${sprachAurora(s.farbstopps)};--sprach-stopps:${sprachKugelStopps(s.farbstopps)};`;
|
||||
return `
|
||||
<div class="nav-group sprach-schalter" style="--sprach-glut:${aktiv.glut};">
|
||||
<div class="nav-group sprach-schalter" style="${styleFuer(aktiv)}">
|
||||
<button type="button" aria-expanded="false" aria-label="${t("sprache_aria")}">
|
||||
<span class="sprach-kugel" aria-hidden="true"></span>
|
||||
<span class="sprach-kurz">${aktiv.kurz}</span> <span aria-hidden="true">▾</span>
|
||||
@@ -268,7 +288,7 @@
|
||||
<div class="nav-dropdown">
|
||||
${SPRACHEN.map(
|
||||
(s) =>
|
||||
`<a href="#" data-sprache="${s.code}" style="--sprach-glut:${s.glut};"${s.code === aktuell ? ' class="active"' : ""}><span class="sprach-kugel" aria-hidden="true"></span>${s.name}</a>`
|
||||
`<a href="#" data-sprache="${s.code}" style="${styleFuer(s)}"${s.code === aktuell ? ' class="active"' : ""}><span class="sprach-kugel" aria-hidden="true"></span>${s.name}</a>`
|
||||
).join("")}
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
Reference in New Issue
Block a user