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

impacts with keywords
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-09 14:45:33 +01:00
parent 0727519a5e
commit 1cc63b0725
9 changed files with 131 additions and 166 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,6 +9,14 @@
@include figure-16-9();
@include pin();
& > figure{
width: calc(100% + var(--padding-inner)*2);
position: relative;
left: calc(var(--padding-inner)*-1);
top: calc(var(--padding-inner)*-1);
}
.content{
// padding: var(--padding-inner);
@ -17,20 +25,8 @@
}
.pin{
position: absolute;
top: calc(var(--padding-inner)*1.5);
left: calc(var(--padding-inner)*1.5);
z-index: 10;
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);
}
top: var(--padding-inner);
right: var(--padding-inner);
}
.time-alone{

125
assets/css/components/_card-impact.scss
View file

@ -3,7 +3,7 @@
container-type: inline-size;
container-name: impact;
border: var(--border-light);
margin-bottom: calc(var(--spacing)*1);
margin-bottom: calc(var(--padding-body)*1);
padding: var(--padding-inner);
display: flex;
@ -13,7 +13,6 @@
gap: calc(var(--spacing)*0.25);
@include hover-card-line();
@include figure-3-1();
@include pin();
@ -56,129 +55,31 @@
position: absolute;
top: var(--padding-inner);
right: var(--padding-inner);
}
figure{
& > figure{
width: calc(100% + var(--padding-inner)*2);
position: relative;
left: calc(var(--padding-inner)*-1);
top: calc(var(--padding-inner)*-1);
}
.tag{
position: relative;
top: 3px;
}
}
@media #{$small-up}{
.card--impact,
.grid-sizer{
width: calc(50% - 13px);
}
// @container impact (width < 460px) {
// .card--impact__inner{
// display: block!important;
// padding-top: var(--padding-inner)!important;
// padding-bottom: calc(var(--padding-inner)*0.75)!important;
}
// .tag, .date{
// display: inline-flex;
// margin-right: 2ch;
// top: 0px!important;
// }
// .card--impact__inner > .content{
// margin-top: calc(var(--spacing)*0.75);
// margin-bottom: calc(var(--spacing)*0.25);
// padding-right: 0!important;
// }
// .card--open-graph{
// margin-top: calc(var(--spacing)*0.75);
// margin-bottom: calc(var(--spacing)*0.25);
// }
// .investigations{
// margin-top: calc(var(--spacing)*0.25);
// margin-bottom: calc(var(--spacing)*0.25);
// }
// .keywords-wrapper {
// margin-top: calc(var(--spacing)*1);
// }
// .content,
// details {
// font-size: var(--fs-small) !important;
// }
// .date{
// font-size: var(--fs-xsmall) !important;
// }
// .btn--go-to {
// top: calc(var(--padding-inner)*1.25)!important;
// bottom: auto;
// right: calc(var(--padding-inner)*1.25)!important;
// }
// }
// }
// @media #{$x-small}{
// .card--impact__inner{
// display: block!important;
// padding-top: var(--padding-inner)!important;
// padding-bottom: calc(var(--padding-inner)*0.75)!important;
// .tag, .date{
// display: inline-flex;
// margin-right: 2ch;
// top: 0px!important;
// }
// .content{
// margin-top: calc(var(--spacing)*0.75);
// margin-bottom: calc(var(--spacing)*0.25);
// padding-right: 0!important;
// }
// .card--open-graph{
// margin-top: calc(var(--spacing)*0.75);
// margin-bottom: calc(var(--spacing)*0.25);
// }
// .investigations{
// margin-top: calc(var(--spacing)*0.25);
// margin-bottom: calc(var(--spacing)*0.25);
// }
// .keywords-wrapper {
// margin-top: calc(var(--spacing)*1);
// }
// .date,
// .content,
// details {
// font-size: 14px !important;
// }
// .btn--go-to {
// top: calc(var(--padding-inner)*1.25)!important;
// bottom: auto;
// right: calc(var(--padding-inner)*1.25)!important;
// }
// }
// }
[data-template="impacts"] .page__content{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: var(--padding-inner);
}