michi.vonah/website-v3
1
0
Fork 0
mirror of https://github.com/michivonah/website-v3.git synced 2025-12-22 21:36:28 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

implement language switch function + header improvements + accessibility optimization

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

16
static/main.js
View file

@ -3,6 +3,12 @@ document.addEventListener('DOMContentLoaded', function(){
scrollTopVisibilityUpdate();
updateNavStyle();
calculateAge(".age");
// add eventlistener to language selector
const languageSelector = document.querySelector(".language-selector");
languageSelector.addEventListener('change', function(){
window.location.href = languageSelector.value + window.location.hash;
});
});
window.addEventListener('scroll', function(){
@ -68,12 +74,12 @@ const observer = new IntersectionObserver(entries => {
actionObject.classList.remove('typewriter-animation');
});
});
});
observer.observe(document.querySelector('.contact-title-wrapper'));
observer.observe(document.querySelector('.contact-title-wrapper'));
// calculate age
function calculateAge(selector){
// calculate age
function calculateAge(selector){
const obj = document.querySelector(selector);
const birthdate = obj.getAttribute("data-birthdate").split(",");
const birth = new Date(birthdate[2], birthdate[1] - 1, birthdate[0]);
@ -88,4 +94,4 @@ const observer = new IntersectionObserver(entries => {
}
obj.textContent = age;
}
}

36
static/style.css
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);
}
}