studio-variable/index-main
3
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

pinned investigation
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-23 14:21:26 +01:00
parent 05e49af352
commit bee25e5922
11 changed files with 102 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/css/components/_card-article-small.scss
View file

@ -13,7 +13,7 @@
border-top: var(--border-light);
}
@include figure-16-9();
@include figure-16-9-hover();
.content{
display: flex;

19
assets/css/components/_card-article.scss
View file

@ -5,7 +5,7 @@
flex-direction: column;
@include figure-16-9();
@include figure-16-9-hover();
.content{
padding: var(--padding-inner);
@ -13,6 +13,23 @@
flex-direction: column;
flex-grow: 2;
}
.pin{
position: absolute;
top: var(--padding-inner);
left: var(--padding-inner);
z-index: 200;
width: 24px;
height: 24px;
border-radius: var(--radius-small);
background-color: rgba(255, 255, 255, 0.27);
display: flex;
align-items: center;
justify-content: center;
svg{
width: 16px;
fill: var(--color-txt);
}
}
.title{
margin-top: calc(var(--spacing)*0.5);

2
assets/css/components/_card-open-graph.scss
View file

@ -13,7 +13,7 @@
}
@include figure-16-9();
@include figure-16-9-hover();
@media #{$x-small}{

17
assets/css/components/_figures.scss
View file

@ -12,6 +12,23 @@
}
}
}
@mixin figure-16-9-hover{
figure{
aspect-ratio: 16/9;
display: flex;
overflow: hidden;
img{
width: 100%;
height: 100%;
object-fit: cover;
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
}
}
&:hover{
figure img{ transform: scale(1.05); }
}