studio-variable/index-main
4
0
Fork 0
Code Issues 7 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

1
assets/css/base/_body.scss
View file

@ -104,6 +104,7 @@ body, #site-header, #site-footer{
@mixin pin(){
.pin{
z-index: 90;
width: 18px;
height: 18px;
transform: rotate(45deg);

2
assets/css/base/_var.scss
View file

@ -53,7 +53,7 @@
--border: 1px solid var(--color-txt);
--border-medium: 1px solid var(--grey-600);
--border-light: 1px solid var(--grey-800);
--border-light: 1px solid #414141;
--header-h: 80px;

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);
}

55
assets/css/style.css
View file

@ -35,7 +35,7 @@
--color-form: white;
--border: 1px solid var(--color-txt);
--border-medium: 1px solid var(--grey-600);
--border-light: 1px solid var(--grey-800);
--border-light: 1px solid #414141;
--header-h: 80px;
--header-h-shrinked: 50px;
--menu-w: 420px;
@ -1235,26 +1235,32 @@ button.sort[data-sort-type=up] .arrow {
object-fit: cover;
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
}
.card--article .pin {
z-index: 90;
width: 18px;
height: 18px;
transform: rotate(45deg);
transform-origin: center;
}
.card--article .pin svg {
width: 100%;
height: 100%;
fill: var(--color-txt);
}
.card--article > figure {
width: calc(100% + var(--padding-inner) * 2);
position: relative;
left: calc(var(--padding-inner) * -1);
top: calc(var(--padding-inner) * -1);
}
.card--article .content {
display: flex;
flex-direction: column;
}
.card--article .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;
}
.card--article .pin svg {
width: 16px;
fill: var(--color-txt);
top: var(--padding-inner);
right: var(--padding-inner);
}
.card--article .time-alone {
display: none;
@ -1478,7 +1484,7 @@ button.sort[data-sort-type=up] .arrow {
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;
flex-direction: column;
@ -1517,6 +1523,7 @@ button.sort[data-sort-type=up] .arrow {
object-fit: cover;
}
.card--impact .pin {
z-index: 90;
width: 18px;
height: 18px;
transform: rotate(45deg);
@ -1562,19 +1569,23 @@ button.sort[data-sort-type=up] .arrow {
top: var(--padding-inner);
right: var(--padding-inner);
}
.card--impact figure {
.card--impact > figure {
width: calc(100% + var(--padding-inner) * 2);
position: relative;
left: calc(var(--padding-inner) * -1);
top: calc(var(--padding-inner) * -1);
}
[data-template=impacts] .page__content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: var(--padding-inner);
.card--impact .tag {
position: relative;
top: 3px;
}
@media screen and (min-width: 768px) {
.card--impact,
.grid-sizer {
width: calc(50% - 13px);
}
}
.card--impact-small {
border-bottom: var(--border-light);
display: grid;

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

29
assets/js/script.js
View file

@ -31,4 +31,33 @@ window.onload = async function () {
playVideo();
initDropdowns(responsiveSmall);
initSwipers();
var elem = document.querySelector('.grid-masonry');
var msnry = null;
function initMasonry() {
if (!elem) return;
if (window.innerWidth >= responsiveSmall) {
if (!msnry) {
msnry = new Masonry(elem, {
itemSelector: '.card--impact',
columnWidth: '.grid-sizer',
percentPosition: true,
gutter: 26
});
}
} else {
if (msnry) {
msnry.destroy();
msnry = null;
}
}
}
initMasonry();
window.addEventListener('resize', initMasonry);
}