Lang menu and autodetect
All checks were successful
ci / test-commons-core (push) Successful in 56s
ci / analyze (push) Successful in 1m39s
site / deploy (push) Successful in 44s
ci / test-app-seeds (push) Successful in 7m29s
release / fdroid_reference_armeabi_v7a (push) Successful in 42m36s
release / fdroid_reference_arm64_v8a (push) Successful in 33m58s
release / fdroid_reference_x86_64 (push) Successful in 26m15s
release / play (push) Successful in 12m49s
All checks were successful
ci / test-commons-core (push) Successful in 56s
ci / analyze (push) Successful in 1m39s
site / deploy (push) Successful in 44s
ci / test-app-seeds (push) Successful in 7m29s
release / fdroid_reference_armeabi_v7a (push) Successful in 42m36s
release / fdroid_reference_arm64_v8a (push) Successful in 33m58s
release / fdroid_reference_x86_64 (push) Successful in 26m15s
release / play (push) Successful in 12m49s
This commit is contained in:
parent
1b439e9499
commit
538b28e5d2
6 changed files with 128 additions and 18 deletions
|
|
@ -71,9 +71,55 @@ a { color: var(--green); }
|
|||
}
|
||||
.site-nav a { color: #fff; text-decoration: none; opacity: .95; white-space: nowrap; }
|
||||
.site-nav a:hover { text-decoration: underline; }
|
||||
.lang-switch { display: inline-flex; gap: .6rem; font-size: .92rem; white-space: nowrap; }
|
||||
.lang-switch .current { opacity: .7; }
|
||||
.lang-switch a.lang { color: #fff; }
|
||||
/* A typical globe+code language menu (<details>/<summary>, no JS) instead of
|
||||
spelling out every language name in the header — scales past 3 languages
|
||||
without crowding the About/Legal links. */
|
||||
.lang-switch {
|
||||
position: relative;
|
||||
font-size: .9rem;
|
||||
}
|
||||
.lang-switch summary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .35rem;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
padding: .3rem .6rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, .4);
|
||||
color: #fff;
|
||||
}
|
||||
.lang-switch summary::-webkit-details-marker { display: none; }
|
||||
.lang-switch summary::after { content: "▾"; font-size: .7em; opacity: .85; }
|
||||
.lang-switch[open] summary::after { content: "▴"; }
|
||||
.lang-switch summary:hover { border-color: #fff; }
|
||||
.lang-code { font-weight: 600; letter-spacing: .02em; }
|
||||
.lang-menu {
|
||||
position: absolute;
|
||||
inset-inline-end: 0;
|
||||
top: calc(100% + .4rem);
|
||||
margin: 0;
|
||||
padding: .35rem;
|
||||
list-style: none;
|
||||
min-width: 9rem;
|
||||
background: #fff;
|
||||
color: var(--title);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
|
||||
z-index: 10;
|
||||
}
|
||||
.lang-menu li + li { margin-top: .1rem; }
|
||||
.lang-menu a.lang,
|
||||
.lang-menu span.current {
|
||||
display: block;
|
||||
padding: .45rem .6rem;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.lang-menu a.lang { color: var(--title); }
|
||||
.lang-menu a.lang:hover { background: var(--container); }
|
||||
.lang-menu span.current { color: var(--muted); font-weight: 600; }
|
||||
|
||||
/* Narrow phones: brand on its own row, nav wraps beneath it, left-aligned. */
|
||||
@media (max-width: 560px) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue