vrifox/website
vrifox/website
1
0
Fork 0
Code Issues 3 Pull requests Activity

improve accessibility
All checks were successful
ci/woodpecker/push/hugo-build Pipeline was successful
Details

Browse source
This commit is contained in:
Vri 🌈 2023-05-18 13:17:48 +02:00
parent 9fdef1a7db
commit 41be8c98a5
Signed by: vrifox
GPG key ID: D40098E5B60B2197
2 changed files with 82 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

140
assets/scss/partials/sidebar.scss
View file

@ -81,7 +81,7 @@
} }
} }
header { #avatar-wrapper {
text-align: center; text-align: center;
user-select: none; user-select: none;
padding: inherit; padding: inherit;
@ -230,86 +230,84 @@
} }
} }
} }
aside { #social-links {
#social-links { text-align: center;
text-align: center;
@media (max-width: 1140px) { @media (max-width: 1140px) {
display: none; 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;
}
}
}
} }
#languages {
text-align: center;
border-radius: 0.5rem 0.5rem 1.85rem 0.5rem;
@media (max-width: 1140px) { a {
border-radius: 4rem; display: flex;
position: absolute; padding: 1rem;
top: 1rem; place-content: center;
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 { &:hover {
background-color: var(--sidebar-accent-1); .mastodon-icon {
color: hsl(251.5, 58.9%, 51.4%);
@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 { .mastodon-icon {
color: hsl(239.6, 100%, 69.4%);
}
.icon {
height: 1.25rem;
width: 1.25rem;
display: block; display: block;
text-decoration: none;
width: 100%; @media (prefers-reduced-motion: no-preference) {
height: 100%; transition: color 0.2s ease-in-out;
padding: 1rem; }
pointer-events: all;
} }
} }
} }
#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;
}
}
} }

24
layouts/partials/sidebar.html
View file

@ -1,14 +1,14 @@
{{ $currentPage := . }} {{ $currentPage := . }}
<nav id="sidebar"> <header id="sidebar">
<header> <div id="avatar-wrapper">
{{ with .Site.Params.avatar }} {{ with .Site.Params.avatar }}
{{ $avatar := resources.Get . }} {{ $avatar := resources.Get . }}
{{ $avatar := $avatar.Resize "96x webp" }} {{ $avatar := $avatar.Resize "96x webp" }}
<img id="avatar" alt="{{ $.Site.Params.displayName }}" src="{{ $avatar.RelPermalink }}" /> <img id="avatar" alt="{{ $.Site.Params.displayName }}" src="{{ $avatar.RelPermalink }}" />
{{ end }} {{ end }}
</header> </div>
<section id="sidebar-menu"> <nav id="sidebar-menu" aria-labelledby="primary-navigation">
<ul> <ul>
{{- range .Site.Menus.main }} {{- range .Site.Menus.main }}
{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} {{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
@ -18,12 +18,12 @@
{{ end }} {{ end }}
{{- end }} {{- end }}
</ul> </ul>
</section> </nav>
<aside> <div>
<section id="social-links"> <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> <a class="hint-text" rel="me" href="https://social.anoxinon.de/@vri" aria-label="Mastodon">{{ partial "helpers/icons" "mastodon" }}</a>
</section> </nav>
<section id="languages"> <div id="languages">
{{- if .Site.IsMultiLingual }} {{- if .Site.IsMultiLingual }}
{{ $siteLanguages := .Site.Languages }} {{ $siteLanguages := .Site.Languages }}
{{ $pageLanguage := .Page.Lang }} {{ $pageLanguage := .Page.Lang }}
@ -39,6 +39,6 @@
{{ end }} {{ end }}
{{ end }} {{ end }}
{{- end }} {{- end }}
</section> </div>
</aside> </div>
</nav> </header>