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

merge

Browse source
This commit is contained in:
isUnknown 2026-01-13 13:06:30 +01:00
commit bfa3025a54
11 changed files with 1599 additions and 238 deletions
Download patch file Download diff file Expand all files Collapse all files

30
assets/css/components/_modal-share.scss
View file

@ -103,13 +103,15 @@
} }
} }
button{ .copy-link__btn{
background-color: var(--color-txt); background-color: var(--color-txt);
color: var(--color-bg); color: var(--color-bg);
border-radius: var(--radius-btn); border-radius: var(--radius-btn);
padding: 0 1ch; padding: 0 1ch;
font-size: var(--fs-small); font-size: var(--fs-small);
padding-top: 2px; padding-top: 2px;
white-space: nowrap;
&:hover{ &:hover{
background-color: var(--color-accent); background-color: var(--color-accent);
@ -120,3 +122,29 @@
} }
// SHARE ACTIONS --------------------------------------------------
// ----------------------------------------------------------------
#share-banner__content,
#share-banner__aside,
#share-banner__desktop{
display: none;
}
#share-banner__content ~ .modal--share,
#share-banner__aside ~ .modal--share,
#share-banner__desktop ~ .modal--share{
opacity: 0;
pointer-events: none;
transition: opacity .2s ease-in;
}
#share-banner__content:checked ~ .modal--share,
#share-banner__aside:checked ~ .modal--share,
#share-banner__desktop:checked ~ .modal--share{
opacity: 1;
pointer-events: auto;
}

1007
assets/css/style.css
View file

File diff suppressed because it is too large Load diff

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

File diff suppressed because one or more lines are too long

10
assets/css/style.scss
View file

@ -30,6 +30,16 @@
@import "partials/site-footer"; @import "partials/site-footer";
@import "partials/main-layout"; @import "partials/main-layout";
@import "template/home";
@import "template/investigations";
@import "template/investigation-summary";
@import "template/rapport";
@import "partials/site-header";
@import "partials/site-menu";
@import "partials/site-footer";
@import "partials/main-layout";
@import "template/investigations"; @import "template/investigations";
@import "template/investigation"; @import "template/investigation";
@import "template/rapport"; @import "template/rapport";

47
assets/css/template/_home.scss Normal file
View file

@ -0,0 +1,47 @@
.section--home{
margin: calc(var(--spacing)*3);
.title-section{
font-size: var(--fs-medium);
font-weight: normal;
text-transform: uppercase;
}
}
#home__investigations{
.container-cards{
max-width: var(--max-w-container);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
grid-auto-rows: minmax(100px, auto);
grid-gap: calc(var(--padding-body)*1.5);
margin-bottom: 10vh;
}
}
#home__description{
.section--inner{
max-width: var(--max-w-container);
}
p{
font-size: var(--fs-big);
max-width: var(--max-w-content);
}
button{
margin-top: calc(var(--spacing)*1);
}
button .icon svg{
width: 11px;
}
}

327
assets/css/template/_investigation-summary.scss Normal file
View file

@ -0,0 +1,327 @@
[data-template="investigation-summary"] main{
position: relative;
header{
.page-title{
text-transform: uppercase;
font-weight: normal;
font-size: var(--fs-big);
line-height: var(--leading-tight);
margin-top: calc(var(--spacing)*1);
}
}
.section__article{
a:hover{
color: var(--grey-200);
}
.section__title{
font-weight: normal;
text-transform: uppercase;
margin-bottom: calc(var(--spacing)*0.5)
}
}
#nav--page{
ul{
list-style: none;
li{
text-align: center;
color: var(--color-txt-light);
a{
display: block;
padding: 0.3em 0;
text-decoration: none;
}
}
}
}
#section__short{
font-size: var(--fs-medium);
}
#section__dl{
margin-top: calc(var(--spacing)*1.5);
border-bottom: var(--border-light);
.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;
}
}
}
#section__synthese{
p + p{
margin-top: 0.5em;
}
h4{
margin-top: 2em;
margin-bottom: 1em;
font-size: var(--fs-normal);
font-weight: normal;
text-decoration: 1px underline var(--color-txt-light);
text-underline-offset: 3px;
}
}
}
// SMALL ----------------------------------------------------------
// ----------------------------------------------------------------
@media #{$small}{
[data-template="investigation-summary"] main{
header{
padding-top: calc(var(--spacing)*1);
.page-type{
font-size: var(--fs-small);
}
}
.section__article{
margin: calc(var(--spacing)*1.5) 0;
}
#section__impacts, #section__en-lien{
margin-top: 0px;
}
#hero{
margin: calc(var(--spacing)*0.5) 0;
figcaption{
margin: 0 var(--padding-body);
}
}
.modal--share{
position: absolute;
width: calc(100% - var(--padding-body)*2);
bottom: calc(var(--spacing) * 2);
}
#banner--page {
padding: calc(var(--spacing)*0.5) 0;
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
padding: calc(var(--spacing)*0.75) var(--padding-body);
padding-top: var(--spacing);
background-color: var(--color-bg);
background: linear-gradient(0deg,var(--color-bg) 0%, var(--color-bg) 64%, transparent 100%);
z-index: 800;
#nav--page{
display: none;
}
.btn--group{
display: flex;
gap: calc(var(--spacing)*0.25);
position: relative;
> button,
> label {
width: 50%;
cursor: pointer;
}
}
}
// action
#banner--page{
opacity: 0;
pointer-events: none;
transition: opacity .2s ease-in;
}
#banner--page.is-visible{
opacity: 1;
pointer-events: auto;
}
}
}
@media #{$x-small}{
[data-template="investigation-summary"] main{
#section__dl .dl__group{
column-gap: 1ch;
font-size: var(--fs-small);
padding: calc(var(--spacing)*0.25) 0;
}
}
}
// DESKTOP ----------------------------------------------------------
// ----------------------------------------------------------------
@media #{$small-up}{
[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);
margin-bottom: calc((100dvh - var(--header-h))*-1);
padding: var(--padding-body);
padding-left: 0px;
padding-bottom: calc(var(--padding-body)*2);
position: sticky;
top: var(--header-h);
width: var(--banner-medium);
display: flex;
flex-direction: column;
justify-content: space-between;
}
#banner--page .btn--group{
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--spacing)*0.25);
> button,
> label {
width: 100%;
max-width: 160px;
cursor: pointer;
}
}
#hero{
margin-top: calc(var(--spacing)*1);
margin-bottom: calc(var(--spacing)*3);
}
.section__article{
margin-left: var(--banner-medium);
margin-top: calc(var(--spacing)*3);
margin-bottom: calc(var(--spacing)*3);
}
#section__short{
margin-top: var(--padding-body);
}
header{
max-width: var(--max-w-content);
margin-left: var(--banner-medium);
margin-top: calc(var(--spacing)*1.5);
margin-bottom: calc(var(--spacing)*0.5);
}
.section__article{
.section__title{
font-size: var(--fs-medium);
margin-bottom: var(--spacing);
}
}
#section__synthese{
font-size: var(--fs-medium);
}
}
.modal--share{
position: absolute;
bottom: calc(var(--padding-body)*2 + var(--h-block) + var(--spacing) * 0.25);
width: calc(100% - var(--padding-body));
}
}
@media #{$medium-up}{
[data-template="investigation-summary"] main{
#banner--page{
width: calc((100% - var(--max-w-content))/2);
}
#hero{
margin-top: 0;
margin-bottom: calc(var(--spacing)*3);
figcaption{
max-width: var(--max-w-content);
margin: 0 auto;
}
}
header{
margin-left: auto;
margin-right: auto;
}
.section__article{
max-width: var(--max-w-content);
margin: calc(var(--spacing)*3) auto;
}
}
}

34
assets/css/template/_investigations.scss
View file

@ -16,19 +16,25 @@
} }
} }
} }
@media #{$x-small} {
.search-container { margin-bottom: 10vh;
max-width: var(--max-w-content); .card--article {
margin: 0 auto; margin-bottom: calc(var(--spacing) * 1.5);
margin-bottom: calc(var(--spacing) * 2); }
}
.page__sort {
max-width: var(--max-w-container);
display: flex;
justify-content: right;
grid-gap: var(--padding-inner);
margin: 0 auto;
margin-bottom: calc(var(--spacing) * 0.5);
} }
} }
.search-container {
max-width: var(--max-w-content);
margin: 0 auto;
margin-bottom: calc(var(--spacing) * 2);
}
.page__sort {
max-width: var(--max-w-container);
display: flex;
justify-content: right;
grid-gap: var(--padding-inner);
margin: 0 auto;
margin-bottom: calc(var(--spacing) * 0.5);
}

297
assets/css/template/_rapport.scss
View file

@ -1,147 +1,146 @@
:root{ :root{
--rapport-w: 280px; --rapport-w: 290px;
} }
#rapport{ #rapport{
margin-bottom: 20vh; margin-bottom: 20vh;
padding-left: var(--rapport-w); padding-left: calc(var(--rapport-w) + var(--padding-body)*1);
padding-bottom: 10vh; padding-bottom: 10vh;
margin: 0 auto; margin: 0 auto;
max-width: calc(var(--max-w-content) + var(--rapport-w)); max-width: calc(var(--max-w-content) + var(--rapport-w) + var(--padding-body));
margin-top: calc(var(--spacing)*-1);
}
.rapport__header{ #rapport .rapport__header{
margin-top: calc(var(--spacing)*2);
max-width: var(--max-w-content);
margin-bottom: calc(var(--spacing)*2.5);
// display: grid; display: grid;
// grid-template-columns: 1fr 140px; column-gap: var(--padding-inner);
// column-gap: calc(var(--spacing)*1.5); row-gap: calc(var(--spacing)*1);
// row-gap: calc(var(--spacing)*2); grid-template-columns: 30% 70%;
grid-template-rows: auto auto 1fr;
margin-top: calc(var(--spacing)*2); position: relative;
max-width: var(--max-w-content);
padding-bottom: calc(var(--spacing)*0.5);
.rapport__title-group{ .rapport__title-group{
grid-column: span 2; grid-row: 1;
grid-column: span 2;
// padding-bottom: calc(var(--spacing)*1);
.title{ .title{
text-transform: uppercase; text-transform: uppercase;
font-weight: normal; font-weight: normal;
font-size: var(--fs-big); font-size: var(--fs-big);
line-height: var(--leading-tight); line-height: var(--leading-tight);
font-weight: normal; font-weight: normal;
margin-top: calc(var(--spacing)*1);
}
.subtitle{
font-size: var(--fs-big);
line-height: var(--leading-tight);
margin-top: calc(var(--spacing)*0.5);
font-weight: normal;
}
}
.rapport__figure{
width: 100%;
aspect-ratio: 2/1;
margin-top: calc(var(--spacing)*2);
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
.rapport__dl{
align-self: start;
font-size: var(--fs-small);
border-bottom: var(--border-light);
flex-grow: 2;
align-items: flex-start;
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;
}
}
.thumbnail--group{
display: flex;
gap: calc(var(--spacing)*0.5);
margin-top: calc(var(--spacing)*1); margin-top: calc(var(--spacing)*1);
} }
.subtitle{
font-size: var(--fs-big);
.btn--group{ line-height: var(--leading-tight);
display: flex; // margin-top: calc(var(--spacing)*0.25);
gap: calc(var(--spacing)*0.5); font-weight: normal;
} }
.thumbnail{
max-width: 260px;
display: grid;
display: none;
grid-template-columns: 2fr 3fr;
column-gap: calc(var(--padding-inner)*1);
padding: calc(var(--padding-inner)*0.5);
border: var(--border-light);
figure{
display: flex;
aspect-ratio: 4/3;
grid-column: 1;
grid-row: 1/3;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
.thumbnail__title{
padding-top: calc(var(--padding-inner)*0.5);
a{
text-decoration: none;
}
}
button{
align-self: end;
display: flex;
align-items: end;
justify-content: end;
padding-right: calc(var(--padding-inner)*0.5);
padding-bottom: calc(var(--padding-inner)*0.5);
}
button svg{
width: 15px;
height: 15px;
fill: var(--color-txt);
}
}
} }
.rapport__figure{
width: 100%;
aspect-ratio: 4/5;
grid-row: span 2;
grid-column: 1;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
.rapport__dl{
grid-row: 2;
grid-column: 2;
align-self: start;
// align-self: start;
font-size: var(--fs-small);
border-bottom: var(--border-light);
// flex-grow: 2;
align-items: flex-start;
// margin-top: calc(var(--spacing)*1);
.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;
}
}
.btn--group{
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
gap: calc(var(--spacing)*0.5);
position: relative;
grid-row: 3;
grid-column: 2;
button, label{
min-width: 28ch;
justify-content: flex-start;
a{
justify-content: flex-start;
}
}
}
label{
// position: relative;
}
.modal--share{
max-width: 240px;
position: absolute;
height: 250px;
top: calc(var(--h-block) * 1.5);
left: 260px;
&::before{
content: "◀";
transform: rotate(90deg);
font-size: 10px;
position: absolute;
top: -10px;
right: calc(var(--h-block) * 1.5);
}
}
}
#rapport{
.rapport__content{ .rapport__content{
max-width: var(--max-w-content); max-width: var(--max-w-content);
margin-top: calc(var(--spacing)*3); // margin-top: calc(var(--spacing)*0.5);
.section-content{ .section-content{
@ -188,13 +187,14 @@
position: fixed; position: fixed;
top: calc(var(--header-h) + var(--padding-body)); top: calc(var(--header-h) + var(--padding-body));
left: var(--padding-body); left: var(--padding-body);
--border-aside: var(--border-light);
// border-radius: var(--radius-small); // border-radius: var(--radius-small);
height: calc(100vh - var(--header-h) - var(--padding-body)*4); height: calc(100vh - var(--header-h) - var(--padding-body)*4);
.tabs{ .tabs{
display: flex; display: flex;
border: var(--border-light); border: var(--border-aside);
height: calc(var(--h-block)*1.25); height: calc(var(--h-block)*1.25);
.tab{ .tab{
@ -208,7 +208,7 @@
.tab[for="tab-print"]{ .tab[for="tab-print"]{
width: calc(var(--h-block)*1.5); width: calc(var(--h-block)*1.5);
border-right: var(--border-light); border-right: var(--border-aside);
padding-left: 0; padding-left: 0;
justify-content: center; justify-content: center;
.icon{ .icon{
@ -225,7 +225,7 @@
padding: var(--padding-body); padding: var(--padding-body);
height: calc(100% - var(--h-block)*1.25); height: calc(100% - var(--h-block)*1.25);
overflow: scroll; overflow: scroll;
border: var(--border-light); border: var(--border-aside);
border-top: none; border-top: none;
} }
@ -235,15 +235,21 @@
li{ li{
font-size: var(--fs-small); font-size: var(--fs-small);
padding: 5px 1ch;
padding-top: 7px; color: var(--color-txt-light);
a{
display: block;
padding: 5px 1ch;
padding-top: 7px;
}
} }
li.selected{ li.selected{
// color: var(--color-accent);
background-color: var(--grey-800); background-color: var(--grey-800);
color: var(--color-txt);
} }
li:hover{ li:hover{
@ -264,10 +270,39 @@
} }
#download-pdf{ .btn--group{
margin: 0 auto;
margin-top: calc(var(--spacing)*0.5); margin-top: calc(var(--spacing)*0.5);
display: flex;
gap: var(--padding-inner);
[for="share-banner__aside"]{
cursor: pointer;
}
#download-pdf{
a{
padding-left: 1ch;
padding-right: 1ch;
}
}
} }
.modal--share{
position: absolute;
bottom: calc(var(--h-block) * -1.5);
right: calc(-100% + var(--padding-inner));
&::before{
content: "◀";
font-size: 10px;
position: absolute;
bottom: calc(var(--h-block) * 0.25);
left: -9px;
}
}
} }

1
assets/icons/share.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M371.8 82.4C359.8 87.4 352 99 352 112L352 192L240 192C142.8 192 64 270.8 64 368C64 481.3 145.5 531.9 164.2 542.1C166.7 543.5 169.5 544 172.3 544C183.2 544 192 535.1 192 524.3C192 516.8 187.7 509.9 182.2 504.8C172.8 496 160 478.4 160 448.1C160 395.1 203 352.1 256 352.1L352 352.1L352 432.1C352 445 359.8 456.7 371.8 461.7C383.8 466.7 397.5 463.9 406.7 454.8L566.7 294.8C579.2 282.3 579.2 262 566.7 249.5L406.7 89.5C397.5 80.3 383.8 77.6 371.8 82.6z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 679 B

31
site/templates/home.php
View file

@ -1,10 +1,29 @@
<?php snippet('header') ?> <?php snippet('header') ?>
<main> <main>
<p>
L’objet central de notre action est de concourir à la manifestation de la vérité dans des affaires où celle-ci est entravée par des intérêts de pouvoir. <section class="section--home" id="home__description">
Nos enquêtes portent principalement principalement sur les cas de violences policières, en France comme à l'international, ainsi que sur les violations des droits humains au sens large. Nous intervenons également dans les situations où nos techniques d'investigation numérique peuvent permettre d'établir les faits autour d'une controverse d'intérêt public, qu'elle soit historique ou contemporaine. <div class="section--inner">
Notre champ d’action est avant tout public. Nos enquêtes et rapports d’expertise sont souvent publiés en partenariat avec d'autres médias d'information et sont régulièrement utilisés dans les procédures judiciaires sur les affaires concernées, contribuant ainsi à l'établissement des faits. <p>Index est une ONG d’investigation numérique, au&nbsp;service du public, de la vérité et de la justice.</p>
Nous œuvrons également à la diffusion des techniques et des méthodes de l’investigation en sources ouvertes (OSINT) au sein de la société civile. Dans le cadre de notre programme de formation, nous animons des ateliers avec des collectifs citoyens, des ONG, des universités et le grand public. Enfin, nous intervenons régulièrement dans la sphère publique pour présenter nos travaux et notre approche.
</p> <button class="btn--bold-inline btn--light">
<a href="#">
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
<span class="text">En savoir plus</span>
</a>
</button>
</div>
</section>
<section class="section--home" id="home__investigations">
<div class="section--inner">
<h2 class="title-section">Dernières Enquêtes</h2>
<section class="container-cards">
</section>
</div>
</section>
</main> </main>
<?php snippet('footer') ?> <?php snippet('footer') ?>

51
site/templates/report.php
View file

@ -40,12 +40,22 @@
</div> </div>
<button id="download-pdf" class="btn--bold"> <div class="btn--group">
<a href="#"> <button id="download-pdf" class="btn--bold">
<span class="icon"><?= svg('assets/icons/pdf.svg') ?></span> <a href="#">
<span class="text">Télégarcher le&nbsp;PDF</span> <span class="icon"><?= svg('assets/icons/pdf.svg') ?></span>
</a> <span class="text">Télégarcher le&nbsp;PDF</span>
</button> </a>
</button>
<label for="share-banner__aside" class="btn--bold-inline btn--light no-link">
<span class="icon"><?= svg('assets/icons/share.svg') ?></span>
<span class="text">Partager</span>
</label>
</div>
<input type="checkbox" id="share-banner__aside">
<?php snippet('modal-share') ?>
</aside> </aside>
@ -74,23 +84,6 @@
</dl> </dl>
<div class="thumbnail--group">
<div class="thumbnail thumbnail-pdf">
<figure><img src="/assets/images/cover-rapport.png"></figure>
<p class="thumbnail__title"><a href="#">Télégarcher le&nbsp;PDF</a></p>
<button><?= svg('assets/icons/arrow-left.svg') ?></button>
<a class="link-block" href="#"></a>
</div>
<div class="thumbnail thumbnail-summary">
<figure><img src="/assets/images/Nidal-Khaled-Amirah.png"></figure>
<p class="thumbnail__title"><a href="#">Voir la&nbsp;synthèse</a></p>
<button><?= svg('assets/icons/arrow-left.svg') ?></button>
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"></a>
</div>
</div>
<div class="btn--group"> <div class="btn--group">
<button class="btn--bold-inline btn--light"> <button class="btn--bold-inline btn--light">
<a href="#"> <a href="#">
@ -105,9 +98,19 @@
<span class="text">Voir la&nbsp;synthèse</span> <span class="text">Voir la&nbsp;synthèse</span>
</a> </a>
</button> </button>
<label for="share-banner__content" class="btn--bold-inline btn--light no-link">
<span class="icon"><?= svg('assets/icons/share.svg') ?></span>
<span class="text">Partager</span>
</label>
<input type="checkbox" id="share-banner__content">
<?php snippet('modal-share') ?>
</div> </div>
</header> </header>