studio-variable/index-main
4
0
Fork 0
Code Issues 16 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); color: var(--color-txt);
background-color: var(--color-bg); background-color: var(--color-bg);
} }
img{ img{

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

@ -64,13 +64,9 @@
color: var(--color-txt-light); color: var(--color-txt-light);
flex-grow: 1; flex-grow: 1;
width: 100%; width: 100%;
white-space: nowrap; padding-top: 5px;
// overflow: hidden;
// text-overflow: ellipsis;
// align-items: center;
min-width: 0;
.type{ .type{
text-transform: uppercase; text-transform: uppercase;
@ -84,23 +80,39 @@
} }
.title{
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
} }
@media #{$small} { @media #{$small} {
display: flex; // display: flex;
align-items: center; // align-items: center;
justify-content: center; // justify-content: center;
.bottom-bar__inner{ .bottom-bar__inner{
height: calc(var(--header-h)*0.5); height: calc(var(--header-h)*0.75);
justify-content: center; justify-content: center;
align-items: 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;
}
}
} }

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

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

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

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

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

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

25
assets/css/partials/_page-header.scss
View file

@ -20,6 +20,14 @@
white-space: nowrap; white-space: nowrap;
text-transform: uppercase; 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); margin-bottom: calc(var(--spacing) * 2);
@media #{$small} { @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); line-height: var(--leading-title);
margin-top: calc(var(--spacing) * 1); margin-top: calc(var(--spacing) * 1);
margin-bottom: calc(var(--spacing) * 1.5); margin-bottom: calc(var(--spacing) * 1.5);
@media #{$small-up} {
text-wrap: balance; text-wrap: balance;
}
@media #{$small} {
margin-bottom: calc(var(--spacing) * 1);
}
} }
.description { .description {
font-size: var(--fs-text); 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;
// }
} }

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

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

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

@ -1,5 +1,7 @@
#site-header { #site-header {
z-index: var(--z-header); z-index: var(--z-header);
--gap: 3ch; --gap: 3ch;
@ -42,10 +44,12 @@
svg{ svg{
width: 100px; width: 100px;
@media #{$small}{
width: 80px;
}
} }
@media #{$small}{
svg{ width: 80px; }
top: -4px;
}
} }
@ -60,15 +64,39 @@
gap: var(--gap); gap: var(--gap);
list-style-type: none; list-style-type: none;
li{
white-space: nowrap;
}
} }
} }
#nav-highlight ul{ #nav-highlight ul{
font-weight: 500; font-weight: 500;
text-transform: uppercase; 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{ #nav-investigation{
position: absolute; position: absolute;
// transition: top var(--transition-scroll); // transition: top var(--transition-scroll);
@ -80,6 +108,41 @@
transition: top 0.3s ease; transition: top 0.3s ease;
pointer-events: none; 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{ li{
color: var(--color-txt-light); color: var(--color-txt-light);
transition: color 0.3s ease; 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; 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);
// }
// }
// }

332
assets/css/style.css
View file

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

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; margin-inline: auto;
max-width: var(--max-w-content); max-width: var(--max-w-content);
margin-bottom: 0px; margin-bottom: 0px;
.description{ .description{
margin-bottom: 0px; 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{ .investigation__content{
font-size: var(--fs-text); font-size: var(--fs-text);
} }
@ -74,6 +87,10 @@
margin-inline: auto; margin-inline: auto;
font-size: var(--fs-normal); font-size: var(--fs-normal);
@media #{$small} {
font-size: var(--fs-small);
}
.dl__group { .dl__group {
@include grid-content(); @include grid-content();
column-gap: 1ch; column-gap: 1ch;

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

@ -3,13 +3,8 @@
padding-top: calc(var(--spacing) * 4); padding-top: calc(var(--spacing) * 4);
.section-content {
margin-bottom: calc(var(--spacing)*4);
}
.section-title-only{ .section-title-only{
margin-bottom: 0; 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; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--padding-body); gap: var(--padding-body);
position: relative; position: relative;
.media{ .media{
margin-inline: auto; margin-inline: auto;
max-width: var(--max-w-content); max-width: var(--max-w-content);
padding-left: var(--padding-inner);
padding-right: var(--padding-inner); position: sticky;
position: sticky; top: calc(var(--header-h) + var(--spacing));
top: calc(var(--header-h) + var(--spacing)); align-self: start;
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 { @media #{$small}{
min-height: calc(100vh - var(--header-h));
max-width: var(--max-w-content); .section-content:not(.section-title-only) {
padding-left: var(--padding-inner); padding-bottom: calc(var(--spacing)*1);
padding-right: var(--padding-inner); margin-bottom: calc(var(--spacing)*2);
padding-bottom: calc(var(--spacing)*6); 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{ .subsection-w-hscroll{
position: relative; position: relative;
margin-bottom: calc(var(--spacing)*4); 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="/enquetes">Enquêtes</a></li>
<li><a href="/impacts">Impacts</a></li> <li><a href="/impacts">Impacts</a></li>
<li><a href="/laboratoire">Laboratoire</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> </ul>
</nav> </nav>
<nav id="nav-investigation"> <nav id="nav-investigation">
<!-- <p class="title"><?= $page->title()->esc() ?></p> -->
<ul> <ul>
<li class="is-selected"><a href="#investigation__hero">Vidéo</a></li> <li class="is-selected"><a href="#investigation__hero">Vidéo</a></li>
<li><a href="#investigation__content">Enquête</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> <nav>
<ul> <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="/enquetes">Enquêtes</a></li>
<li class="highlight"><a href="/impacts">Impact</a></li> <li class="highlight"><a href="/impacts">Impact</a></li>
<li><a href="/dossiers">Dossiers</a></li> <li><a href="/dossiers">Dossiers</a></li>