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

page investigations
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-06 17:14:32 +01:00
parent ea648498e2
commit 6cf52a6703
20 changed files with 556 additions and 278 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -54,4 +54,11 @@ img{
body, #site-header, #site-footer{ body, #site-header, #site-footer{
transition: background-color 0.3s ease, color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease;
}
@mixin grid-content(){
display: grid;
grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr;
position: relative;
} }

1
assets/css/base/_var.scss
View file

@ -18,6 +18,7 @@
--fs-button-bold: 22px; --fs-button-bold: 22px;
--max-w-content: 700px; --max-w-content: 700px;
--max-w-container: 1280px;
@media #{$small} { @media #{$small} {
--fs-medium: 20px; --fs-medium: 20px;

9
assets/css/components/_card-small.scss → assets/css/components/_card-article-small.scss
View file

@ -1,11 +1,10 @@
.card--small{ .card--article-small{
display: grid;
grid-gap: var(--padding-inner); @include grid-content();
grid-template-columns: 2fr 3fr;
margin-bottom: var(--spacing); margin-bottom: var(--spacing);
position: relative;
@include figure-16-9(); @include figure-16-9();

71
assets/css/components/_card-article.scss Normal file
View file

@ -0,0 +1,71 @@
.card--article{
border: var(--border-light);
position: relative;
display: flex;
flex-direction: column;
@include figure-16-9();
.content{
padding: var(--padding-inner);
display: flex;
flex-direction: column;
flex-grow: 2;
}
.title{
margin-top: calc(var(--spacing)*0.5);
font-size: var(--fs-medium);
font-weight: normal;
text-transform: uppercase;
flex-grow: 2;
a{ text-decoration: none;}
}
.description{
margin-top: calc(var(--spacing)*1);
font-size: var(--fs-small);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.dl{
margin-top: calc(var(--spacing)*0.5);
.dl__group{
@include grid-content();
border-top: var(--border-light);
padding: calc(var(--spacing)*0.5) 0;
}
dt{
color: var(--color-txt-light);
padding-right: 1ch;
}
ul:not(.keywords){
list-style: none;
li{
padding-bottom: 0.2em;
}
}
.dl__group__keywords{
padding-bottom: 0;
}
}
&:hover{
border-color: var(--color-txt);
}
}

8
assets/css/components/_card-impact.scss
View file

@ -1,7 +1,5 @@
.card--impact{ .card--impact{
display: grid; @include grid-content();
grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr;
padding: calc(var(--spacing)*0.5) 0; padding: calc(var(--spacing)*0.5) 0;
border-bottom: var(--border-light); border-bottom: var(--border-light);
&:first-of-type{ &:first-of-type{
@ -50,9 +48,7 @@
.open-graph__details{ .open-graph__details{
summary{ summary{
display: grid; @include grid-content();
grid-template-columns: 2fr 3fr;
grid-gap: var(--padding-inner);
.summary-inner{ .summary-inner{
grid-column: 2; grid-column: 2;

7
assets/css/components/_card-open-graph.scss
View file

@ -1,10 +1,7 @@
.card--open-graph{ .card--open-graph{
display: grid; @include grid-content();
grid-template-columns: 2fr 3fr;
grid-gap: var(--padding-inner);
border: var(--border-light); border: var(--border-light);
border-radius: var(--radius-small); border-radius: var(--radius-small);
position: relative; position: relative;

70
assets/css/components/_text.scss
View file

@ -1,68 +1,4 @@
[data-template="subscription-newsletter"], .title-page{
[data-template="thanks"], font-size: var(--fs-medium);
[data-template="support"],
[data-template="store"]{
.p__baseline-big{ }
font-family: var(--title);
font-size: var(--fs-big);
font-weight: var(--fw-bold);
line-height: 1.1;
text-align: center;
margin: calc(var(--spacing)*1) 0;
strong{
font-weight: var(--fw-bolf);
color: var(--color-accent);
}
.link-don{
display: block;
color: var(--color-accent);
text-decoration: none;
// &::after{
// content: ' ↗';
// font-size: 0.8em;
// }
&:hover{
text-decoration: underline 2px;
text-underline-offset: 4px;
}
}
}
.p__baseline{
font-size: var(--fs-medium);
font-weight: var(--fw-medium);
line-height: 1.1;
text-align: center;
margin: calc(var(--spacing)*1) 0;
@media #{$small}{
text-align: center;
margin: var(--spacing) 0;
}
}
.p__details{
font-size: var(--fs-small);
margin-bottom: 0.5em;
color: var(--grey-400);
}
.section__heading{
font-size: var(--fs-normal);
font-weight: var(--fw-medium);
line-height: 1;
text-align: center;
margin-top: calc(var(--spacing)*0.5);
margin-bottom: calc(var(--spacing)*1);
}
ul, ol{
margin-left: 3ch;
margin-bottom: 0.5em;
}
}

314
assets/css/style.css
View file

@ -10,6 +10,7 @@
--fs-xbig: 38px; --fs-xbig: 38px;
--fs-button-bold: 22px; --fs-button-bold: 22px;
--max-w-content: 700px; --max-w-content: 700px;
--max-w-container: 1280px;
--leading-tight: 1.05; --leading-tight: 1.05;
--leading-normal: 1.2; --leading-normal: 1.2;
--fw-normal: 400; --fw-normal: 400;
@ -679,154 +680,148 @@ button:disabled {
background-color: var(--color-accent); background-color: var(--color-accent);
} }
[data-template=subscription-newsletter] .p__baseline-big, .title-page {
[data-template=thanks] .p__baseline-big,
[data-template=support] .p__baseline-big,
[data-template=store] .p__baseline-big {
font-family: var(--title);
font-size: var(--fs-big);
font-weight: var(--fw-bold);
line-height: 1.1;
text-align: center;
margin: calc(var(--spacing) * 1) 0;
}
[data-template=subscription-newsletter] .p__baseline-big strong,
[data-template=thanks] .p__baseline-big strong,
[data-template=support] .p__baseline-big strong,
[data-template=store] .p__baseline-big strong {
font-weight: var(--fw-bolf);
color: var(--color-accent);
}
[data-template=subscription-newsletter] .p__baseline-big .link-don,
[data-template=thanks] .p__baseline-big .link-don,
[data-template=support] .p__baseline-big .link-don,
[data-template=store] .p__baseline-big .link-don {
display: block;
color: var(--color-accent);
text-decoration: none;
}
[data-template=subscription-newsletter] .p__baseline-big .link-don:hover,
[data-template=thanks] .p__baseline-big .link-don:hover,
[data-template=support] .p__baseline-big .link-don:hover,
[data-template=store] .p__baseline-big .link-don:hover {
-webkit-text-decoration: underline 2px;
text-decoration: underline 2px;
text-underline-offset: 4px;
}
[data-template=subscription-newsletter] .p__baseline,
[data-template=thanks] .p__baseline,
[data-template=support] .p__baseline,
[data-template=store] .p__baseline {
font-size: var(--fs-medium); font-size: var(--fs-medium);
font-weight: var(--fw-medium);
line-height: 1.1;
text-align: center;
margin: calc(var(--spacing) * 1) 0;
}
@media screen and (max-width: 768px) {
[data-template=subscription-newsletter] .p__baseline,
[data-template=thanks] .p__baseline,
[data-template=support] .p__baseline,
[data-template=store] .p__baseline {
text-align: center;
margin: var(--spacing) 0;
}
}
[data-template=subscription-newsletter] .p__details,
[data-template=thanks] .p__details,
[data-template=support] .p__details,
[data-template=store] .p__details {
font-size: var(--fs-small);
margin-bottom: 0.5em;
color: var(--grey-400);
}
[data-template=subscription-newsletter] .section__heading,
[data-template=thanks] .section__heading,
[data-template=support] .section__heading,
[data-template=store] .section__heading {
font-size: var(--fs-normal);
font-weight: var(--fw-medium);
line-height: 1;
text-align: center;
margin-top: calc(var(--spacing) * 0.5);
margin-bottom: calc(var(--spacing) * 1);
}
[data-template=subscription-newsletter] ul, [data-template=subscription-newsletter] ol,
[data-template=thanks] ul,
[data-template=thanks] ol,
[data-template=support] ul,
[data-template=support] ol,
[data-template=store] ul,
[data-template=store] ol {
margin-left: 3ch;
margin-bottom: 0.5em;
} }
.card--small { .card--article {
display: grid; border: var(--border-light);
grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr;
margin-bottom: var(--spacing);
position: relative; position: relative;
display: flex;
flex-direction: column;
} }
.card--small figure { .card--article figure {
aspect-ratio: 16/9; aspect-ratio: 16/9;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
} }
.card--small figure img { .card--article figure img {
width: 100%; width: 100%;
height: 100%; height: 100%;
-o-object-fit: cover; -o-object-fit: cover;
object-fit: cover; object-fit: cover;
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s; transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
} }
.card--small:hover figure img { .card--article:hover figure img {
transform: scale(1.05); transform: scale(1.05);
} }
.card--small .content { .card--article .content {
padding: var(--padding-inner);
display: flex;
flex-direction: column;
flex-grow: 2;
}
.card--article .title {
margin-top: calc(var(--spacing) * 0.5);
font-size: var(--fs-medium);
font-weight: normal;
text-transform: uppercase;
flex-grow: 2;
}
.card--article .title a {
text-decoration: none;
}
.card--article .description {
margin-top: calc(var(--spacing) * 1);
font-size: var(--fs-small);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card--article .dl {
margin-top: calc(var(--spacing) * 0.5);
}
.card--article .dl .dl__group {
display: grid;
grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr;
position: relative;
border-top: var(--border-light);
padding: calc(var(--spacing) * 0.5) 0;
}
.card--article .dl dt {
color: var(--color-txt-light);
padding-right: 1ch;
}
.card--article .dl ul:not(.keywords) {
list-style: none;
}
.card--article .dl ul:not(.keywords) li {
padding-bottom: 0.2em;
}
.card--article .dl .dl__group__keywords {
padding-bottom: 0;
}
.card--article:hover {
border-color: var(--color-txt);
}
.card--article-small {
display: grid;
grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr;
position: relative;
margin-bottom: var(--spacing);
}
.card--article-small figure {
aspect-ratio: 16/9;
display: flex;
overflow: hidden;
}
.card--article-small figure img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
}
.card--article-small:hover figure img {
transform: scale(1.05);
}
.card--article-small .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-top: calc(var(--spacing) * 0.25); padding-top: calc(var(--spacing) * 0.25);
} }
.card--small .title { .card--article-small .title {
font-weight: normal; font-weight: normal;
font-size: var(--fs-medium); font-size: var(--fs-medium);
margin-bottom: 0.25em; margin-bottom: 0.25em;
} }
.card--small .title a { .card--article-small .title a {
text-decoration: none; text-decoration: none;
} }
.card--small time { .card--article-small time {
flex-grow: 1; flex-grow: 1;
color: var(--color-txt-light); color: var(--color-txt-light);
} }
.card--small .keywords { .card--article-small .keywords {
margin-top: 1.5em; margin-top: 1.5em;
padding-bottom: calc(var(--spacing) * 0.25); padding-bottom: calc(var(--spacing) * 0.25);
color: var(--color-txt-light); color: var(--color-txt-light);
} }
.card--small:hover .title { .card--article-small:hover .title {
text-decoration: underline; text-decoration: underline;
} }
@media screen and (max-width: 1080px) { @media screen and (max-width: 1080px) {
.card--small .title { .card--article-small .title {
font-size: var(--fs-normal); font-size: var(--fs-normal);
margin-bottom: 0; margin-bottom: 0;
} }
} }
@media screen and (max-width: 560px) { @media screen and (max-width: 560px) {
.card--small .content { .card--article-small .content {
padding: 0; padding: 0;
} }
.card--small .title { .card--article-small .title {
margin-bottom: 0; margin-bottom: 0;
} }
.card--small time { .card--article-small time {
font-size: var(--fs-small); font-size: var(--fs-small);
margin-top: 0.25em; margin-top: 0.25em;
} }
.card--small .keywords { .card--article-small .keywords {
margin-top: 0.5em; margin-top: 0.5em;
padding-bottom: 0; padding-bottom: 0;
} }
@ -836,6 +831,7 @@ button:disabled {
display: grid; display: grid;
grid-gap: var(--padding-inner); grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr; grid-template-columns: 2fr 3fr;
position: relative;
padding: calc(var(--spacing) * 0.5) 0; padding: calc(var(--spacing) * 0.5) 0;
border-bottom: var(--border-light); border-bottom: var(--border-light);
} }
@ -901,8 +897,9 @@ button:disabled {
} }
.card--impact .open-graph__details summary { .card--impact .open-graph__details summary {
display: grid; display: grid;
grid-template-columns: 2fr 3fr;
grid-gap: var(--padding-inner); grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr;
position: relative;
} }
.card--impact .open-graph__details summary .summary-inner { .card--impact .open-graph__details summary .summary-inner {
grid-column: 2; grid-column: 2;
@ -922,8 +919,9 @@ button:disabled {
.card--open-graph { .card--open-graph {
display: grid; display: grid;
grid-template-columns: 2fr 3fr;
grid-gap: var(--padding-inner); grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr;
position: relative;
border: var(--border-light); border: var(--border-light);
border-radius: var(--radius-small); border-radius: var(--radius-small);
position: relative; position: relative;
@ -1306,89 +1304,101 @@ body main {
padding: 0 var(--padding-body); padding: 0 var(--padding-body);
} }
.page-enquete { [data-template=investigations] main #container-cards {
max-width: var(--max-w-container);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
grid-auto-rows: minmax(100px, auto);
grid-gap: var(--padding-body);
margin-bottom: 10vh;
}
[data-template=investigation-summary] main {
position: relative; position: relative;
} }
.page-enquete header .page-type { [data-template=investigation-summary] main header .page-type {
text-transform: uppercase; text-transform: uppercase;
color: var(--color-txt-light); color: var(--color-txt-light);
margin-bottom: calc(var(--spacing) * 0.5); margin-bottom: calc(var(--spacing) * 0.5);
} }
.page-enquete header h2 { [data-template=investigation-summary] main header h2 {
font-size: var(--fs-xbig); font-size: var(--fs-xbig);
line-height: var(--leading-tight); line-height: var(--leading-tight);
} }
.page-enquete .section__article a:hover { [data-template=investigation-summary] main .section__article a:hover {
color: var(--grey-200); color: var(--grey-200);
} }
.page-enquete .section__article .section__title { [data-template=investigation-summary] main .section__article .section__title {
font-weight: normal; font-weight: normal;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: calc(var(--spacing) * 0.5); margin-bottom: calc(var(--spacing) * 0.5);
} }
.page-enquete #hero { [data-template=investigation-summary] main #hero {
width: 100vw; width: 100vw;
position: relative; position: relative;
left: calc(var(--padding-body) * -1); left: calc(var(--padding-body) * -1);
} }
.page-enquete #hero figcaption { [data-template=investigation-summary] main #hero figcaption {
color: var(--color-txt-light); color: var(--color-txt-light);
font-size: var(--fs-small); font-size: var(--fs-small);
padding-top: calc(var(--spacing) * 0.5); padding-top: calc(var(--spacing) * 0.5);
} }
@media screen and (max-width: 560px) { @media screen and (max-width: 560px) {
.page-enquete #hero figcaption { [data-template=investigation-summary] main #hero figcaption {
font-size: var(--fs-xsmall); font-size: var(--fs-xsmall);
} }
} }
.page-enquete #hero.hero-video figure { [data-template=investigation-summary] main #hero.hero-video figure {
width: 100%; width: 100%;
} }
.page-enquete #hero.hero-video figure img { [data-template=investigation-summary] main #hero.hero-video figure img {
width: 100%; width: 100%;
aspect-ratio: 16/9; aspect-ratio: 16/9;
-o-object-fit: cover; -o-object-fit: cover;
object-fit: cover; object-fit: cover;
} }
.page-enquete #nav--page ul { [data-template=investigation-summary] main #nav--page ul {
list-style: none; list-style: none;
} }
.page-enquete #nav--page ul li { [data-template=investigation-summary] main #nav--page ul li {
text-align: center; text-align: center;
color: var(--color-txt-light); color: var(--color-txt-light);
} }
.page-enquete #nav--page ul li a { [data-template=investigation-summary] main #nav--page ul li a {
display: block; display: block;
padding: 0.3em 0; padding: 0.3em 0;
text-decoration: none; text-decoration: none;
} }
.page-enquete #section__short { [data-template=investigation-summary] main #section__short {
font-size: var(--fs-medium); font-size: var(--fs-medium);
} }
.page-enquete #section__dl { [data-template=investigation-summary] main #section__dl {
margin-top: calc(var(--spacing) * 1.5); margin-top: calc(var(--spacing) * 1.5);
border-bottom: var(--border-light); border-bottom: var(--border-light);
} }
.page-enquete #section__dl .dl__group { [data-template=investigation-summary] main #section__dl .dl__group {
display: grid; display: grid;
grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr; grid-template-columns: 2fr 3fr;
position: relative;
border-top: var(--border-light); border-top: var(--border-light);
padding: calc(var(--spacing) * 0.5) 0; padding: calc(var(--spacing) * 0.5) 0;
} }
.page-enquete #section__dl dt { [data-template=investigation-summary] main #section__dl dt {
color: var(--color-txt-light); color: var(--color-txt-light);
padding-right: 1ch; padding-right: 1ch;
} }
.page-enquete #section__dl ul:not(.keywords) { [data-template=investigation-summary] main #section__dl ul:not(.keywords) {
list-style: none; list-style: none;
} }
.page-enquete #section__dl ul:not(.keywords) li { [data-template=investigation-summary] main #section__dl ul:not(.keywords) li {
padding-bottom: 0.2em; padding-bottom: 0.2em;
} }
.page-enquete #section__synthese p + p { [data-template=investigation-summary] main #section__synthese p + p {
margin-top: 0.5em; margin-top: 0.5em;
} }
.page-enquete #section__synthese h4 { [data-template=investigation-summary] main #section__synthese h4 {
margin-top: 2em; margin-top: 2em;
margin-bottom: 1em; margin-bottom: 1em;
font-size: var(--fs-normal); font-size: var(--fs-normal);
@ -1414,30 +1424,30 @@ body main {
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.page-enquete header { [data-template=investigation-summary] main header {
padding-top: calc(var(--spacing) * 1.5); padding-top: calc(var(--spacing) * 1.5);
} }
.page-enquete header .page-type { [data-template=investigation-summary] main header .page-type {
font-size: var(--fs-small); font-size: var(--fs-small);
} }
.page-enquete .section__article { [data-template=investigation-summary] main .section__article {
margin: calc(var(--spacing) * 1.5) 0; margin: calc(var(--spacing) * 1.5) 0;
} }
.page-enquete #section__impacts, .page-enquete #section__en-lien { [data-template=investigation-summary] main #section__impacts, [data-template=investigation-summary] main #section__en-lien {
margin-top: 0px; margin-top: 0px;
} }
.page-enquete #hero { [data-template=investigation-summary] main #hero {
margin: calc(var(--spacing) * 1.5) 0; margin: calc(var(--spacing) * 1.5) 0;
} }
.page-enquete #hero figcaption { [data-template=investigation-summary] main #hero figcaption {
margin: 0 var(--padding-body); margin: 0 var(--padding-body);
} }
.page-enquete .modal--share { [data-template=investigation-summary] main .modal--share {
position: absolute; position: absolute;
width: calc(100% - var(--padding-body) * 2); width: calc(100% - var(--padding-body) * 2);
bottom: calc(var(--spacing) * 2); bottom: calc(var(--spacing) * 2);
} }
.page-enquete #banner--page { [data-template=investigation-summary] main #banner--page {
padding: calc(var(--spacing) * 0.5) 0; padding: calc(var(--spacing) * 0.5) 0;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
@ -1449,31 +1459,31 @@ body main {
background: linear-gradient(0deg, var(--color-bg) 0%, var(--color-bg) 64%, transparent 100%); background: linear-gradient(0deg, var(--color-bg) 0%, var(--color-bg) 64%, transparent 100%);
z-index: 800; z-index: 800;
} }
.page-enquete #banner--page #nav--page { [data-template=investigation-summary] main #banner--page #nav--page {
display: none; display: none;
} }
.page-enquete #banner--page .btn--group { [data-template=investigation-summary] main #banner--page .btn--group {
display: flex; display: flex;
gap: calc(var(--spacing) * 0.25); gap: calc(var(--spacing) * 0.25);
position: relative; position: relative;
} }
.page-enquete #banner--page .btn--group > button, [data-template=investigation-summary] main #banner--page .btn--group > button,
.page-enquete #banner--page .btn--group > label { [data-template=investigation-summary] main #banner--page .btn--group > label {
width: 50%; width: 50%;
cursor: pointer; cursor: pointer;
} }
.page-enquete #banner--page { [data-template=investigation-summary] main #banner--page {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in;
} }
.page-enquete #banner--page.is-visible { [data-template=investigation-summary] main #banner--page.is-visible {
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
} }
} }
@media screen and (max-width: 560px) { @media screen and (max-width: 560px) {
.page-enquete #section__dl .dl__group { [data-template=investigation-summary] main #section__dl .dl__group {
-moz-column-gap: 1ch; -moz-column-gap: 1ch;
column-gap: 1ch; column-gap: 1ch;
font-size: var(--fs-small); font-size: var(--fs-small);
@ -1481,7 +1491,7 @@ body main {
} }
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.page-enquete #banner--page { [data-template=investigation-summary] main #banner--page {
height: calc(100vh - var(--header-h)); height: calc(100vh - var(--header-h));
height: calc(100dvh - var(--header-h)); height: calc(100dvh - var(--header-h));
margin-bottom: calc((100vh - var(--header-h)) * -1); margin-bottom: calc((100vh - var(--header-h)) * -1);
@ -1495,38 +1505,38 @@ body main {
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
} }
.page-enquete #banner--page .btn--group { [data-template=investigation-summary] main #banner--page .btn--group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: calc(var(--spacing) * 0.25); gap: calc(var(--spacing) * 0.25);
} }
.page-enquete #banner--page .btn--group > button, [data-template=investigation-summary] main #banner--page .btn--group > button,
.page-enquete #banner--page .btn--group > label { [data-template=investigation-summary] main #banner--page .btn--group > label {
width: 100%; width: 100%;
max-width: 160px; max-width: 160px;
cursor: pointer; cursor: pointer;
} }
.page-enquete #hero { [data-template=investigation-summary] main #hero {
margin: calc(var(--spacing) * 3) 0; margin: calc(var(--spacing) * 3) 0;
} }
.page-enquete .section__article { [data-template=investigation-summary] main .section__article {
margin-left: var(--banner-medium); margin-left: var(--banner-medium);
margin-top: calc(var(--spacing) * 3); margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 3);
} }
.page-enquete #section__short { [data-template=investigation-summary] main #section__short {
margin-top: var(--padding-body); margin-top: var(--padding-body);
} }
.page-enquete header { [data-template=investigation-summary] main header {
max-width: var(--max-w-content); max-width: var(--max-w-content);
margin: calc(var(--spacing) * 2) auto; margin: calc(var(--spacing) * 2) auto;
} }
.page-enquete .section__article .section__title { [data-template=investigation-summary] main .section__article .section__title {
font-size: var(--fs-medium); font-size: var(--fs-medium);
margin-bottom: var(--spacing); margin-bottom: var(--spacing);
} }
.page-enquete #section__synthese { [data-template=investigation-summary] main #section__synthese {
font-size: var(--fs-medium); font-size: var(--fs-medium);
} }
.modal--share { .modal--share {
@ -1536,21 +1546,21 @@ body main {
} }
} }
@media screen and (min-width: 1080px) { @media screen and (min-width: 1080px) {
.page-enquete #banner--page { [data-template=investigation-summary] main #banner--page {
width: calc((100% - var(--max-w-content)) / 2); width: calc((100% - var(--max-w-content)) / 2);
} }
.page-enquete #hero { [data-template=investigation-summary] main #hero {
margin: calc(var(--spacing) * 3) 0; margin: calc(var(--spacing) * 3) 0;
} }
.page-enquete #hero figcaption { [data-template=investigation-summary] main #hero figcaption {
max-width: var(--max-w-content); max-width: var(--max-w-content);
margin: 0 auto; margin: 0 auto;
} }
.page-enquete header { [data-template=investigation-summary] main header {
max-width: var(--max-w-content); max-width: var(--max-w-content);
margin: calc(var(--spacing) * 2) auto; margin: calc(var(--spacing) * 2) auto;
} }
.page-enquete .section__article { [data-template=investigation-summary] main .section__article {
max-width: var(--max-w-content); max-width: var(--max-w-content);
margin: calc(var(--spacing) * 3) auto; margin: calc(var(--spacing) * 3) auto;
} }

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

File diff suppressed because one or more lines are too long

6
assets/css/style.scss
View file

@ -17,7 +17,8 @@
@import 'components/list-socials'; @import 'components/list-socials';
@import 'components/modal-share'; @import 'components/modal-share';
@import 'components/text'; @import 'components/text';
@import 'components/card-small'; @import 'components/card-article';
@import 'components/card-article-small';
@import 'components/card-impact'; @import 'components/card-impact';
@import 'components/card-open-graph'; @import 'components/card-open-graph';
@ -28,6 +29,7 @@
@import 'partials/main-layout'; @import 'partials/main-layout';
@import 'template/page-enquete'; @import 'template/investigations';
@import 'template/investigation-summary';

28
assets/css/template/_page-enquete.scss → assets/css/template/_investigation-summary.scss
View file

@ -1,5 +1,8 @@
.page-enquete{ [data-template="investigation-summary"] main{
position: relative;
position: relative;
header{ header{
.page-type{ .page-type{
@ -77,8 +80,7 @@
border-bottom: var(--border-light); border-bottom: var(--border-light);
.dl__group{ .dl__group{
display: grid; @include grid-content();
grid-template-columns: 2fr 3fr;
border-top: var(--border-light); border-top: var(--border-light);
padding: calc(var(--spacing)*0.5) 0; padding: calc(var(--spacing)*0.5) 0;
} }
@ -137,16 +139,6 @@
} }
// .page-enquete{
// #banner--page.is-sticky {
// position: fixed;
// bottom: 0;
// left: 0;
// right: 0;
// z-index: 100;
// }
// }
@ -157,7 +149,7 @@
@media #{$small}{ @media #{$small}{
.page-enquete{ [data-template="investigation-summary"] main{
header{ header{
padding-top: calc(var(--spacing)*1.5); padding-top: calc(var(--spacing)*1.5);
@ -243,7 +235,7 @@
@media #{$x-small}{ @media #{$x-small}{
.page-enquete{ [data-template="investigation-summary"] main{
#section__dl .dl__group{ #section__dl .dl__group{
column-gap: 1ch; column-gap: 1ch;
@ -263,7 +255,7 @@
@media #{$small-up}{ @media #{$small-up}{
.page-enquete{ [data-template="investigation-summary"] main{
#banner--page{ #banner--page{
height: calc(100vh - var(--header-h)); height: calc(100vh - var(--header-h));
@ -338,7 +330,7 @@
@media #{$medium-up}{ @media #{$medium-up}{
.page-enquete{ [data-template="investigation-summary"] main{
#banner--page{ #banner--page{
width: calc((100% - var(--max-w-content))/2); width: calc((100% - var(--max-w-content))/2);

17
assets/css/template/_investigations.scss Normal file
View file

@ -0,0 +1,17 @@
[data-template="investigations"] main{
#container-cards{
max-width: var(--max-w-container);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
grid-auto-rows: minmax(100px, auto);
grid-gap: var(--padding-body);
margin-bottom: 10vh;
}
}

6
assets/js/banner-sticky-desktop.js
View file

@ -3,10 +3,10 @@ let isInitialized = false;
export function bannerStickyDesktop(responsiveSmall) { export function bannerStickyDesktop(responsiveSmall) {
if (isInitialized) return; if (isInitialized) return;
let main = document.querySelector("main"); let body = document.body;
if (!main || !main.classList.contains("page-enquete")) return; if (!body || body.dataset.template !== 'investigation-summary') return;
let bannerPage = main.querySelector("#banner--page"); let bannerPage = body.querySelector("#banner--page");
let sectionDl = document.querySelector("#section__dl"); let sectionDl = document.querySelector("#section__dl");
let footer = document.querySelector("#site-footer"); let footer = document.querySelector("#site-footer");

6
assets/js/banner-sticky-mobile.js
View file

@ -3,10 +3,10 @@ let isInitialized = false;
export function bannerStickyMobile(responsiveSmall) { export function bannerStickyMobile(responsiveSmall) {
if (isInitialized) return; if (isInitialized) return;
let main = document.querySelector("main"); let body = document.body;
if (!main || !main.classList.contains("page-enquete")) return; if (!body || body.dataset.template !== 'investigation-summary') return;
let bannerPage = main.querySelector("#banner--page"); let bannerPage = body.querySelector("#banner--page");
let sectionDl = document.querySelector("#section__dl"); let sectionDl = document.querySelector("#section__dl");
let footer = document.querySelector("#site-footer"); let footer = document.querySelector("#site-footer");

1
site/snippets/footer.php
View file

@ -1,3 +1,4 @@
</main>
<footer id="site-footer"> <footer id="site-footer">
<div class="site-footer__container"> <div class="site-footer__container">
<div class="footer__newsletter"> <div class="footer__newsletter">

2
site/snippets/header.php
View file

@ -59,3 +59,5 @@
</button> </button>
</div> </div>
</header> </header>
<?php snippet('nav') ?>
<main>

2
site/snippets/modal-share.php
View file

@ -40,7 +40,7 @@
<div class="copy-link"> <div class="copy-link">
<div class="copy-link__field"> <div class="copy-link__field">
<span class="icon"><?= svg('assets/icons/link.svg') ?></span> <span class="icon"><?= svg('assets/icons/link.svg') ?></span>
<input type="text" readonly="" value="http://127.0.0.1:5500/page-enquete"> <input type="text" readonly="" value="http://localhost:8000/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse">
</div> </div>
<button class="copy-link__btn">Copier</button> <button class="copy-link__btn">Copier</button>
</div> </div>

24
site/templates/investigation-summary.php
View file

@ -1,7 +1,6 @@
<?php snippet('header') ?> <?php snippet('header') ?>
<?php snippet('nav') ?>
<main class="page-enquete">
<header> <header>
<p class="page-type">Enquête</p> <p class="page-type">Enquête</p>
<h2>L’exécution de Nidal et Khaled ‘Amirah à Naplouse</h2> <h2>L’exécution de Nidal et Khaled ‘Amirah à Naplouse</h2>
@ -160,12 +159,12 @@
<aside class="section__article" id="section__en-lien"> <aside class="section__article" id="section__en-lien">
<h3 class="section__title">En lien</h3> <h3 class="section__title">En lien</h3>
<article class="card--small"> <article class="card--article-small">
<figure> <figure>
<img src="/assets/images/Nahel-visuel1.png"> <img src="/assets/images/Nahel-visuel1.png">
</figure> </figure>
<div class="content"> <div class="content">
<h4 class="title"><a href="/page-enquete" target="_blank">L’homicide de Nahel Merzouk</a></h4> <h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">L’homicide de Nahel Merzouk</a></h4>
<time datetime="2024-06-27">27 Jun 2024</time> <time datetime="2024-06-27">27 Jun 2024</time>
<ul class="keywords"> <ul class="keywords">
<li><a href="#" target="_blank">Occupation</a></li> <li><a href="#" target="_blank">Occupation</a></li>
@ -174,15 +173,15 @@
<li><a href="#" target="_blank">Colonialité</a></li> <li><a href="#" target="_blank">Colonialité</a></li>
</ul> </ul>
</div> </div>
<a class="link-block" href="/page-enquete" target="_blank"></a> <a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
</article> </article>
<article class="card--small"> <article class="card--article-small">
<figure> <figure>
<img src="/assets/images/Jumaa-visuel-1.png"> <img src="/assets/images/Jumaa-visuel-1.png">
</figure> </figure>
<div class="content"> <div class="content">
<h4 class="title"><a href="/page-enquete" target="_blank">La mort par noyade de Jumaa al-Hasan</a></h4> <h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">La mort par noyade de Jumaa al-Hasan</a></h4>
<time datetime="2024-06-27">27 Jun 2024</time> <time datetime="2024-06-27">27 Jun 2024</time>
<ul class="keywords"> <ul class="keywords">
<li><a href="#" target="_blank">Occupation</a></li> <li><a href="#" target="_blank">Occupation</a></li>
@ -191,15 +190,15 @@
<li><a href="#" target="_blank">Colonialité</a></li> <li><a href="#" target="_blank">Colonialité</a></li>
</ul> </ul>
</div> </div>
<a class="link-block" href="/page-enquete" target="_blank"></a> <a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
</article> </article>
<article class="card--small"> <article class="card--article-small">
<figure> <figure>
<img src="/assets/images/kanaky-visuel-1.png"> <img src="/assets/images/kanaky-visuel-1.png">
</figure> </figure>
<div class="content"> <div class="content">
<h4 class="title"><a href="/page-enquete" target="_blank">Trois morts a Saint-Louis, Kanaky/Nouvelle-Caledonie</a></h4> <h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">Trois morts a Saint-Louis, Kanaky/Nouvelle-Caledonie</a></h4>
<time datetime="2024-06-27">27 Jun 2024</time> <time datetime="2024-06-27">27 Jun 2024</time>
<ul class="keywords"> <ul class="keywords">
<li><a href="#" target="_blank">Occupation</a></li> <li><a href="#" target="_blank">Occupation</a></li>
@ -208,7 +207,7 @@
<li><a href="#" target="_blank">Colonialité</a></li> <li><a href="#" target="_blank">Colonialité</a></li>
</ul> </ul>
</div> </div>
<a class="link-block" href="/page-enquete" target="_blank"></a> <a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
</article> </article>
</aside> </aside>
@ -221,8 +220,5 @@
</main>
<?php snippet('footer') ?> <?php snippet('footer') ?>

6
site/templates/investigation.php
View file

@ -1,4 +1,8 @@
<?php snippet('header') ?> <?php snippet('header') ?>
<?php snippet('nav') ?>
<main>
<h1>coucou</h1> <h1>coucou</h1>
<main>
<?php snippet('footer') ?> <?php snippet('footer') ?>

247
site/templates/investigations.php
View file

@ -1,2 +1,249 @@
<?php snippet('header') ?> <?php snippet('header') ?>
<h2 class="title-page">Enquêtes</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nam, ad officiis vitae, architecto incidunt cum optio beatae ab sequi sapiente vero eum molestias odio perspiciatis quisquam accusantium earum repudiandae.
</p>
<section id="container-cards">
<article class="card--article">
<figure>
<img src="/assets/images/Jumaa-visuel-1.png">
</figure>
<div class="content">
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">L’exécution de Nidal et Khaled ‘Amirah à Naplouse</a></h4>
<p class="description">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
<dl class="dl">
<div class="dl__group">
<dt>Date de l’incident</dt>
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
</div>
<div class="dl__group">
<dt>Partenaire(s)</dt>
<dd>B’Tselem</dd>
</div>
<div class="dl__group dl__group__keywords">
<dt>Mots-clés</dt>
<dd>
<ul class="keywords">
<li><a href="#" target="_blank">Occupation</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
<li><a href="#" target="_blank">Forces armées</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
</ul>
</dd>
</div>
</dl>
</div>
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
</article>
<article class="card--article">
<figure>
<img src="/assets/images/Nahel-visuel1.png">
</figure>
<div class="content">
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">L’homicide de Nahel Merzouk</a></h4>
<p class="description">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
<dl class="dl">
<div class="dl__group">
<dt>Date de l’incident</dt>
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
</div>
<div class="dl__group">
<dt>Partenaire(s)</dt>
<dd>B’Tselem</dd>
</div>
<div class="dl__group dl__group__keywords">
<dt>Mots-clés</dt>
<dd>
<ul class="keywords">
<li><a href="#" target="_blank">Occupation</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
<li><a href="#" target="_blank">Forces armées</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
</ul>
</dd>
</div>
</dl>
</div>
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
</article>
<article class="card--article">
<figure>
<img src="/assets/images/Jumaa-visuel-1.png">
</figure>
<div class="content">
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">L’exécution de Nidal et Khaled ‘Amirah à Naplouse</a></h4>
<p class="description">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
<dl class="dl">
<div class="dl__group">
<dt>Date de l’incident</dt>
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
</div>
<div class="dl__group">
<dt>Partenaire(s)</dt>
<dd>B’Tselem</dd>
</div>
<div class="dl__group dl__group__keywords">
<dt>Mots-clés</dt>
<dd>
<ul class="keywords">
<li><a href="#" target="_blank">Occupation</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
<li><a href="#" target="_blank">Forces armées</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
</ul>
</dd>
</div>
</dl>
</div>
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
</article>
<article class="card--article">
<figure>
<img src="/assets/images/Nahel-visuel1.png">
</figure>
<div class="content">
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">L’homicide de Nahel Merzouk</a></h4>
<p class="description">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
<dl class="dl">
<div class="dl__group">
<dt>Date de l’incident</dt>
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
</div>
<div class="dl__group">
<dt>Partenaire(s)</dt>
<dd>B’Tselem</dd>
</div>
<div class="dl__group dl__group__keywords">
<dt>Mots-clés</dt>
<dd>
<ul class="keywords">
<li><a href="#" target="_blank">Occupation</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
<li><a href="#" target="_blank">Forces armées</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
</ul>
</dd>
</div>
</dl>
</div>
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
</article>
<article class="card--article">
<figure>
<img src="/assets/images/Jumaa-visuel-1.png">
</figure>
<div class="content">
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">L’exécution de Nidal et Khaled ‘Amirah à Naplouse</a></h4>
<p class="description">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
<dl class="dl">
<div class="dl__group">
<dt>Date de l’incident</dt>
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
</div>
<div class="dl__group">
<dt>Partenaire(s)</dt>
<dd>B’Tselem</dd>
</div>
<div class="dl__group dl__group__keywords">
<dt>Mots-clés</dt>
<dd>
<ul class="keywords">
<li><a href="#" target="_blank">Occupation</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
<li><a href="#" target="_blank">Forces armées</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
</ul>
</dd>
</div>
</dl>
</div>
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
</article>
<article class="card--article">
<figure>
<img src="/assets/images/Nahel-visuel1.png">
</figure>
<div class="content">
<h4 class="title"><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank">L’homicide de Nahel Merzouk</a></h4>
<p class="description">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
<dl class="dl">
<div class="dl__group">
<dt>Date de l’incident</dt>
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
</div>
<div class="dl__group">
<dt>Partenaire(s)</dt>
<dd>B’Tselem</dd>
</div>
<div class="dl__group dl__group__keywords">
<dt>Mots-clés</dt>
<dd>
<ul class="keywords">
<li><a href="#" target="_blank">Occupation</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
<li><a href="#" target="_blank">Forces armées</a></li>
<li><a href="#" target="_blank">Colonialité</a></li>
</ul>
</dd>
</div>
</dl>
</div>
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse" target="_blank"></a>
</article>
</section>
<?php snippet('footer') ?> <?php snippet('footer') ?>