/* Language selector — matpilot.io --------------------------------------------------------------------------- Lives in its own file rather than in styles.css because index.html carries a full inline stylesheet and never loads styles.css. One file, linked by every page that has a selector, keeps the widget from existing in two places. Every custom property below has a literal fallback, so this drops onto a page with any token set (or none). The selector is a
/ disclosure. The expanded state is a browser primitive and each row is a plain , so it opens, closes and switches language with JavaScript disabled. shared/lang.js only adds conveniences on top. The markup is generated into each page by scripts/i18n.mjs from i18n.config.json. Built to grow: .lang-menu scrolls once the list outgrows its height, which is the point of a list rather than a two-way toggle. */ .lang-switch { position: relative; display: inline-block; } .lang-switch > summary { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 9999px; cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; list-style: none; -webkit-user-select: none; user-select: none; } .lang-switch > summary::-webkit-details-marker { display: none; } .lang-switch > summary::marker { content: ""; } .lang-switch > summary:focus-visible { outline: 2px solid var(--accent, #ff2d78); outline-offset: 2px; } /* The flag is sized in em by the .fi rule below, so this font-size IS its size: 12px of font gives a 16x12 box. It was 14px while the flag was an emoji glyph, which needed the extra to match the label optically; a solid rectangle does not, and at 14px it overpowered the 12px code beside it. */ .lang-switch .lang-flag { font-size: 12px; line-height: 1; } .lang-switch .lang-chevron { width: 0; height: 0; margin-left: 1px; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid currentColor; opacity: 0.75; transition: transform 0.15s ease; } .lang-switch[open] > summary .lang-chevron { transform: rotate(180deg); } /* Flags — a trimmed subset of flag-icons 7.5.0 (MIT), NOT the library. --------------------------------------------------------------------------- Why not the emoji it replaced: Windows Chrome ships no country-flag font, so 🇬🇧 rendered there as the bare letters "GB". SVG images render everywhere. Why not the full flag-icons.min.css: it is ~250 background-image rules, one per country, and web/ has no build step to tree-shake — `aws s3 sync web/` ships whatever is committed. Two languages do not need 250 rules or the ~10MB of SVGs behind them. So the base `.fi` rule and one `.fi-` rule per shipped country are copied here by hand, and only those countries' SVGs are vendored into shared/flags/. The class NAMES are flag-icons' own, so the generated markup stays portable: if a third language ever makes the real package worth carrying, swap this block for it and the HTML is unchanged. ADDING A LANGUAGE — three steps, none of them automatic: 1. copy node_modules/flag-icons/flags/4x3/.svg to shared/flags/.svg 2. add `.fi- { background-image: url("flags/.svg"); }` below 3. set `country: ""` on the language in i18n.config.json, then `node scripts/i18n.mjs build` `node scripts/i18n.mjs check` fails if 1 or 2 is missed. The url()s are relative to THIS FILE, not to the page that links it, so the single copy at /shared/lang.css resolves to /shared/flags/.svg for a root page, a /pt/ page and a /help/ page alike. Unscoped, and at flag-icons' own specificity, so that swap stays a clean replacement rather than a fight neither rule wins. */ .fi { background-size: contain; background-position: 50%; background-repeat: no-repeat; position: relative; display: inline-block; width: 1.333333em; line-height: 1em; } .fi::before { content: "\00a0"; } /* the span is empty; this gives it height */ .fi-gb { background-image: url("flags/gb.svg"); } .fi-br { background-image: url("flags/br.svg"); } /* Local touch, not from the library: the flags sit against a dark header and a white footer, and gb.svg reaches the edge of its box in both. */ .lang-switch .lang-flag.fi { border-radius: 1px; } .lang-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 128px; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 6px; list-style: none; border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); } .lang-menu li { margin: 0; } /* A row is an when the selector links to a sibling page, and a