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

blueprint & templates Impacts
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-24 17:05:22 +01:00
parent fab10a38d8
commit 7b3ebb3ca4
15 changed files with 369 additions and 237 deletions
Download patch file Download diff file Expand all files Collapse all files

125
assets/css/style.css
View file

@ -668,6 +668,58 @@ button:disabled {
white-space: nowrap;
}
.page__type {
height: calc(var(--h-block) * 1);
border-radius: var(--radius-small);
border: var(--border-medium);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1.5ch;
padding-top: 5px;
font-size: var(--fs-small);
background-color: var(--color-bg);
color: var(--color-txt-light);
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-transform: uppercase;
}
@media screen and (max-width: 768px) {
.page__type {
height: calc(var(--h-block) * 0.75);
font-size: var(--fs-xsmall);
padding: 0 1ch;
padding-top: 3px;
}
}
.page__category {
height: calc(var(--h-block) * 1);
border-radius: var(--radius-small);
margin-left: calc(var(--padding-inner) * 0.25);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1.5ch;
padding-top: 5px;
font-size: var(--fs-small);
background-color: var(--color-txt);
color: var(--color-bg);
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-transform: uppercase;
}
@media screen and (max-width: 768px) {
.page__category {
height: calc(var(--h-block) * 0.75);
font-size: var(--fs-xsmall);
padding: 0 1ch;
padding-top: 3px;
}
}
.keywords {
list-style: none;
display: flex;
@ -1316,12 +1368,12 @@ button.sort[data-sort-type=up] .arrow {
flex-direction: column;
padding: var(--padding-inner);
}
.card--article > picture, .card--article > figure {
.card--article > figure {
aspect-ratio: 16/9;
display: flex;
overflow: hidden;
}
.card--article > picture img, .card--article > figure img {
.card--article > figure img, .card--article > figure picture {
width: 100%;
height: 100%;
-o-object-fit: cover;
@ -1485,16 +1537,15 @@ button.sort[data-sort-type=up] .arrow {
.card--article-small:first-of-type {
border-top: var(--border-light);
}
.card--package > picture, .card--package > figure,
.card--article-small > picture,
.card--package > figure,
.card--article-small > figure {
aspect-ratio: 16/9;
display: flex;
overflow: hidden;
}
.card--package > picture img, .card--package > figure img,
.card--article-small > picture img,
.card--article-small > figure img {
.card--package > figure img, .card--package > figure picture,
.card--article-small > figure img,
.card--article-small > figure picture {
width: 100%;
height: 100%;
-o-object-fit: cover;
@ -1713,12 +1764,12 @@ button.sort[data-sort-type=up] .arrow {
.card--block:hover::before {
border-color: var(--color-txt);
}
.card--block > picture, .card--block > figure {
.card--block > figure {
aspect-ratio: 16/9;
display: flex;
overflow: hidden;
}
.card--block > picture img, .card--block > figure img {
.card--block > figure img, .card--block > figure picture {
width: 100%;
height: 100%;
-o-object-fit: cover;
@ -1772,17 +1823,31 @@ button.sort[data-sort-type=up] .arrow {
.card--block .investigations {
text-decoration: none;
list-style: none;
padding-top: calc(var(--spacing) * 0.5);
width: 100%;
z-index: 100;
}
.card--block .investigations li {
font-size: var(--fs-small);
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-txt-light);
font-size: var(--fs-small);
}
.card--block .investigations li a {
text-decoration: none;
color: var(--color-txt-light);
}
.card--block .investigations li a::before {
content: "↪ ";
}
.card--block .investigations li:hover a {
-webkit-text-decoration: underline 1px;
text-decoration: underline 1px;
text-underline-offset: 2px;
color: var(--color-txt);
}
.card--block .card--open-graph {
width: 100%;
margin: calc(var(--spacing) * 0.5) 0;
@ -2691,36 +2756,13 @@ body main {
min-height: 100dvh;
min-height: 100vh;
}
body main .page__header,
body main .page__content {
max-width: var(--max-w-cards);
margin-inline: auto;
}
.page__type {
height: calc(var(--h-block) * 1);
border-radius: var(--radius-small);
border: var(--border-medium);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1.5ch;
padding-top: 5px;
font-size: var(--fs-small);
background-color: var(--color-bg);
color: var(--color-txt-light);
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-transform: uppercase;
}
@media screen and (max-width: 768px) {
.page__type {
height: calc(var(--h-block) * 0.75);
font-size: var(--fs-xsmall);
padding: 0 1ch;
padding-top: 3px;
}
body main .page__header {
max-width: var(--max-w-cards);
margin-inline: auto;
}
main .page__header {
@ -2752,9 +2794,16 @@ main .page__header .page__title {
margin-bottom: calc(var(--spacing) * 1);
}
}
main .page__header .description {
main .page__header .date {
display: block;
margin-top: calc(var(--spacing) * -1);
margin-bottom: calc(var(--spacing) * 1.5);
color: var(--color-txt-light);
}
main .page__header .page__description {
font-size: var(--fs-text);
margin-bottom: calc(var(--spacing) * 3);
max-width: var(--max-w-content);
}
.container-cards {
@ -2873,7 +2922,7 @@ main .page__header .description {
max-width: var(--max-w-content);
margin-bottom: 0px;
}
[data-template=investigation] main .page__header .description {
[data-template=investigation] main .page__header .page__description {
margin-bottom: 0px;
}
[data-template=investigation] main .page__content {