Improve language selector accessibility
This commit is contained in:
parent
56f5b500e8
commit
3ab2d97c27
2 changed files with 24 additions and 122 deletions
100
assets/style.css
100
assets/style.css
|
|
@ -688,10 +688,6 @@ video {
|
|||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -758,10 +754,6 @@ video {
|
|||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-3 {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.gap-x-6 {
|
||||
-moz-column-gap: 1.5rem;
|
||||
column-gap: 1.5rem;
|
||||
|
|
@ -771,10 +763,6 @@ video {
|
|||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-y-8 {
|
||||
row-gap: 2rem;
|
||||
}
|
||||
|
||||
.self-start {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
|
@ -856,9 +844,8 @@ video {
|
|||
font-family: Spline Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
.text-\[20px\] {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
|
|
@ -871,33 +858,6 @@ video {
|
|||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.text-\[2\.4vw\] {
|
||||
font-size: 2.4vw;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-\[20px\] {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.text-\[24px\] {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.text-base {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
@ -1137,51 +1097,14 @@ html:not(.dark) .light\:hidden {
|
|||
.sm\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.sm\:text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.sm\:leading-normal {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.md\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.md\:items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.md\:gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.md\:text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.md\:text-\[22px\] {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.min-\[1000px\]\:text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:container {
|
||||
width: 100%;
|
||||
|
|
@ -1275,22 +1198,3 @@ html:not(.dark) .light\:hidden {
|
|||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.xl\:grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.xl\:text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.xl\:text-\[24px\] {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.xl\:leading-normal {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,24 @@
|
|||
<h2 class="sr-only">{{ i18n "lang_select_title" }}</h2>
|
||||
<nav class="flex items-center gap-2 button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32">
|
||||
<g fill="currentColor">
|
||||
<path fill="none" d="M0 0h24v24H0z"/>
|
||||
<path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-2.29-2.333A17.9 17.9 0 0 1 8.027 13H4.062a8.008 8.008 0 0 0 5.648 6.667zM10.03 13c.151 2.439.848 4.73 1.97 6.752A15.905 15.905 0 0 0 13.97 13h-3.94zm9.908 0h-3.965a17.9 17.9 0 0 1-1.683 6.667A8.008 8.008 0 0 0 19.938 13zM4.062 11h3.965A17.9 17.9 0 0 1 9.71 4.333 8.008 8.008 0 0 0 4.062 11zm5.969 0h3.938A15.905 15.905 0 0 0 12 4.248 15.905 15.905 0 0 0 10.03 11zm4.259-6.667A17.9 17.9 0 0 1 15.973 11h3.965a8.008 8.008 0 0 0-5.648-6.667z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<ul>
|
||||
{{ if .IsTranslated -}}
|
||||
{{ range .Translations }}
|
||||
<li>
|
||||
<a class="text-sm font-semibold" rel="alternate" href="{{ .RelPermalink }}" hreflang="{{ .Language.Params.LanguageCode | default .Lang }}" lang="{{ .Language.Params.LanguageCode | default .Lang }}">{{ .Language.LanguageName }}</a>
|
||||
</li>
|
||||
{{ end -}}
|
||||
{{ else -}}
|
||||
{{ range site.Languages -}}
|
||||
{{ if ne site.Language.Lang .Lang }}
|
||||
<li>
|
||||
<a class="text-sm font-semibold" rel="alternate" href="{{ .Lang | relURL }}" hreflang="{{ .Params.LanguageCode | default .Lang }}" lang="{{ .Params.LanguageCode | default .Lang }}">{{ .LanguageName }}</a>
|
||||
</li>
|
||||
{{ end -}}
|
||||
{{ end -}}
|
||||
{{ end -}}
|
||||
</ul>
|
||||
<nav>
|
||||
{{ if .IsTranslated -}}
|
||||
{{ range .Translations }}
|
||||
<a
|
||||
class="flex items-center gap-2 button"
|
||||
rel="alternate"
|
||||
href="{{ .RelPermalink }}"
|
||||
hreflang="{{ .Language.Params.LanguageCode | default .Lang }}"
|
||||
lang="{{ .Language.Params.LanguageCode | default .Lang }}"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32">
|
||||
<g fill="currentColor">
|
||||
<path fill="none" d="M0 0h24v24H0z"/>
|
||||
<path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-2.29-2.333A17.9 17.9 0 0 1 8.027 13H4.062a8.008 8.008 0 0 0 5.648 6.667zM10.03 13c.151 2.439.848 4.73 1.97 6.752A15.905 15.905 0 0 0 13.97 13h-3.94zm9.908 0h-3.965a17.9 17.9 0 0 1-1.683 6.667A8.008 8.008 0 0 0 19.938 13zM4.062 11h3.965A17.9 17.9 0 0 1 9.71 4.333 8.008 8.008 0 0 0 4.062 11zm5.969 0h3.938A15.905 15.905 0 0 0 12 4.248 15.905 15.905 0 0 0 10.03 11zm4.259-6.667A17.9 17.9 0 0 1 15.973 11h3.965a8.008 8.008 0 0 0-5.648-6.667z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="text-sm font-semibold">
|
||||
{{- .Language.LanguageName -}}
|
||||
</span>
|
||||
</a>
|
||||
{{ end -}}
|
||||
{{ end -}}
|
||||
</nav>
|
||||
|
|
|
|||
Loading…
Reference in a new issue