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{
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;
--max-w-content: 700px;
--max-w-container: 1280px;
@media #{$small} {
--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{
display: grid;
grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr;
.card--article-small{
@include grid-content();
margin-bottom: var(--spacing);
position: relative;
@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{
display: grid;
grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr;
@include grid-content();
padding: calc(var(--spacing)*0.5) 0;
border-bottom: var(--border-light);
&:first-of-type{
@ -50,9 +48,7 @@
.open-graph__details{
summary{
display: grid;
grid-template-columns: 2fr 3fr;
grid-gap: var(--padding-inner);
@include grid-content();
.summary-inner{
grid-column: 2;

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

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

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

@ -1,68 +1,4 @@
[data-template="subscription-newsletter"],
[data-template="thanks"],
[data-template="support"],
[data-template="store"]{
.title-page{
font-size: var(--fs-medium);
.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-button-bold: 22px;
--max-w-content: 700px;
--max-w-container: 1280px;
--leading-tight: 1.05;
--leading-normal: 1.2;
--fw-normal: 400;
@ -679,154 +680,148 @@ button:disabled {
background-color: var(--color-accent);
}
[data-template=subscription-newsletter] .p__baseline-big,
[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 {
.title-page {
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 {
display: grid;
grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr;
margin-bottom: var(--spacing);
.card--article {
border: var(--border-light);
position: relative;
display: flex;
flex-direction: column;
}
.card--small figure {
.card--article figure {
aspect-ratio: 16/9;
display: flex;
overflow: hidden;
}
.card--small figure img {
.card--article 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--small:hover figure img {
.card--article:hover figure img {
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;
flex-direction: column;
padding-top: calc(var(--spacing) * 0.25);
}
.card--small .title {
.card--article-small .title {
font-weight: normal;
font-size: var(--fs-medium);
margin-bottom: 0.25em;
}
.card--small .title a {
.card--article-small .title a {
text-decoration: none;
}
.card--small time {
.card--article-small time {
flex-grow: 1;
color: var(--color-txt-light);
}
.card--small .keywords {
.card--article-small .keywords {
margin-top: 1.5em;
padding-bottom: calc(var(--spacing) * 0.25);
color: var(--color-txt-light);
}
.card--small:hover .title {
.card--article-small:hover .title {
text-decoration: underline;
}
@media screen and (max-width: 1080px) {
.card--small .title {
.card--article-small .title {
font-size: var(--fs-normal);
margin-bottom: 0;
}
}
@media screen and (max-width: 560px) {
.card--small .content {
.card--article-small .content {
padding: 0;
}
.card--small .title {
.card--article-small .title {
margin-bottom: 0;
}
.card--small time {
.card--article-small time {
font-size: var(--fs-small);
margin-top: 0.25em;
}
.card--small .keywords {
.card--article-small .keywords {
margin-top: 0.5em;
padding-bottom: 0;
}
@ -836,6 +831,7 @@ button:disabled {
display: grid;
grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr;
position: relative;
padding: calc(var(--spacing) * 0.5) 0;
border-bottom: var(--border-light);
}
@ -901,8 +897,9 @@ button:disabled {
}
.card--impact .open-graph__details summary {
display: grid;
grid-template-columns: 2fr 3fr;
grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr;
position: relative;
}
.card--impact .open-graph__details summary .summary-inner {
grid-column: 2;
@ -922,8 +919,9 @@ button:disabled {
.card--open-graph {
display: grid;
grid-template-columns: 2fr 3fr;
grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr;
position: relative;
border: var(--border-light);
border-radius: var(--radius-small);
position: relative;
@ -1306,89 +1304,101 @@ body main {
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;
}
.page-enquete header .page-type {
[data-template=investigation-summary] main header .page-type {
text-transform: uppercase;
color: var(--color-txt-light);
margin-bottom: calc(var(--spacing) * 0.5);
}
.page-enquete header h2 {
[data-template=investigation-summary] main header h2 {
font-size: var(--fs-xbig);
line-height: var(--leading-tight);
}
.page-enquete .section__article a:hover {
[data-template=investigation-summary] main .section__article a:hover {
color: var(--grey-200);
}
.page-enquete .section__article .section__title {
[data-template=investigation-summary] main .section__article .section__title {
font-weight: normal;
text-transform: uppercase;
margin-bottom: calc(var(--spacing) * 0.5);
}
.page-enquete #hero {
[data-template=investigation-summary] main #hero {
width: 100vw;
position: relative;
left: calc(var(--padding-body) * -1);
}
.page-enquete #hero figcaption {
[data-template=investigation-summary] main #hero figcaption {
color: var(--color-txt-light);
font-size: var(--fs-small);
padding-top: calc(var(--spacing) * 0.5);
}
@media screen and (max-width: 560px) {
.page-enquete #hero figcaption {
[data-template=investigation-summary] main #hero figcaption {
font-size: var(--fs-xsmall);
}
}
.page-enquete #hero.hero-video figure {
[data-template=investigation-summary] main #hero.hero-video figure {
width: 100%;
}
.page-enquete #hero.hero-video figure img {
[data-template=investigation-summary] main #hero.hero-video figure img {
width: 100%;
aspect-ratio: 16/9;
-o-object-fit: cover;
object-fit: cover;
}
.page-enquete #nav--page ul {
[data-template=investigation-summary] main #nav--page ul {
list-style: none;
}
.page-enquete #nav--page ul li {
[data-template=investigation-summary] main #nav--page ul li {
text-align: center;
color: var(--color-txt-light);
}
.page-enquete #nav--page ul li a {
[data-template=investigation-summary] main #nav--page ul li a {
display: block;
padding: 0.3em 0;
text-decoration: none;
}
.page-enquete #section__short {
[data-template=investigation-summary] main #section__short {
font-size: var(--fs-medium);
}
.page-enquete #section__dl {
[data-template=investigation-summary] main #section__dl {
margin-top: calc(var(--spacing) * 1.5);
border-bottom: var(--border-light);
}
.page-enquete #section__dl .dl__group {
[data-template=investigation-summary] main #section__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;
}
.page-enquete #section__dl dt {
[data-template=investigation-summary] main #section__dl dt {
color: var(--color-txt-light);
padding-right: 1ch;
}
.page-enquete #section__dl ul:not(.keywords) {
[data-template=investigation-summary] main #section__dl ul:not(.keywords) {
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;
}
.page-enquete #section__synthese p + p {
[data-template=investigation-summary] main #section__synthese p + p {
margin-top: 0.5em;
}
.page-enquete #section__synthese h4 {
[data-template=investigation-summary] main #section__synthese h4 {
margin-top: 2em;
margin-bottom: 1em;
font-size: var(--fs-normal);
@ -1414,30 +1424,30 @@ body main {
}
@media screen and (max-width: 768px) {
.page-enquete header {
[data-template=investigation-summary] main header {
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);
}
.page-enquete .section__article {
[data-template=investigation-summary] main .section__article {
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;
}
.page-enquete #hero {
[data-template=investigation-summary] main #hero {
margin: calc(var(--spacing) * 1.5) 0;
}
.page-enquete #hero figcaption {
[data-template=investigation-summary] main #hero figcaption {
margin: 0 var(--padding-body);
}
.page-enquete .modal--share {
[data-template=investigation-summary] main .modal--share {
position: absolute;
width: calc(100% - var(--padding-body) * 2);
bottom: calc(var(--spacing) * 2);
}
.page-enquete #banner--page {
[data-template=investigation-summary] main #banner--page {
padding: calc(var(--spacing) * 0.5) 0;
position: fixed;
bottom: 0;
@ -1449,31 +1459,31 @@ body main {
background: linear-gradient(0deg, var(--color-bg) 0%, var(--color-bg) 64%, transparent 100%);
z-index: 800;
}
.page-enquete #banner--page #nav--page {
[data-template=investigation-summary] main #banner--page #nav--page {
display: none;
}
.page-enquete #banner--page .btn--group {
[data-template=investigation-summary] main #banner--page .btn--group {
display: flex;
gap: calc(var(--spacing) * 0.25);
position: relative;
}
.page-enquete #banner--page .btn--group > button,
.page-enquete #banner--page .btn--group > label {
[data-template=investigation-summary] main #banner--page .btn--group > button,
[data-template=investigation-summary] main #banner--page .btn--group > label {
width: 50%;
cursor: pointer;
}
.page-enquete #banner--page {
[data-template=investigation-summary] main #banner--page {
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease-in;
}
.page-enquete #banner--page.is-visible {
[data-template=investigation-summary] main #banner--page.is-visible {
opacity: 1;
pointer-events: auto;
}
}
@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;
column-gap: 1ch;
font-size: var(--fs-small);
@ -1481,7 +1491,7 @@ body main {
}
}
@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(100dvh - var(--header-h));
margin-bottom: calc((100vh - var(--header-h)) * -1);
@ -1495,38 +1505,38 @@ body main {
flex-direction: column;
justify-content: space-between;
}
.page-enquete #banner--page .btn--group {
[data-template=investigation-summary] main #banner--page .btn--group {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--spacing) * 0.25);
}
.page-enquete #banner--page .btn--group > button,
.page-enquete #banner--page .btn--group > label {
[data-template=investigation-summary] main #banner--page .btn--group > button,
[data-template=investigation-summary] main #banner--page .btn--group > label {
width: 100%;
max-width: 160px;
cursor: pointer;
}
.page-enquete #hero {
[data-template=investigation-summary] main #hero {
margin: calc(var(--spacing) * 3) 0;
}
.page-enquete .section__article {
[data-template=investigation-summary] main .section__article {
margin-left: var(--banner-medium);
margin-top: 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);
}
.page-enquete header {
[data-template=investigation-summary] main header {
max-width: var(--max-w-content);
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);
margin-bottom: var(--spacing);
}
.page-enquete #section__synthese {
[data-template=investigation-summary] main #section__synthese {
font-size: var(--fs-medium);
}
.modal--share {
@ -1536,21 +1546,21 @@ body main {
}
}
@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);
}
.page-enquete #hero {
[data-template=investigation-summary] main #hero {
margin: calc(var(--spacing) * 3) 0;
}
.page-enquete #hero figcaption {
[data-template=investigation-summary] main #hero figcaption {
max-width: var(--max-w-content);
margin: 0 auto;
}
.page-enquete header {
[data-template=investigation-summary] main header {
max-width: var(--max-w-content);
margin: calc(var(--spacing) * 2) auto;
}
.page-enquete .section__article {
[data-template=investigation-summary] main .section__article {
max-width: var(--max-w-content);
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/modal-share';
@import 'components/text';
@import 'components/card-small';
@import 'components/card-article';
@import 'components/card-article-small';
@import 'components/card-impact';
@import 'components/card-open-graph';
@ -28,6 +29,7 @@
@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{
position: relative;
[data-template="investigation-summary"] main{
position: relative;
header{
.page-type{
@ -77,8 +80,7 @@
border-bottom: var(--border-light);
.dl__group{
display: grid;
grid-template-columns: 2fr 3fr;
@include grid-content();
border-top: var(--border-light);
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}{
.page-enquete{
[data-template="investigation-summary"] main{
header{
padding-top: calc(var(--spacing)*1.5);
@ -243,7 +235,7 @@
@media #{$x-small}{
.page-enquete{
[data-template="investigation-summary"] main{
#section__dl .dl__group{
column-gap: 1ch;
@ -263,7 +255,7 @@
@media #{$small-up}{
.page-enquete{
[data-template="investigation-summary"] main{
#banner--page{
height: calc(100vh - var(--header-h));
@ -338,7 +330,7 @@
@media #{$medium-up}{
.page-enquete{
[data-template="investigation-summary"] main{
#banner--page{
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) {
if (isInitialized) return;
let main = document.querySelector("main");
if (!main || !main.classList.contains("page-enquete")) return;
let body = document.body;
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 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) {
if (isInitialized) return;
let main = document.querySelector("main");
if (!main || !main.classList.contains("page-enquete")) return;
let body = document.body;
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 footer = document.querySelector("#site-footer");

1
site/snippets/footer.php
View file

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

2
site/snippets/header.php
View file

@ -59,3 +59,5 @@
</button>
</div>
</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__field">
<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>
<button class="copy-link__btn">Copier</button>
</div>

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

@ -1,7 +1,6 @@
<?php snippet('header') ?>
<?php snippet('nav') ?>
<main class="page-enquete">
<header>
<p class="page-type">Enquête</p>
<h2>L’exécution de Nidal et Khaled ‘Amirah à Naplouse</h2>
@ -160,12 +159,12 @@
<aside class="section__article" id="section__en-lien">
<h3 class="section__title">En lien</h3>
<article class="card--small">
<article class="card--article-small">
<figure>
<img src="/assets/images/Nahel-visuel1.png">
</figure>
<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>
<ul class="keywords">
<li><a href="#" target="_blank">Occupation</a></li>
@ -174,15 +173,15 @@
<li><a href="#" target="_blank">Colonialité</a></li>
</ul>
</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 class="card--small">
<article class="card--article-small">
<figure>
<img src="/assets/images/Jumaa-visuel-1.png">
</figure>
<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>
<ul class="keywords">
<li><a href="#" target="_blank">Occupation</a></li>
@ -191,15 +190,15 @@
<li><a href="#" target="_blank">Colonialité</a></li>
</ul>
</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 class="card--small">
<article class="card--article-small">
<figure>
<img src="/assets/images/kanaky-visuel-1.png">
</figure>
<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>
<ul class="keywords">
<li><a href="#" target="_blank">Occupation</a></li>
@ -208,7 +207,7 @@
<li><a href="#" target="_blank">Colonialité</a></li>
</ul>
</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>
</aside>
@ -221,8 +220,5 @@
</main>
<?php snippet('footer') ?>

6
site/templates/investigation.php
View file

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

247
site/templates/investigations.php
View file

@ -1,2 +1,249 @@
<?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') ?>