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

This commit is contained in:
Julie Blanc 2026-02-23 17:34:16 +01:00
parent f24b296ff7
commit bdb60646d0
14 changed files with 562 additions and 133 deletions

View file

@ -29,6 +29,8 @@ body{
color: var(--color-txt);
background-color: var(--color-bg);
}
img{

View file

@ -64,14 +64,10 @@
color: var(--color-txt-light);
flex-grow: 1;
width: 100%;
white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
// align-items: center;
padding-top: 5px;
min-width: 0;
.type{
text-transform: uppercase;
&::after{
@ -84,23 +80,39 @@
}
.title{
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@media #{$small} {
display: flex;
align-items: center;
justify-content: center;
// display: flex;
// align-items: center;
// justify-content: center;
.bottom-bar__inner{
height: calc(var(--header-h)*0.5);
height: calc(var(--header-h)*0.75);
justify-content: center;
align-items: center;
}
.title-group, .btn--download, .btn--back-to-top{ display: none; }
.btn--download, .btn--back-to-top{ display: none; }
}
@media #{$x-small} {
display: flex;
align-items: center;
justify-content: center;
.title-group{
display: none;
}
}
}

View file

@ -23,7 +23,7 @@ button:disabled{
}
.soutenir{
.support{
a{
color: var(--color-accent);
&:hover{

View file

@ -1,12 +1,10 @@
#investigation__hero{
width: 100%;
position: relative;
left: 0;
padding-top: calc(var(--spacing)*4);
margin-bottom: calc(var(--spacing)*3);
max-width: var(--max-w-cards);
margin-inline: auto;
figcaption{
color: var(--color-txt-light);
@ -15,7 +13,7 @@
padding: calc(var(--spacing)*0.5) var(--padding-body);
padding-bottom: 0;
text-align: center;
width: var(--max-w-content);
max-width: var(--max-w-content);
margin-inline: auto;
}
@ -96,4 +94,8 @@
}
}
}

View file

@ -1,5 +1,8 @@
.swiper {
width: 100%!important;
min-width: 0;
.swiper-button-prev,
.swiper-button-next{
color: var(--color-txt);

View file

@ -20,6 +20,14 @@
white-space: nowrap;
text-transform: uppercase;
@media #{$small} {
height: calc(var(--h-block)*0.75);
font-size: var(--fs-xsmall);
padding: 0 1ch;
padding-top: 3px;
}
}
@ -29,7 +37,7 @@ main .page__header {
margin-bottom: calc(var(--spacing) * 2);
@media #{$small} {
margin-top: calc(var(--spacing) * 2);
margin-top: calc(var(--spacing) * 1);
}
@ -42,18 +50,21 @@ main .page__header {
line-height: var(--leading-title);
margin-top: calc(var(--spacing) * 1);
margin-bottom: calc(var(--spacing) * 1.5);
@media #{$small-up} {
text-wrap: balance;
}
@media #{$small} {
margin-bottom: calc(var(--spacing) * 1);
}
}
.description {
font-size: var(--fs-text);
margin-bottom: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 3);
}
// .description-medium{
// font-size: var(--fs-medium);
// max-width: 58ch;
// line-height: 1.1;
// }
}

View file

@ -1,5 +1,8 @@
#site-footer {
background-color: var(--dark);
padding: calc(var(--spacing)*2) var(--padding-body);
z-index: 500;

View file

@ -1,5 +1,7 @@
#site-header {
z-index: var(--z-header);
--gap: 3ch;
@ -42,10 +44,12 @@
svg{
width: 100px;
@media #{$small}{
width: 80px;
}
}
@media #{$small}{
svg{ width: 80px; }
top: -4px;
}
}
@ -59,15 +63,39 @@
justify-content: center;
gap: var(--gap);
list-style-type: none;
li{
white-space: nowrap;
}
}
}
#nav-highlight ul{
font-weight: 500;
text-transform: uppercase;
@media #{$medium}{
font-size: var(--fs-small);
}
@media screen and (max-width: 890px){
justify-content: flex-end;
padding-right: 2ch;
li{ display: none; }
li.support{ display: block; }
}
}
#nav-investigation{
position: absolute;
@ -80,6 +108,41 @@
transition: top 0.3s ease;
pointer-events: none;
min-width: 0;
.title{
text-transform: uppercase;
font-size: var(--fs-small);
font-weight: 500;
max-width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 2ch;
padding-right: 2ch;
text-align: center;
color: var(--color-txt-light);
}
@media #{$medium}{
ul{
font-size: var(--fs-small);
padding-left: 6ch;
padding-right: 6ch;
}
}
li{
color: var(--color-txt-light);
transition: color 0.3s ease;
@ -95,22 +158,13 @@
}
}
}
}
&.has-nav-investigation{
#nav-highlight{
display: none;
}
#nav-investigation{
position: relative;
opacity: 1;
transform: translateY(0);
top: 0px;
pointer-events: auto;
}
}
@ -162,10 +216,73 @@
@media #{$medium}{
#nav-highlight{
// Animation, change header
#site-header.has-nav-investigation{
#nav-highlight{
display: none;
}
#nav-investigation{
position: relative;
opacity: 1;
transform: translateY(0);
top: 0px;
pointer-events: auto;
}
}
@media #{$small-up}{
#site-header #nav-investigation .title{
display: none;
}
}
@media #{$small}{
#site-header #nav-highlight ul{
display: none;
}
#site-header #nav-investigation .title{
display: none;
}
#site-header.has-nav-investigation{
#nav-investigation{
ul{ display: none; }
.title{ display: block; }
}
}
}
// @media #{$x-small}{
// #site-header.has-nav-investigation{
// #nav-investigation{
// .title{ display: none; }
// }
// }
// }
// @media #{$x-small}{
// [data-template="investigation"] #site-header{
// #lang-toggle{ display: none; }
// #theme-toggle{ padding-right: 1ch; }
// #nav-investigation .title{
// font-size: var(--fs-xsmall);
// }
// }
// }

View file

@ -195,6 +195,9 @@ body.is-hidden .bottom-bar__inner {
#site-header #site-title svg {
width: 80px;
}
#site-header #site-title {
top: -4px;
}
}
#site-header #nav-highlight,
#site-header #nav-investigation {
@ -209,10 +212,31 @@ body.is-hidden .bottom-bar__inner {
gap: var(--gap);
list-style-type: none;
}
#site-header #nav-highlight ul li,
#site-header #nav-investigation ul li {
white-space: nowrap;
}
#site-header #nav-highlight ul {
font-weight: 500;
text-transform: uppercase;
}
@media screen and (max-width: 1080px) {
#site-header #nav-highlight ul {
font-size: var(--fs-small);
}
}
@media screen and (max-width: 890px) {
#site-header #nav-highlight ul {
justify-content: flex-end;
padding-right: 2ch;
}
#site-header #nav-highlight ul li {
display: none;
}
#site-header #nav-highlight ul li.support {
display: block;
}
}
#site-header #nav-investigation {
position: absolute;
top: 10%;
@ -221,6 +245,28 @@ body.is-hidden .bottom-bar__inner {
opacity: 0;
transition: top 0.3s ease;
pointer-events: none;
min-width: 0;
}
#site-header #nav-investigation .title {
text-transform: uppercase;
font-size: var(--fs-small);
font-weight: 500;
max-width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 2ch;
padding-right: 2ch;
text-align: center;
color: var(--color-txt-light);
}
@media screen and (max-width: 1080px) {
#site-header #nav-investigation ul {
font-size: var(--fs-small);
padding-left: 6ch;
padding-right: 6ch;
}
}
#site-header #nav-investigation li {
color: var(--color-txt-light);
@ -236,16 +282,6 @@ body.is-hidden .bottom-bar__inner {
#site-header #nav-investigation li.is-selected:hover a:hover {
color: var(--color-txt);
}
#site-header.has-nav-investigation #nav-highlight {
display: none;
}
#site-header.has-nav-investigation #nav-investigation {
position: relative;
opacity: 1;
transform: translateY(0);
top: 0px;
pointer-events: auto;
}
#site-header #theme-toggle {
width: var(--h-block);
height: var(--h-block);
@ -284,11 +320,36 @@ body.is-hidden .bottom-bar__inner {
fill: var(--grey-200) !important;
}
@media screen and (max-width: 1080px) {
#nav-highlight {
#site-header.has-nav-investigation #nav-highlight {
display: none;
}
#site-header.has-nav-investigation #nav-investigation {
position: relative;
opacity: 1;
transform: translateY(0);
top: 0px;
pointer-events: auto;
}
@media screen and (min-width: 768px) {
#site-header #nav-investigation .title {
display: none;
}
}
@media screen and (max-width: 768px) {
#site-header #nav-highlight ul {
display: none;
}
#site-header #nav-investigation .title {
display: none;
}
#site-header.has-nav-investigation #nav-investigation ul {
display: none;
}
#site-header.has-nav-investigation #nav-investigation .title {
display: block;
}
}
button {
cursor: pointer;
font-family: var(--font);
@ -314,10 +375,10 @@ button:disabled {
cursor: auto;
}
.soutenir a {
.support a {
color: var(--color-accent);
}
.soutenir a:hover {
.support a:hover {
color: var(--color-accent) !important;
text-decoration: underline !important;
}
@ -698,10 +759,6 @@ button.sort[data-sort-type=up] .arrow {
}
#investigation__hero {
width: 100%;
position: relative;
left: 0;
padding-top: calc(var(--spacing) * 4);
margin-bottom: calc(var(--spacing) * 3);
max-width: var(--max-w-cards);
margin-inline: auto;
}
@ -718,7 +775,7 @@ button.sort[data-sort-type=up] .arrow {
padding: calc(var(--spacing) * 0.5) var(--padding-body);
padding-bottom: 0;
text-align: center;
width: var(--max-w-content);
max-width: var(--max-w-content);
margin-inline: auto;
}
#investigation__hero figure {
@ -1954,6 +2011,10 @@ button.sort[data-sort-type=up] .arrow {
}
@container opengraph (width < 500px) {}
.swiper {
width: 100% !important;
min-width: 0;
}
.swiper .swiper-button-prev,
.swiper .swiper-button-next {
color: var(--color-txt);
@ -2123,7 +2184,8 @@ button.sort[data-sort-type=up] .arrow {
color: var(--color-txt-light);
flex-grow: 1;
width: 100%;
white-space: nowrap;
padding-top: 5px;
min-width: 0;
}
#bottom-bar .title-group .type {
text-transform: uppercase;
@ -2133,18 +2195,29 @@ button.sort[data-sort-type=up] .arrow {
padding-left: 1ch;
padding-right: 1ch;
}
#bottom-bar .title-group .title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media screen and (max-width: 768px) {
#bottom-bar .bottom-bar__inner {
height: calc(var(--header-h) * 0.75);
justify-content: center;
align-items: center;
}
#bottom-bar .btn--download, #bottom-bar .btn--back-to-top {
display: none;
}
}
@media screen and (max-width: 560px) {
#bottom-bar {
display: flex;
align-items: center;
justify-content: center;
}
#bottom-bar .bottom-bar__inner {
height: calc(var(--header-h) * 0.5);
justify-content: center;
align-items: center;
}
#bottom-bar .title-group, #bottom-bar .btn--download, #bottom-bar .btn--back-to-top {
#bottom-bar .title-group {
display: none;
}
}
@ -2241,6 +2314,9 @@ button.sort[data-sort-type=up] .arrow {
#site-header #site-title svg {
width: 80px;
}
#site-header #site-title {
top: -4px;
}
}
#site-header #nav-highlight,
#site-header #nav-investigation {
@ -2255,10 +2331,31 @@ button.sort[data-sort-type=up] .arrow {
gap: var(--gap);
list-style-type: none;
}
#site-header #nav-highlight ul li,
#site-header #nav-investigation ul li {
white-space: nowrap;
}
#site-header #nav-highlight ul {
font-weight: 500;
text-transform: uppercase;
}
@media screen and (max-width: 1080px) {
#site-header #nav-highlight ul {
font-size: var(--fs-small);
}
}
@media screen and (max-width: 890px) {
#site-header #nav-highlight ul {
justify-content: flex-end;
padding-right: 2ch;
}
#site-header #nav-highlight ul li {
display: none;
}
#site-header #nav-highlight ul li.support {
display: block;
}
}
#site-header #nav-investigation {
position: absolute;
top: 10%;
@ -2267,6 +2364,28 @@ button.sort[data-sort-type=up] .arrow {
opacity: 0;
transition: top 0.3s ease;
pointer-events: none;
min-width: 0;
}
#site-header #nav-investigation .title {
text-transform: uppercase;
font-size: var(--fs-small);
font-weight: 500;
max-width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 2ch;
padding-right: 2ch;
text-align: center;
color: var(--color-txt-light);
}
@media screen and (max-width: 1080px) {
#site-header #nav-investigation ul {
font-size: var(--fs-small);
padding-left: 6ch;
padding-right: 6ch;
}
}
#site-header #nav-investigation li {
color: var(--color-txt-light);
@ -2282,16 +2401,6 @@ button.sort[data-sort-type=up] .arrow {
#site-header #nav-investigation li.is-selected:hover a:hover {
color: var(--color-txt);
}
#site-header.has-nav-investigation #nav-highlight {
display: none;
}
#site-header.has-nav-investigation #nav-investigation {
position: relative;
opacity: 1;
transform: translateY(0);
top: 0px;
pointer-events: auto;
}
#site-header #theme-toggle {
width: var(--h-block);
height: var(--h-block);
@ -2330,11 +2439,36 @@ button.sort[data-sort-type=up] .arrow {
fill: var(--grey-200) !important;
}
@media screen and (max-width: 1080px) {
#nav-highlight {
#site-header.has-nav-investigation #nav-highlight {
display: none;
}
#site-header.has-nav-investigation #nav-investigation {
position: relative;
opacity: 1;
transform: translateY(0);
top: 0px;
pointer-events: auto;
}
@media screen and (min-width: 768px) {
#site-header #nav-investigation .title {
display: none;
}
}
@media screen and (max-width: 768px) {
#site-header #nav-highlight ul {
display: none;
}
#site-header #nav-investigation .title {
display: none;
}
#site-header.has-nav-investigation #nav-investigation ul {
display: none;
}
#site-header.has-nav-investigation #nav-investigation .title {
display: block;
}
}
#site-menu {
position: fixed;
width: var(--menu-w);
@ -2535,6 +2669,14 @@ body main .page__content {
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;
}
}
main .page__header {
margin-top: calc(var(--spacing) * 3);
@ -2542,7 +2684,7 @@ main .page__header {
}
@media screen and (max-width: 768px) {
main .page__header {
margin-top: calc(var(--spacing) * 2);
margin-top: calc(var(--spacing) * 1);
}
}
main .page__header .page__title {
@ -2554,7 +2696,16 @@ main .page__header .page__title {
line-height: var(--leading-title);
margin-top: calc(var(--spacing) * 1);
margin-bottom: calc(var(--spacing) * 1.5);
text-wrap: balance;
}
@media screen and (min-width: 768px) {
main .page__header .page__title {
text-wrap: balance;
}
}
@media screen and (max-width: 768px) {
main .page__header .page__title {
margin-bottom: calc(var(--spacing) * 1);
}
}
main .page__header .description {
font-size: var(--fs-text);
@ -2683,6 +2834,18 @@ main .page__header .description {
[data-template=investigation] main .page__content {
max-width: 100%;
}
@media screen and (min-width: 768px) {
[data-template=investigation] main #investigation__hero {
padding-top: calc(var(--spacing) * 4);
margin-bottom: calc(var(--spacing) * 3);
}
}
@media screen and (max-width: 768px) {
[data-template=investigation] main #investigation__hero {
padding-top: calc(var(--spacing) * 1.5);
margin-bottom: calc(var(--spacing) * 2);
}
}
[data-template=investigation] main .investigation__content {
font-size: var(--fs-text);
}
@ -2693,6 +2856,11 @@ main .page__header .description {
margin-inline: auto;
font-size: var(--fs-normal);
}
@media screen and (max-width: 768px) {
[data-template=investigation] main #investigation__dl {
font-size: var(--fs-small);
}
}
[data-template=investigation] main #investigation__dl .dl__group {
display: grid;
grid-gap: var(--padding-inner);
@ -2727,9 +2895,6 @@ main .page__header .description {
#investigation__content {
padding-top: calc(var(--spacing) * 4);
}
#investigation__content .section-content {
margin-bottom: calc(var(--spacing) * 4);
}
#investigation__content .section-title-only {
margin-bottom: 0;
}
@ -2778,27 +2943,70 @@ main .page__header .description {
margin-bottom: calc(var(--spacing) * 2);
padding: calc(var(--padding-inner) * 2) calc(var(--padding-inner) * 1.5);
}
#investigation__content .subsection-w-media {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--padding-body);
position: relative;
}
#investigation__content .subsection-w-media .media {
margin-inline: auto;
max-width: var(--max-w-content);
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
position: sticky;
top: calc(var(--header-h) + var(--spacing));
align-self: start;
}
#investigation__content .subsection-txt {
min-height: calc(100vh - var(--header-h));
max-width: var(--max-w-content);
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
padding-bottom: calc(var(--spacing) * 6);
}
@media screen and (min-width: 768px) {
#investigation__content .section-content {
margin-bottom: calc(var(--spacing) * 4);
}
#investigation__content .subsection-w-media {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--padding-body);
position: relative;
}
#investigation__content .subsection-w-media .media {
margin-inline: auto;
max-width: var(--max-w-content);
position: sticky;
top: calc(var(--header-h) + var(--spacing));
align-self: start;
}
}
@media screen and (min-width: 768px) and (min-width: 1080px) {
#investigation__content .subsection-w-media .media {
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
}
}
@media screen and (min-width: 768px) {
#investigation__content .subsection-txt {
min-height: calc(100vh - var(--header-h));
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
padding-bottom: calc(var(--spacing) * 6);
}
}
@media screen and (max-width: 768px) {
#investigation__content .section-content:not(.section-title-only) {
padding-bottom: calc(var(--spacing) * 1);
margin-bottom: calc(var(--spacing) * 2);
border-bottom: var(--border-light);
}
#investigation__content .section-title-only {
margin-bottom: calc(var(--spacing) * 1.5);
}
#investigation__content .media {
margin-bottom: calc(var(--spacing) * 2);
}
#investigation__content h3 {
margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 1.5);
font-size: 1.35em;
}
#investigation__content h4 {
margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 1);
font-size: 1em;
}
#investigation__content h4, #investigation__content h5 {
margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 1);
}
#investigation__content .subsection-txt .insert {
margin-top: calc(var(--spacing) * 1.5);
}
}
#investigation__content .subsection-w-hscroll {
position: relative;

File diff suppressed because one or more lines are too long

View file

@ -8,6 +8,8 @@
margin-inline: auto;
max-width: var(--max-w-content);
margin-bottom: 0px;
.description{
margin-bottom: 0px;
}
@ -18,6 +20,17 @@
}
#investigation__hero{
@media #{$small-up} {
padding-top: calc(var(--spacing)*4);
margin-bottom: calc(var(--spacing)*3);
}
@media #{$small} {
padding-top: calc(var(--spacing)*1.5);
margin-bottom: calc(var(--spacing)*2);
}
}
.investigation__content{
font-size: var(--fs-text);
}
@ -74,6 +87,10 @@
margin-inline: auto;
font-size: var(--fs-normal);
@media #{$small} {
font-size: var(--fs-small);
}
.dl__group {
@include grid-content();
column-gap: 1ch;

View file

@ -2,13 +2,8 @@
#investigation__content {
padding-top: calc(var(--spacing) * 4);
.section-content {
margin-bottom: calc(var(--spacing)*4);
}
.section-title-only{
margin-bottom: 0;
@ -74,34 +69,92 @@
}
.subsection-w-media{
.subsection-txt {
max-width: var(--max-w-content);
}
@media #{$small-up}{
.section-content {
margin-bottom: calc(var(--spacing)*4);
}
.subsection-w-media{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--padding-body);
position: relative;
.media{
margin-inline: auto;
max-width: var(--max-w-content);
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
position: sticky;
top: calc(var(--header-h) + var(--spacing));
align-self: start;
.media{
margin-inline: auto;
max-width: var(--max-w-content);
position: sticky;
top: calc(var(--header-h) + var(--spacing));
align-self: start;
@media #{$medium-up}{
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
}
}
}
.subsection-txt {
min-height: calc(100vh - var(--header-h));
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
padding-bottom: calc(var(--spacing)*6);
}
}
.subsection-txt {
min-height: calc(100vh - var(--header-h));
max-width: var(--max-w-content);
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
padding-bottom: calc(var(--spacing)*6);
@media #{$small}{
.section-content:not(.section-title-only) {
padding-bottom: calc(var(--spacing)*1);
margin-bottom: calc(var(--spacing)*2);
border-bottom: var(--border-light);
}
.section-title-only{
margin-bottom: calc(var(--spacing)*1.5);
}
.media{
margin-bottom: calc(var(--spacing)*2);
}
h3{
margin-top: calc(var(--spacing)*3);
margin-bottom: calc(var(--spacing)*1.5);
font-size: 1.35em;
}
h4{
margin-top: calc(var(--spacing)*3);
margin-bottom: calc(var(--spacing)*1);
font-size: 1em;
}
h4, h5{
margin-top: calc(var(--spacing)*3);
margin-bottom: calc(var(--spacing)*1);
}
.subsection-txt .insert{
margin-top: calc(var(--spacing)*1.5);
}
}
.subsection-w-hscroll{
position: relative;
margin-bottom: calc(var(--spacing)*4);

View file

@ -46,11 +46,12 @@
<li><a href="/enquetes">Enquêtes</a></li>
<li><a href="/impacts">Impacts</a></li>
<li><a href="/laboratoire">Laboratoire</a></li>
<li class="soutenir"><a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a></li>
<li class="support"><a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a></li>
</ul>
</nav>
<nav id="nav-investigation">
<!-- <p class="title"><?= $page->title()->esc() ?></p> -->
<ul>
<li class="is-selected"><a href="#investigation__hero">Vidéo</a></li>
<li><a href="#investigation__content">Enquête</a></li>

View file

@ -17,7 +17,7 @@ de la vérité et de la justice.</p>
<nav>
<ul>
<li class="soutenir highlight"><a href="#">Soutenez-nous</a></li>
<li class="support highlight"><a href="#">Soutenez-nous</a></li>
<li class="highlight"><a href="/enquetes">Enquêtes</a></li>
<li class="highlight"><a href="/impacts">Impact</a></li>
<li><a href="/dossiers">Dossiers</a></li>