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
Download patch file Download diff file Expand all files Collapse all files

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

@ -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;
}
}
}