DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sprachumschalter: Globus durch farbige "Länder-Kugel" ersetzt

Browse Source 
Kleine Kugel im Sprachschalter nimmt jetzt die Landesfarben der aktuell
gewählten Sprache als Verlauf an (DE: schwarz-rot-gold, CH: rot/weiß,
EN: blau-weiß-rot, FR: blau-weiß-rot, PT: grün-rot) - mit Glanzlicht/
Schatten für einen echten Kugel-Look. Selbe Kugel auch vor jedem Eintrag
im Dropdown, damit die Sprachen auf einen Blick unterscheidbar sind.
This commit is contained in:
DogFatherGit
2026-08-02 00:44:26 +02:00
parent 2affcccb1d
commit 276a5cf97b
2 changed files with 30 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+20 -2
View File
@@ -194,9 +194,27 @@ header.site-header {
/* Sprachumschalter — schmalerer Dropdown reicht (nur Flagge + 2-stelliges
Kürzel pro Zeile), rechtsbündig statt zentriert, damit er nicht über
den Seitenrand hinausragt. */
.sprach-schalter > button { font-size: 1.02rem; }
.sprach-schalter > button { font-size: 1.02rem; align-items: center; }
.sprach-schalter .nav-dropdown { min-width: 175px; left: auto; right: 0; transform: none; }
.sprach-schalter .nav-dropdown a { display: flex; align-items: center; gap: .5rem; }
.sprach-schalter .nav-dropdown a { display: flex; align-items: center; gap: .6rem; }
/* Kleine "Weltkugel", die die Farben der jeweils aktiven Sprache annimmt
(Landesfarben als Verlauf) statt eines Flaggen-Emojis — Windows stellt
Flaggen-Emojis grundsätzlich nicht als Bild dar (siehe SPRACHEN oben in
main.js), ein selbst eingefärbter Farbverlauf funktioniert dagegen
garantiert überall gleich. Glanzlicht + Schatten sorgen dafür, dass es
wie eine kleine Kugel statt einer flachen Fläche wirkt. */
.sprach-kugel {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
vertical-align: -2px;
box-shadow:
inset -2px -2px 4px rgba(0, 0, 0, .45),
inset 2px 2px 3px rgba(255, 255, 255, .55),
0 0 5px rgba(0, 0, 0, .35);
flex-shrink: 0;
}
/* "Bewerben" ist der Treffpunkt beider Welten (Team Dogi + Spicy Media) —
deshalb bewusst FEST babyblau + rot, unabhängig vom Theme der gerade
assets/js/main.js
+10 -7
View File
@@ -34,11 +34,11 @@
Globus-Symbol im Knopf plus volle Sprachnamen im Dropdown ist
eindeutig und funktioniert auf jedem Betriebssystem gleich. */
const SPRACHEN = [
{ code: "de", kurz: "DE", name: "Deutsch" },
{ code: "de-CH", kurz: "CH", name: "Deutsch (Schweiz)" },
{ code: "en", kurz: "EN", name: "English" },
{ code: "fr", kurz: "FR", name: "Français" },
{ code: "pt", kurz: "PT", name: "Português" },
{ code: "de", kurz: "DE", name: "Deutsch", farben: "linear-gradient(160deg, #1a1a1a 0%, #dd0000 50%, #ffce00 100%)" },
{ code: "de-CH", kurz: "CH", name: "Deutsch (Schweiz)", farben: "linear-gradient(160deg, #d52b1e 0%, #d52b1e 60%, #ffffff 100%)" },
{ code: "en", kurz: "EN", name: "English", farben: "linear-gradient(160deg, #00247d 0%, #ffffff 50%, #cf142b 100%)" },
{ code: "fr", kurz: "FR", name: "Français", farben: "linear-gradient(160deg, #0055a4 0%, #ffffff 50%, #ef4135 100%)" },
{ code: "pt", kurz: "PT", name: "Português", farben: "linear-gradient(160deg, #046a38 0%, #046a38 45%, #da291c 100%)" },
];
const SPRACHE_SCHLUESSEL = "dogi-sprache";
@@ -252,11 +252,14 @@
const aktiv = SPRACHEN.find((s) => s.code === aktuell) || SPRACHEN[0];
return `
<div class="nav-group sprach-schalter">
<button type="button" aria-expanded="false" aria-label="${t("sprache_aria")}">🌐 ${aktiv.kurz} <span aria-hidden="true">▾</span></button>
<button type="button" aria-expanded="false" aria-label="${t("sprache_aria")}">
<span class="sprach-kugel" style="background:${aktiv.farben};" aria-hidden="true"></span>
${aktiv.kurz} <span aria-hidden="true">▾</span>
</button>
<div class="nav-dropdown">
${SPRACHEN.map(
(s) =>
`<a href="#" data-sprache="${s.code}"${s.code === aktuell ? ' class="active"' : ""}>${s.name}</a>`
`<a href="#" data-sprache="${s.code}"${s.code === aktuell ? ' class="active"' : ""}><span class="sprach-kugel" style="background:${s.farben};" aria-hidden="true"></span>${s.name}</a>`
).join("")}
</div>
</div>`;