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

fix layout shift, accessability & union hover animations

Browse source
This commit is contained in:
Michi 2025-03-21 19:51:40 +01:00
parent 892f8ece0c
commit 52af1a4e01
1 changed files with 24 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

30
static/style.css
View file

@ -18,6 +18,7 @@ body{
--background: #181818;
--color: #f8f8f8;
--font: "Source Sans 3", sans-serif;
--border: 2px solid var(--color);
--baseRadius: 12px;
--baseTransition: all var(--baseDuration);
--baseDuration: 250ms;
@ -109,10 +110,10 @@ nav.small img{
}
.nav-links a:last-child{
padding: 5px 16px;
padding: 3px 16px;
background: var(--primary);
color: var(--color);
border: none;
border: 2px solid transparent;
border-radius: var(--baseRadius);
transition: var(--baseTransition);
}
@ -124,7 +125,9 @@ nav.small .nav-links a:last-child{
.nav-links a:last-child:hover,
.nav-links a:last-child:focus{
padding: 3px 30px;
background: var(--secondary);
border: var(--border);
}
nav.small .nav-links a:last-child:hover,
@ -186,9 +189,16 @@ nav.small .nav-links a:last-child:focus{
display: none;
}
.nav-links a:last-child{
.nav-links a:last-child,
.nav-links a:last-child:hover,
.nav-links a:last-child:focus,
nav.small .nav-links a:last-child,
nav.small .nav-links a:last-child:hover,
nav.small .nav-links a:last-child:focus{
background: inherit;
padding: inherit;
color: inherit;
border: none;
}
}
@ -390,7 +400,7 @@ nav.small .nav-links a:last-child:focus{
padding: 5px 26px;
background: var(--secondary);
color: var(--color);
border: 2px solid var(--color);
border: var(--border);
}
.project-list{
@ -417,7 +427,7 @@ nav.small .nav-links a:last-child:focus{
.project-load-btn:hover{
padding: 10px 40px;
background: var(--secondary);
border: 2px solid var(--color);
border: var(--border);
cursor: pointer;
}
@ -701,14 +711,18 @@ nav.small .nav-links a:last-child:focus{
justify-content: space-around;
align-content: center;
align-items: center;
padding: 0 10px;
}
@media screen and (max-width:490px){
.footer, .footer-part{
width: calc(100% + 20px);
flex-direction: column-reverse;
}
.footer-part{
width: calc(100% + 20px);
}
.sm-icons{
flex-direction: row;
}
@ -764,6 +778,7 @@ nav.small .nav-links a:last-child:focus{
animation-timeline: view();
animation-composition: add;
animation-range: entry 0 cover var(--animationCoverValue);
overflow: hidden;
}
.fade-down{
@ -771,6 +786,7 @@ nav.small .nav-links a:last-child:focus{
animation-timeline: view();
animation-composition: add;
animation-range: entry 0 cover var(--animationCoverValue);
overflow: hidden;
}
.fade-left{
@ -778,6 +794,7 @@ nav.small .nav-links a:last-child:focus{
animation-timeline: view();
animation-composition: add;
animation-range: entry 0 cover var(--animationCoverValue);
overflow: hidden;
}
.fade-right{
@ -785,6 +802,7 @@ nav.small .nav-links a:last-child:focus{
animation-timeline: view();
animation-composition: add;
animation-range: entry 0 cover var(--animationCoverValue);
overflow: hidden;
}
}