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 dynamic project loading from api

Browse source
This commit is contained in:
Michi 2025-03-18 21:20:24 +01:00
parent b2eeb3b7ae
commit f5745b9e81
5 changed files with 162 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

61
static/style.css
View file

@ -19,7 +19,8 @@ body{
--color: #f8f8f8;
--font: "Source Sans 3", sans-serif;
--baseRadius: 12px;
--baseTransition: all 250ms;
--baseTransition: all var(--baseDuration);
--baseDuration: 250ms;
--navSmallHeight: 66px;
}
@ -367,9 +368,10 @@ nav.small .nav-links a:last-child:focus{
color: var(--primary);
margin: 10px 5px;
padding: 5px 16px;
font-size: 1rem;
border-radius: var(--baseRadius);
transition: var(--baseTransition);
border: 1px solid var(--primary);
border: 2px solid var(--primary);
}
.tag input{
@ -381,6 +383,13 @@ nav.small .nav-links a:last-child:focus{
color: var(--color);
}
.tag:hover{
padding: 5px 26px;
background: var(--secondary);
color: var(--color);
border: 2px solid var(--color);
}
.project-list{
padding: 20px 0;
display: flex;
@ -391,6 +400,24 @@ nav.small .nav-links a:last-child:focus{
align-items: stretch;
}
.project-load-btn{
padding: 10px 20px;
background: var(--primary);
color: var(--color);
font-size: 1rem;
border: 2px solid transparent;
border-radius: var(--baseRadius);
transition: var(--baseTransition);
opacity: 1;
}
.project-load-btn:hover{
padding: 10px 40px;
background: var(--secondary);
border: 2px solid var(--color);
cursor: pointer;
}
/* Card animation: https://uiverse.io/suleymanlaarabidev/perfect-husky-88 */
.project-card{
width: 30%;
@ -398,7 +425,7 @@ nav.small .nav-links a:last-child:focus{
min-height: 250px;
margin: 20px 10px;
padding: 0 10px;
background-image: url(https://blog.michivonah.ch/content/images/size/w1200/2024/12/ResortPass-Review--1-.jpg);
background: var(--primary);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
@ -406,6 +433,27 @@ nav.small .nav-links a:last-child:focus{
transition: var(--baseTransition);
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.705);
overflow: hidden;
position: relative;
animation: fadeIn 400ms linear;
}
@keyframes fadeIn{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.card-first img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
height: 100%;
}
@media (pointer: fine){
@ -430,7 +478,7 @@ nav.small .nav-links a:last-child:focus{
transition: var(--baseTransition);
opacity: 1;
}
.project-card:hover .card-first{
height: 0;
opacity: 0;
@ -480,8 +528,9 @@ nav.small .nav-links a:last-child:focus{
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.705);
}
.card-first{
display: none;
.card-first img{
height: calc(100% + 60px);
filter: blur(6px);
}
.card-second{