diff --git a/assets/css/base/_var.scss b/assets/css/base/_var.scss index 1a3d2c9..c4616ec 100644 --- a/assets/css/base/_var.scss +++ b/assets/css/base/_var.scss @@ -13,10 +13,12 @@ --fs-normal: 16px; --fs-medium: 20px; --fs-big: 30px; - --fs-x-big: 38px; + --fs-xbig: 38px; --fs-button-bold: 22px; + --max-w-content: 700px; + @media #{$small} { --fs-medium: 20px; --fs-big: 26px; @@ -41,7 +43,7 @@ --color-bg: #161616; --color-txt: #ffffff; - --color-txt-light: var(--grey-600); + --color-txt-light: var(--grey-400); --color-accent: #00ff00; --color-accent-50: #e9ffe9; --color-accent-100: #d8fdd8; diff --git a/assets/css/partials/_site-footer.scss b/assets/css/partials/_site-footer.scss index 3ee329a..1bc7277 100644 --- a/assets/css/partials/_site-footer.scss +++ b/assets/css/partials/_site-footer.scss @@ -7,6 +7,7 @@ .logo { margin-top: calc(var(--spacing)*0.25); margin-bottom: calc(var(--spacing)*1); + opacity: 0; svg{ width: 100px; } diff --git a/assets/css/partials/_site-header.scss b/assets/css/partials/_site-header.scss index 7b06eaf..68f3075 100644 --- a/assets/css/partials/_site-header.scss +++ b/assets/css/partials/_site-header.scss @@ -34,6 +34,7 @@ #site-title { flex-grow: 2; + opacity: 0; svg{ width: 100px; } diff --git a/assets/css/partials/_site-menu.scss b/assets/css/partials/_site-menu.scss index 93c6f10..b09ae8c 100644 --- a/assets/css/partials/_site-menu.scss +++ b/assets/css/partials/_site-menu.scss @@ -12,6 +12,7 @@ display: flex; flex-direction: column; + display: none; .baseline{ font-size: var(--fs-medium); diff --git a/assets/css/style.scss b/assets/css/style.scss index 23a36d3..334ac03 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -19,4 +19,6 @@ @import 'partials/main-layout'; +@import 'template/page-article'; + diff --git a/assets/css/template/_page-article.scss b/assets/css/template/_page-article.scss new file mode 100644 index 0000000..5d04a82 --- /dev/null +++ b/assets/css/template/_page-article.scss @@ -0,0 +1,99 @@ +.page-article header{ + max-width: var(--max-w-content); + margin: calc(var(--spacing)*2) auto; + .page-type{ + text-transform: uppercase; + color: var(--color-txt-light); + margin-bottom: calc(var(--spacing)*0.5); + } + h2{ + font-size: var(--fs-xbig); + } +} + +.page-article .section__article{ + max-width: var(--max-w-content); + margin: calc(var(--spacing)*3) auto; + a:hover{ + color: var(--grey-200); + } + + + .section__title{ + font-weight: normal; + text-transform: uppercase; + font-size: var(--fs-medium); + margin-bottom: calc(var(--spacing)*1) + } +} + +.page-article .hero{ + width: 100vw; + position: relative; + left: calc(var(--padding-body)*-1); + + margin: calc(var(--spacing)*3) 0; + + figcaption{ + color: var(--color-txt-light); + font-size: var(--fs-small); + max-width: var(--max-w-content); + margin: 0 auto; + padding-top: calc(var(--spacing)*0.5); + } + + &.hero-video{ + figure{ + width: 100%; + + img{ + width: 100%; + aspect-ratio: 16/9; + object-fit: cover; + } + + + } + } +} + + +.page-article .short{ + font-size: var(--fs-medium); + margin: calc(var(--spacing)*3) auto; + max-width: var(--max-w-content); +} + +.page-article #section__synthese{ + font-size: var(--fs-medium); + +} + +.page-article #banner--page{ + height: calc(100dvh - var(--header-h)); + height: calc(100dvh - var(--header-h)); + margin-bottom: calc((100dvh - var(--header-h))*-1); + background-color: red; + position: sticky; + top: var(--header-h); + width: 240px; + + + +} + +.page-article #section__dl{ + margin-top: 0px; + border-bottom: var(--border-light); + + .dl__group{ + display: grid; + grid-template-columns: 40% 1fr; + border-top: var(--border-light); + padding: calc(var(--spacing)*0.5) 0; + } + + dt{ + color: var(--color-txt-light); + } +} \ No newline at end of file diff --git a/assets/images/Jumaa-visuel-1.png b/assets/images/Jumaa-visuel-1.png new file mode 100644 index 0000000..298530b Binary files /dev/null and b/assets/images/Jumaa-visuel-1.png differ diff --git a/assets/images/Nahel-visuel1.png b/assets/images/Nahel-visuel1.png new file mode 100644 index 0000000..d281231 Binary files /dev/null and b/assets/images/Nahel-visuel1.png differ diff --git a/assets/images/Nidal-Khaled-Amirah.png b/assets/images/Nidal-Khaled-Amirah.png new file mode 100644 index 0000000..615bf54 Binary files /dev/null and b/assets/images/Nidal-Khaled-Amirah.png differ diff --git a/assets/images/kanaky-visuel-1.png b/assets/images/kanaky-visuel-1.png new file mode 100644 index 0000000..6aa5d3c Binary files /dev/null and b/assets/images/kanaky-visuel-1.png differ diff --git a/assets/js/onload.js b/assets/js/onload.js index 830a497..861b3c0 100644 --- a/assets/js/onload.js +++ b/assets/js/onload.js @@ -1,6 +1,6 @@ window.onload = function () { includeHTML(); - headerShrink(); + headerToggle(); }; window.onscroll = function () { @@ -9,15 +9,12 @@ window.onscroll = function () { -function headerShrink() { +function headerToggle() { const header = document.getElementById('site-header'); - const scrollPosition = window.scrollY || document.documentElement.scrollTop; - - if (scrollPosition > 100) { - header.classList.add('is-shrinked'); - } else { - header.classList.remove('is-shrinked'); - } + const buttonToggle = document.querySelector('menu-toggle'); + + console.log(buttonToggle); + } diff --git a/list-articles/index.html b/list-articles/index.html new file mode 100644 index 0000000..4c4dfd5 --- /dev/null +++ b/list-articles/index.html @@ -0,0 +1,131 @@ + + + + + + INDEX + + + + + + + + + + + + +
+ +

Enquête

+ +

Les enquêtes d’Index mobilisent les techniques de l’investigation numérique pour établir la véri...

+ +
+ + +
+ +
+ +
+
+ +
+

L’exécution de Nidal et Khaled ‘Amirah

+ +

À 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.

+ +
+
+
Date de publication
+
+
+
+
Partenaire(s)
+
B’Tselem
+
+
+
Mots-clés
+
+
    +
  • Occupation
  • +
  • Colonialité
  • +
  • Forces armées
  • +
+
+
+
+ +
+ +
+
+ +
+

La mort pas noyade de Jumaa Al-Hasan

+ +

À 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.

+ +
+
+
Date de publication
+
+
+
+
Partenaire(s)
+
B’Tselem
+
+
+
Mots-clés
+
+
    +
  • Frontières
  • +
  • Grenade
  • +
  • Maintien de l’ordre
  • +
+
+
+
+ +
+ +
+
+ +
+

L’homicide de Nahel Merzouk

+ +

À 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.

+ +
+
+
Date de publication
+
+
+
+
Partenaire(s)
+
B’Tselem
+
+
+
Mots-clés
+
+
    +
  • Refus d’optempérer
  • +
+
+
+
+ +
+ +
+ +
+ + + + + + \ No newline at end of file diff --git a/page-enquete/index.html b/page-enquete/index.html new file mode 100644 index 0000000..38d5b00 --- /dev/null +++ b/page-enquete/index.html @@ -0,0 +1,210 @@ + + + + + + INDEX + + + + + + + + + + + + +
+
+

Enquête

+

L’exécution de Nidal et Khaled ‘Amirah

+

+
+ +
+
+ +
+
Ici la légende de l’image. À 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.
+
+ + + + +

À 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.

+ + + +
+
+
Date de l’incident
+
+
+
+
Lieu de l’incident
+
Naplouse, Cisjordanie occupée, Palestine
+
+
+
Conséquences
+
Mort
+
+
+
Mots-clés
+
+
    +
  • Occupation
  • +
  • Colonialité
  • +
  • Forces armées
  • +
+
+
+
+
Méthodologie
+
+
    +
  • Reconstitution 3D
  • +
  • Frame-match
  • +
  • Analyse audiovisuelle
  • +
+
+
+
+
Équipe
+
Nadav Joffe, Basile Trouillet, Francesco Sebregondi
+
+
+
Partenaire(s)
+
B’Tselem
+
+
+
Date de publication
+
+
+
+ +
+

Synthèse

+ +

Le 10 juin 2025, lors d’un raid de grande envergure dans la vieille ville de Naplouse, les forces armées israéliennes ont tué deux Palestiniens : les frères Nidal et Khaled ‘Amirah. +

+

+ Suite à l’incident, l’armée israélienne a affirmé dans un communiqué que les hommes étaient des « terroristes » qui avaient essayé de s’emparer de l’arme d’un soldat et en avaient blessé quatre autres. Les soldats auraient alors riposté en tirant sur les deux hommes, les tuant tous les deux. +

+

+ Cependant, l’analyse vidéo et les témoignages recueillis contredisent cette version des faits. Une enquête menée conjointement par B’Tselem et Index révèle que les frères ‘Amirah n’ont à aucun moment posé de danger pour les soldats impliqués. Pourtant, Khaled a été exécuté à bout portant alors qu’il était maintenu au sol par plusieurs soldats armés, tandis que son frère Nidal a été abattu par un tir dans le dos. Les soldats ont également empêché les secouristes présents de leur prêter assistance. +

+

Un sous-titre ici pour tester

+

+ Les corps de Nidal et de Khaled ‘Amirah sont toujours détenus par les forces armées israéliennes. +

+

+ À Naplouse comme à Jénine – où des soldats ont été filmés le mois dernier en train d’exécuter deux Palestiniens qui s’étaient rendus – ces images révèlent une politique de “tir à vue”, qui permet à l’armée israélienne de faire un usage sans aucun frein de la force létale contre les Palestiniens. Depuis octobre 2023, Israël a tué plus de 1 000 Palestiniens en Cisjordanie occupée. +

+
+ + +
+

Impacts

+ +
+

Médiatique

+ +
+ +
+

Judiciaire

+

12 Dec 2025

+
+

La justice israélienne déclare ouvrir une enquête sur “les circonstances de la mort de Nidal et Khaled Amirah” +

+
+ +
+ +
+

Judiciaire

+

12 Dec 2025

+
+

La justice israélienne déclare ouvrir une enquête sur “les circonstances de la mort de Nidal et Khaled Amirah” +

+
+ + +
+ +
+

Judiciaire

+

12 Dec 2025

+
+

Index présente une série d’enquêtes récentes au Festival du Réel 2025 +

+
+ +
+
+ + + + + + + + + + + + + +
+ + + + + + \ No newline at end of file