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

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

Browse source
This commit is contained in:
Julie Blanc 2026-02-19 16:25:44 +01:00
parent 347c45bc22
commit f1ace8cc05
7 changed files with 338 additions and 159 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,16 +6,26 @@
padding: var(--padding-inner);
@include figure-16-9();
@include pin();
& > figure{
& > figure,
.video-extract{
width: calc(100% + var(--padding-inner)*2);
position: relative;
left: calc(var(--padding-inner)*-1);
top: calc(var(--padding-inner)*-1);
}
.video-extract video{
width: 100%;
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
position: relative;
}
.content{
@ -41,13 +51,13 @@
line-height: var(--leading-title);
font-weight: 500;
text-transform: uppercase;
text-wrap: balance;
// text-wrap: balance;
a{ text-decoration: none;}
}
.description{
margin-top: calc(var(--spacing)*0.5);
margin-top: calc(var(--spacing)*1.25);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
@ -56,14 +66,18 @@
}
.dl{
margin-top: calc(var(--spacing)*0.5);
margin-top: calc(var(--spacing)*0.75);
// font-size: var(--fs-small);
border-bottom: var(--border-light);
font-size: var(--fs-small);
flex-grow: 2;
.dl__group{
@include grid-content();
border-top: var(--border-light);
padding: calc(var(--spacing)*0.5) 0;
&:last-of-type{
border-bottom: var(--border-light);
}
}
dt{
@ -90,8 +104,111 @@
z-index: 2000;
}
.keywords-wrapper{
padding-top: calc(var(--spacing)*0.75);
z-index: 100;
.keywords li a{
font-size: var(--fs-xsmall);
}
}
}
}
[data-template="home"] .pinned-home{
grid-column: span 2;
display: grid;
grid-template-columns: 1fr 1fr;
padding: calc(var(--padding-inner)*2);
figure,
picture,
.video-extract{
grid-column: span 2;
display: flex;
width: calc(100% + var(--padding-inner)*4);
position: relative;
left: calc(var(--padding-inner)*-2);
top: calc(var(--padding-inner)*-2);
}
.title{
grid-column: span 2;
font-size: var(--fs-text);
padding-right: 3ch;
margin-bottom: calc(var(--spacing)*1);
margin-top: calc(var(--spacing)*0.5);
}
.description{
grid-column: 1;
grid-row: 3;
padding-right: 3ch;
display: block;
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
overflow: visible;
font-size: var(--fs-normal);
margin-top: 0px;
}
dl{
margin-top: 0px;
grid-column: 2;
grid-row: 3;
}
.keywords-wrapper{
grid-column: span 2;
grid-row: 4;
}
}
// .card--article:first-of-type{
// grid-column: span 2;
// display: grid;
// grid-template-columns: 1fr 1fr;
// figure,
// picture{
// grid-column: span 2;
// }
// .title{
// grid-column: span 2;
// font-size: var(--fs-medium);
// padding-right: 3ch;
// margin-bottom: calc(var(--spacing)*1);
// }
// .description{
// grid-column: 1;
// grid-row: 3;
// padding-right: 3ch;
// display: block;
// -webkit-line-clamp: unset;
// -webkit-box-orient: unset;
// overflow: visible;
// }
// dl{
// grid-column: 2;
// grid-row: 3;
// }
// .keywords-wrapper{
// grid-column: 2;
// grid-row: 4;
// }
// }