improve accessibility
All checks were successful
ci/woodpecker/push/hugo-build Pipeline was successful
All checks were successful
ci/woodpecker/push/hugo-build Pipeline was successful
This commit is contained in:
parent
9fdef1a7db
commit
41be8c98a5
GPG key ID:
D40098E5B60B2197
2 changed files with 82 additions and 84 deletions
|
|
@ -81,7 +81,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
header {
|
||||
#avatar-wrapper {
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
padding: inherit;
|
||||
|
|
@ -230,86 +230,84 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
aside {
|
||||
#social-links {
|
||||
text-align: center;
|
||||
#social-links {
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 1140px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
place-content: center;
|
||||
|
||||
&:hover {
|
||||
.mastodon-icon {
|
||||
color: hsl(251.5, 58.9%, 51.4%);
|
||||
}
|
||||
}
|
||||
|
||||
.mastodon-icon {
|
||||
color: hsl(239.6, 100%, 69.4%);
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
display: block;
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: color 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 1140px) {
|
||||
display: none;
|
||||
}
|
||||
#languages {
|
||||
text-align: center;
|
||||
border-radius: 0.5rem 0.5rem 1.85rem 0.5rem;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
place-content: center;
|
||||
|
||||
@media (max-width: 1140px) {
|
||||
border-radius: 4rem;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: calc(100vw - 1em - 64px);
|
||||
font-size: 1.4rem;
|
||||
border-radius: 100%;
|
||||
background-color: var(--sidebar-accent-1);
|
||||
aspect-ratio: 1 / 1;
|
||||
width: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--sidebar-accent-1);
|
||||
|
||||
@media (max-width: 1140px) {
|
||||
background-color: var(--sidebar-accent-2);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
background-color: var(--sidebar-accent-2);
|
||||
|
||||
@media (max-width: 1140px) {
|
||||
background-color: var(--sidebar-accent-3);
|
||||
.mastodon-icon {
|
||||
color: hsl(251.5, 58.9%, 51.4%);
|
||||
}
|
||||
}
|
||||
|
||||
#language {
|
||||
.mastodon-icon {
|
||||
color: hsl(239.6, 100%, 69.4%);
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
pointer-events: all;
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: color 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#languages {
|
||||
text-align: center;
|
||||
border-radius: 0.5rem 0.5rem 1.85rem 0.5rem;
|
||||
|
||||
@media (max-width: 1140px) {
|
||||
border-radius: 4rem;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: calc(100vw - 1em - 64px);
|
||||
font-size: 1.4rem;
|
||||
border-radius: 100%;
|
||||
background-color: var(--sidebar-accent-1);
|
||||
aspect-ratio: 1 / 1;
|
||||
width: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--sidebar-accent-1);
|
||||
|
||||
@media (max-width: 1140px) {
|
||||
background-color: var(--sidebar-accent-2);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
background-color: var(--sidebar-accent-2);
|
||||
|
||||
@media (max-width: 1140px) {
|
||||
background-color: var(--sidebar-accent-3);
|
||||
}
|
||||
}
|
||||
|
||||
#language {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
{{ $currentPage := . }}
|
||||
|
||||
<nav id="sidebar">
|
||||
<header>
|
||||
<header id="sidebar">
|
||||
<div id="avatar-wrapper">
|
||||
{{ with .Site.Params.avatar }}
|
||||
{{ $avatar := resources.Get . }}
|
||||
{{ $avatar := $avatar.Resize "96x webp" }}
|
||||
<img id="avatar" alt="{{ $.Site.Params.displayName }}" src="{{ $avatar.RelPermalink }}" />
|
||||
{{ end }}
|
||||
</header>
|
||||
<section id="sidebar-menu">
|
||||
</div>
|
||||
<nav id="sidebar-menu" aria-labelledby="primary-navigation">
|
||||
<ul>
|
||||
{{- range .Site.Menus.main }}
|
||||
{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
|
||||
|
|
@ -18,12 +18,12 @@
|
|||
{{ end }}
|
||||
{{- end }}
|
||||
</ul>
|
||||
</section>
|
||||
<aside>
|
||||
<section id="social-links">
|
||||
</nav>
|
||||
<div>
|
||||
<nav id="social-links" aria-labelledby="social-links">
|
||||
<a class="hint-text" rel="me" href="https://social.anoxinon.de/@vri" aria-label="Mastodon">{{ partial "helpers/icons" "mastodon" }}</a>
|
||||
</section>
|
||||
<section id="languages">
|
||||
</nav>
|
||||
<div id="languages">
|
||||
{{- if .Site.IsMultiLingual }}
|
||||
{{ $siteLanguages := .Site.Languages }}
|
||||
{{ $pageLanguage := .Page.Lang }}
|
||||
|
|
@ -39,6 +39,6 @@
|
|||
{{ end }}
|
||||
{{ end }}
|
||||
{{- end }}
|
||||
</section>
|
||||
</aside>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
Loading…
Reference in a new issue