implement language switch function + header improvements + accessibility optimization

This commit is contained in:
Michi 2025-03-15 21:55:28 +01:00
parent caca1c825e
commit b2eeb3b7ae
8 changed files with 54 additions and 29 deletions

View file

@ -80,8 +80,10 @@ nav.small img{
position: relative;
}
.nav-links a:hover, nav a:focus{
.nav-links a:hover,
.nav-links a:focus{
text-decoration: none;
outline: none;
}
.nav-links a:not(:last-child)::after{
@ -97,7 +99,8 @@ nav.small img{
transform: scaleX(0);
}
.nav-links a:not(:last-child):hover::after{
.nav-links a:not(:last-child):hover::after,
.nav-links a:not(:last-child):focus::after{
transform: scaleX(0.5);
}
@ -115,11 +118,13 @@ nav.small .nav-links a:last-child{
color: var(--primary);
}
.nav-links a:last-child:hover{
.nav-links a:last-child:hover,
.nav-links a:last-child:focus{
background: var(--secondary);
}
nav.small .nav-links a:last-child:hover{
nav.small .nav-links a:last-child:hover,
nav.small .nav-links a:last-child:focus{
background: var(--secondary);
color: var(--color);
}
@ -269,7 +274,8 @@ nav.small .nav-links a:last-child:hover{
animation: scrollHint 2000ms infinite;
}
.hero a:hover{
.hero a:hover,
.hero a:focus{
filter: drop-shadow(0 0 1.1rem var(--primary));
}
@ -328,8 +334,10 @@ nav.small .nav-links a:last-child:hover{
transition: var(--baseTransition);
}
.about a:hover{
.about a:hover,
.about a:focus{
background: var(--primary);
outline: none;
}
.about var{
@ -349,7 +357,9 @@ nav.small .nav-links a:last-child:hover{
align-content: flex-start;
align-items: baseline;
flex-wrap: wrap;
-webkit-user-select: none;
user-select: none;
}
.tag{
@ -575,11 +585,13 @@ nav.small .nav-links a:last-child:hover{
transition: var(--baseTransition);
}
.contact a:hover{
.contact a:hover,
.contact a:focus{
margin: 10px 20px;
color: var(--color);
text-decoration: none;
transform: scale(1.8);
outline: none;
}
/* SCROLL TOP */
@ -666,17 +678,21 @@ nav.small .nav-links a:last-child:hover{
transition: var(--baseTransition);
}
.footer a:hover{
.footer a:hover,
.footer a:focus{
color: var(--color);
text-decoration: none;
outline: none;
}
@media (pointer: fine){
.footer a:hover:has(i){
.footer a:hover:has(i),
.footer a:focus:has(i){
transform: scale(1.4);
}
.footer a:hover:not(:has(i)){
.footer a:hover:not(:has(i)),
.footer a:focus:not(:has(i)){
transform: scale(1.1);
}
}