responsive
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s

This commit is contained in:
Julie Blanc 2026-02-07 15:59:34 +01:00
parent 48ded249a3
commit da79013711
14 changed files with 203 additions and 200 deletions

View file

@ -15,6 +15,7 @@
--panel-w: 310px;
--leading-tight: 1.05;
--leading-normal: 1.3;
--leading-title: 1.1;
--fw-normal: 400;
--fw-medium: 500;
--fw-bold: 600;
@ -57,10 +58,10 @@
@media screen and (max-width: 768px) {
:root {
--fs-xsmall: 10px;
--fs-small: 12px;
--fs-normal: 14px;
--fs-medium: 18px;
--fs-xsmall: 16px;
--fs-small: 16px;
--fs-normal: 20px;
--fs-medium: 24px;
--fs-big: 28px;
--fs-xbig: 32px;
--header-h: 60px;
@ -728,7 +729,7 @@ button.sort[data-sort-type=up] .arrow {
border: 1px solid var(--color-txt);
padding: 0 2ch;
font-family: var(--font);
font-size: var(--fs-normal);
font-size: var(--fs-small);
z-index: 40;
padding-top: 4px;
background: var(--color-bg);
@ -736,12 +737,12 @@ button.sort[data-sort-type=up] .arrow {
}
.form__newsletter input[type=email]::-moz-placeholder {
font-family: var(--font);
font-size: var(--fs-normal);
font-size: var(--fs-small);
color: var(--color-txt);
}
.form__newsletter input[type=email]::placeholder {
font-family: var(--font);
font-size: var(--fs-normal);
font-size: var(--fs-small);
color: var(--color-txt);
}
.form__newsletter input[type=email]:focus {
@ -755,7 +756,7 @@ button.sort[data-sort-type=up] .arrow {
.form__newsletter button[type=submit].btn--newletter {
--size: calc(var(--h-block)*1.25 - 8px);
font-family: var(--font);
font-size: var(--fs-button-bold);
font-size: var(--fs-small);
height: var(--size);
display: flex;
align-items: center;
@ -784,7 +785,7 @@ button.sort[data-sort-type=up] .arrow {
.form__newsletter button[type=submit].btn--newletter .txt {
position: relative;
top: 2px;
font-size: var(--fs-normal);
font-size: var(--fs-small);
display: none;
padding-left: 1ch;
}
@ -886,9 +887,10 @@ button.sort[data-sort-type=up] .arrow {
display: block;
}
.footer__socials .list-socials li {
margin-bottom: calc(var(--spacing) * 0.5);
margin-bottom: calc(var(--spacing) * 0.25);
-moz-column-break-inside: avoid;
break-inside: avoid;
font-size: var(--fs-small);
}
.footer__socials .list-socials a {
gap: 1ch;
@ -898,6 +900,13 @@ button.sort[data-sort-type=up] .arrow {
content: "↗";
color: var(--grey-300);
}
.footer__socials .list-socials a:hover {
color: var(--color-accent);
}
.footer__socials .list-socials a:hover::after {
color: var(--color-accent);
opacity: 0.5;
}
.footer__socials .list-socials .text {
display: block;
line-height: 1;
@ -1215,7 +1224,7 @@ button.sort[data-sort-type=up] .arrow {
.card--article .title {
margin-top: calc(var(--spacing) * 0.75);
font-size: var(--fs-normal);
line-height: 1.1;
line-height: var(--leading-title);
font-weight: 500;
text-transform: uppercase;
text-wrap: balance;
@ -1336,7 +1345,7 @@ button.sort[data-sort-type=up] .arrow {
text-wrap: balance;
max-width: 42ch;
text-transform: uppercase;
line-height: 1.1;
line-height: var(--leading-title);
}
.card--article-small .title a {
text-decoration: none;
@ -1410,33 +1419,18 @@ button.sort[data-sort-type=up] .arrow {
}
}
@media screen and (max-width: 560px) {
.card--article-small .icon-article {
display: none;
}
.card--article-small .description {
display: none;
}
.card--article-small .content {
padding: 0;
display: contents;
}
.card--article-small .title {
margin-bottom: 0;
}
.card--article-small time {
font-size: var(--fs-small);
margin-top: 0.25em;
padding-top: calc(var(--spacing) * 0.25);
}
.card--article-small .keywords {
display: block;
line-height: 1.1;
margin-top: calc(var(--spacing) * 0.5);
padding-right: calc(var(--padding-inner) * 1);
.card--article-small figure {
grid-row: 1/3;
}
.card--article-small .keywords li, .card--article-small .keywords a {
display: inline;
border: none;
padding: 0px;
color: var(--color-txt-light);
.card--article-small .description {
grid-column: span 2;
}
}
@ -1778,14 +1772,7 @@ button.sort[data-sort-type=up] .arrow {
}
@media screen and (max-width: 560px) {
.card--impact-small .keywords {
display: block;
line-height: 1.1;
}
.card--impact-small .keywords li, .card--impact-small .keywords a {
display: inline;
border: none;
padding: 0px;
color: var(--color-txt-light);
display: none;
}
}
@media screen and (max-width: 560px) {
@ -1906,6 +1893,7 @@ button.sort[data-sort-type=up] .arrow {
.card--folder .title {
font-weight: 500;
font-size: var(--fs-normal);
line-height: var(--leading-title);
margin-bottom: 0.75em;
text-wrap: balance;
max-width: 42ch;
@ -2033,24 +2021,25 @@ button.sort[data-sort-type=up] .arrow {
font-size: var(--fs-small);
}
@container cardfolder (width < 680px) {
figure {
aspect-ratio: inherit;
width: 100%;
height: 100%;
@media screen and (max-width: 560px) {
.card--folder .content {
display: contents;
}
.short {
margin-top: calc(var(--spacing) * 0.5);
.card--folder figure {
grid-row: 1/3;
}
}
@container cardfolder (width < 520px) {
figure {
aspect-ratio: inherit;
width: 100%;
height: 100%;
}
.short, ul {
.card--folder .title {
font-size: var(--fs-small);
padding-top: calc(var(--spacing) * 0.25);
margin-bottom: 0;
}
.card--folder .short {
grid-column: span 2;
}
.card--folder ul {
grid-column: 2;
grid-row: 2;
padding-top: 0;
}
}
.card--open-graph {
@ -2406,6 +2395,9 @@ button.sort[data-sort-type=up] .arrow {
#site-menu nav ul .highlight {
text-transform: uppercase;
}
#site-menu .socials {
padding-bottom: calc(var(--spacing) * 0.75);
}
body.menu-open #site-menu {
right: 0;
@ -2436,6 +2428,7 @@ body.menu-open #menu-toggle .close {
}
#site-footer p {
margin: calc(var(--spacing) * 0.5) 0;
font-size: var(--fs-small);
}
#site-footer p a {
text-decoration: none;
@ -2449,9 +2442,12 @@ body.menu-open #menu-toggle .close {
color: var(--grey-600);
}
#site-footer .footer__mentions p {
font-size: var(--fs-small);
font-size: var(--fs-xsmall);
color: var(--color-txt);
}
#site-footer .footer__socials > p {
font-weight: 500;
}
@media screen and (max-width: 768px) {
#site-footer .footer__socials {
margin-top: calc(var(--spacing) * 0.75);
@ -2467,9 +2463,12 @@ body.menu-open #menu-toggle .close {
padding-top: calc(var(--spacing) * 0.25);
}
#site-footer .footer__mentions p {
font-size: var(--fs-small);
font-size: 12px;
text-align: center;
}
#site-footer .p__small {
font-size: 12px;
}
}
@media screen and (min-width: 768px) {
#site-footer .site-footer__container {
@ -2478,6 +2477,14 @@ body.menu-open #menu-toggle .close {
-moz-column-gap: calc(var(--spacing) * 2);
column-gap: calc(var(--spacing) * 2);
}
#site-footer .footer__newsletter {
grid-column: 1;
grid-row: 2;
}
#site-footer .footer__socials {
grid-column: 2;
grid-row: 2;
}
#site-footer .footer__socials .socials {
-moz-columns: 2;
columns: 2;
@ -2522,7 +2529,6 @@ body main .page__content {
padding: 0 1.5ch;
padding-top: 3px;
font-size: var(--fs-xsmall);
line-height: 1;
background-color: var(--color-bg);
color: var(--color-txt-light);
font-weight: 500;
@ -2546,15 +2552,11 @@ main .page__header .page__title {
font-weight: normal;
font-size: var(--fs-medium);
font-weight: 500;
line-height: var(--leading-tight);
line-height: var(--leading-title);
margin-top: calc(var(--spacing) * 1);
margin-bottom: calc(var(--spacing) * 0.5);
text-wrap: balance;
}
main .page__header .description {
max-width: 58ch;
line-height: 1.1;
}
main .page__header .description-medium {
max-width: 58ch;
line-height: 1.1;
@ -2785,6 +2787,8 @@ main .page__header .description-medium {
grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr;
position: relative;
-moz-column-gap: 1ch;
column-gap: 1ch;
border-top: var(--border-light);
padding: calc(var(--spacing) * 0.5) 0;
}
@ -2870,14 +2874,6 @@ main .page__header .description-medium {
display: none;
}
}
@media screen and (max-width: 560px) {
[data-template=investigation-summary] main #section__dl .dl__group {
-moz-column-gap: 1ch;
column-gap: 1ch;
font-size: var(--fs-small);
padding: calc(var(--spacing) * 0.25) 0;
}
}
@media screen and (max-width: 768px) {
[data-template=report] #toggle-panel {
display: none;