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

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

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

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

42
assets/css/components/_bottom-bar.scss
View file

@ -64,13 +64,9 @@
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;
@ -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;
.bottom-bar__inner{
height: calc(var(--header-h)*0.75);
justify-content: center;
align-items: center;
}
.btn--download, .btn--back-to-top{ display: none; }
}
@media #{$x-small} {
display: flex;
align-items: center;
justify-content: center;
.bottom-bar__inner{
height: calc(var(--header-h)*0.5);
justify-content: center;
align-items: center;
}
.title-group, .btn--download, .btn--back-to-top{ display: none; }
.title-group{
display: none;
}
}
}

2
assets/css/components/_buttons.scss
View file

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

12
assets/css/components/_investigation-hero.scss
View file

@ -1,13 +1,11 @@
#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);
font-size: var(--fs-small);
@ -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;
}
@ -97,3 +95,7 @@
}

3
assets/css/components/_swiper.scss
View file

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

23
assets/css/partials/_page-header.scss
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,7 +50,14 @@ 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);
}
}
@ -51,9 +66,5 @@ main .page__header {
margin-bottom: calc(var(--spacing) * 3);
}
// .description-medium{
// font-size: var(--fs-medium);
// max-width: 58ch;
// line-height: 1.1;
// }
}

3
assets/css/partials/_site-footer.scss
View file

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

147
assets/css/partials/_site-header.scss
View file

@ -1,5 +1,7 @@
#site-header {
z-index: var(--z-header);
--gap: 3ch;
@ -42,9 +44,11 @@
svg{
width: 100px;
@media #{$small}{
width: 80px;
}
@media #{$small}{
svg{ width: 80px; }
top: -4px;
}
}
@ -60,13 +64,37 @@
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{
@ -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}{
// 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);
// }
// }
// }

300
assets/css/style.css
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,10 +320,35 @@ 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;
@ -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,10 +2439,35 @@ 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;
@ -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,8 +2696,17 @@ main .page__header .page__title {
line-height: var(--leading-title);
margin-top: calc(var(--spacing) * 1);
margin-bottom: calc(var(--spacing) * 1.5);
}
@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);
margin-bottom: calc(var(--spacing) * 3);
@ -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,28 +2943,71 @@ 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-txt {
max-width: var(--max-w-content);
}
@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: 1fr 1fr;
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);
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
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));
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 (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;
margin-bottom: calc(var(--spacing) * 4);

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

File diff suppressed because one or more lines are too long

17
assets/css/template/_investigation.scss
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;

73
assets/css/template/_investigation_content.scss
View file

@ -3,13 +3,8 @@
padding-top: calc(var(--spacing) * 4);
.section-content {
margin-bottom: calc(var(--spacing)*4);
}
.section-title-only{
margin-bottom: 0;
}
@ -74,9 +69,22 @@
}
.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;
@ -84,24 +92,69 @@
.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 #{$medium-up}{
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
}
}
}
.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);

3
site/snippets/header.php
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>

2
site/snippets/nav.php
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>