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