ETM-Schurig/powersync-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(i18n): drapeaux dans le sélecteur de langue de la doc

Browse Source 
Material rend son sélecteur en liste déroulante, chaque entrée portant un
`hreflang` : on l'habille donc en CSS pure, sans toucher au gabarit du thème ni
surcharger de template. Vérifié sur le HTML produit : les trois entrées ont bien
`hreflang="fr|de|en"` et la classe `md-select__link`.

Mêmes choix que sur le site vitrine, et pour les mêmes raisons : SVG inline en
data-URI plutôt qu'emoji (🇫🇷 ne s'affiche pas sous Windows), et le NOM de la
langue conservé à côté du drapeau (un drapeau désigne un pays, pas une langue —
et l'anglais sert ici les deux marchés plus la communauté).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Patrick Schurig 2026-10-13 08:19:53 +02:00
parent 0c8c814f75
commit be0cbcf42d
1 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
docs/stylesheets/extra.css
View File

@ -42,3 +42,27 @@
.badge.perm-configure {color:#fb923c;background:rgba(251,146,60,.1);border:1px solid rgba(251,146,60,.3)}
.badge.perm-admin {color:#ef4444;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3)}
.badge.perm-unknown {color:#94a3b8;background:rgba(148,163,184,.1);border:1px solid rgba(148,163,184,.3)}
/* ══════════════════════════════════════════════════════════════════════════
SÉLECTEUR DE LANGUE — drapeaux (2026-10-13)
Material rend son sélecteur en liste déroulante, chaque entrée portant un
`hreflang` : on l'habille en CSS, sans toucher au gabarit du thème.
Drapeaux en SVG inline (data-URI) et NON en emoji : 🇫🇷 ne s'affiche pas sous
Windows, où Chrome rend « FR » dans un carré faute de police de drapeaux.
Le NOM de la langue reste affiché à côté — un drapeau désigne un pays, pas
une langue, et l'anglais ici sert les deux marchés plus la communauté.
══════════════════════════════════════════════════════════════════════════ */
.md-select__link[hreflang]{display:flex;align-items:center;gap:.6rem}
.md-select__link[hreflang]::before{content:"";width:1.25em;height:.9em;flex:none;
background-size:cover;background-position:center;border-radius:1px;
box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.md-select__link[hreflang="fr"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23ED2939'/%3E%3Crect width='2' height='2' fill='%23FFFFFF'/%3E%3Crect width='1' height='2' fill='%23002395'/%3E%3C/svg%3E")}
.md-select__link[hreflang="de"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='3' fill='%23FFCE00'/%3E%3Crect width='5' height='2' fill='%23DD0000'/%3E%3Crect width='5' height='1' fill='%23000000'/%3E%3C/svg%3E")}
.md-select__link[hreflang="en"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' stroke='%23FFFFFF' stroke-width='6'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23FFFFFF' stroke-width='10'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E")}
/* le bouton du sélecteur : l'icône « traduction » de Material ne dit pas dans
quelle langue on est. On le laisse tel quel (c'est le gabarit du thème), mais
on lui donne de l'air pour qu'il ne colle pas à la recherche. */
.md-header__option{margin-right:.2rem}