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

thumbnail images

Browse source
This commit is contained in:
Julie Blanc 2026-01-09 14:07:07 +01:00
parent 90aa3babd6
commit 002b77b37a
6 changed files with 143 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

44
assets/css/style.css
View file

@ -1818,11 +1818,6 @@ body main {
max-width: calc(var(--max-w-content) + var(--rapport-w));
}
#rapport .rapport__header {
display: grid;
grid-template-columns: 1fr 140px;
-moz-column-gap: calc(var(--spacing) * 1.5);
column-gap: calc(var(--spacing) * 1.5);
row-gap: calc(var(--spacing) * 2);
margin-top: calc(var(--spacing) * 2);
max-width: var(--max-w-content);
padding-bottom: calc(var(--spacing) * 0.5);
@ -1850,6 +1845,7 @@ body main {
border-bottom: var(--border-light);
flex-grow: 2;
align-items: flex-start;
margin-top: calc(var(--spacing) * 2);
}
#rapport .rapport__header dl .dl__group {
display: grid;
@ -1865,19 +1861,49 @@ body main {
}
#rapport .rapport__header .thumbnail--group {
display: flex;
flex-direction: column;
gap: calc(var(--spacing) * 0.5);
margin-top: calc(var(--spacing) * 1);
}
#rapport .rapport__header .thumbnail {
width: 140px;
max-width: 260px;
display: grid;
grid-template-columns: 2fr 3fr;
-moz-column-gap: calc(var(--padding-inner) * 1);
column-gap: calc(var(--padding-inner) * 1);
padding: calc(var(--padding-inner) * 0.5);
border: var(--border-light);
}
#rapport .rapport__header .thumbnail figure {
border: var(--border-medium);
display: flex;
aspect-ratio: 4/3;
grid-column: 1;
grid-row: 1/3;
}
#rapport .rapport__header .thumbnail .btn--small {
#rapport .rapport__header .thumbnail figure img {
width: 100%;
margin-top: calc(var(--spacing) * 0.25);
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
#rapport .rapport__header .thumbnail .thumbnail__title {
padding-top: calc(var(--padding-inner) * 0.5);
}
#rapport .rapport__header .thumbnail .thumbnail__title a {
text-decoration: none;
}
#rapport .rapport__header .thumbnail 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);
}
#rapport .rapport__header .thumbnail button svg {
width: 15px;
height: 15px;
fill: var(--color-txt);
}
#rapport .rapport__content {
max-width: var(--max-w-content);

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

File diff suppressed because one or more lines are too long

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

@ -11,10 +11,10 @@
.rapport__header{
display: grid;
grid-template-columns: 1fr 140px;
column-gap: calc(var(--spacing)*1.5);
row-gap: calc(var(--spacing)*2);
// display: grid;
// grid-template-columns: 1fr 140px;
// column-gap: calc(var(--spacing)*1.5);
// row-gap: calc(var(--spacing)*2);
margin-top: calc(var(--spacing)*2);
max-width: var(--max-w-content);
@ -51,6 +51,7 @@
border-bottom: var(--border-light);
flex-grow: 2;
align-items: flex-start;
margin-top: calc(var(--spacing)*2);
.dl__group{
@include grid-content();
border-top: var(--border-light);
@ -66,20 +67,53 @@
.thumbnail--group{
display: flex;
flex-direction: column;
gap: calc(var(--spacing)*0.5);
margin-top: calc(var(--spacing)*1);
}
.thumbnail{
.thumbnail{
max-width: 260px;
display: grid;
grid-template-columns: 2fr 3fr;
column-gap: calc(var(--padding-inner)*1);
padding: calc(var(--padding-inner)*0.5);
border: var(--border-light);
// font-size: var(--fs-small);
width: 140px;
figure{
border: var(--border-medium);
display: flex;
aspect-ratio: 4/3;
grid-column: 1;
grid-row: 1/3;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
.btn--small{
width: 100%;
margin-top: calc(var(--spacing)*0.25);
.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);
}
}

56
assets/icons/pdf.svg Normal file
View file

@ -0,0 +1,56 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="550.801px" height="550.801px" viewBox="0 0 550.801 550.801" style="enable-background:new 0 0 550.801 550.801;"
xml:space="preserve">
<g>
<path d="M160.381,282.225c0-14.832-10.299-23.684-28.474-23.684c-7.414,0-12.437,0.715-15.071,1.432V307.6
c3.114,0.707,6.942,0.949,12.192,0.949C148.419,308.549,160.381,298.74,160.381,282.225z"/>
<path d="M272.875,259.019c-8.145,0-13.397,0.717-16.519,1.435v105.523c3.116,0.729,8.142,0.729,12.69,0.729
c33.017,0.231,54.554-17.946,54.554-56.474C323.842,276.719,304.215,259.019,272.875,259.019z"/>
<path d="M488.426,197.019H475.2v-63.816c0-0.398-0.063-0.799-0.116-1.202c-0.021-2.534-0.827-5.023-2.562-6.995L366.325,3.694
c-0.032-0.031-0.063-0.042-0.085-0.076c-0.633-0.707-1.371-1.295-2.151-1.804c-0.231-0.155-0.464-0.285-0.706-0.419
c-0.676-0.369-1.393-0.675-2.131-0.896c-0.2-0.056-0.38-0.138-0.58-0.19C359.87,0.119,359.037,0,358.193,0H97.2
c-11.918,0-21.6,9.693-21.6,21.601v175.413H62.377c-17.049,0-30.873,13.818-30.873,30.873v160.545
c0,17.043,13.824,30.87,30.873,30.87h13.224V529.2c0,11.907,9.682,21.601,21.6,21.601h356.4c11.907,0,21.6-9.693,21.6-21.601
V419.302h13.226c17.044,0,30.871-13.827,30.871-30.87v-160.54C519.297,210.838,505.47,197.019,488.426,197.019z M97.2,21.605
h250.193v110.513c0,5.967,4.841,10.8,10.8,10.8h95.407v54.108H97.2V21.605z M362.359,309.023c0,30.876-11.243,52.165-26.82,65.333
c-16.971,14.117-42.82,20.814-74.396,20.814c-18.9,0-32.297-1.197-41.401-2.389V234.365c13.399-2.149,30.878-3.346,49.304-3.346
c30.612,0,50.478,5.508,66.039,17.226C351.828,260.69,362.359,280.547,362.359,309.023z M80.7,393.499V234.365
c11.241-1.904,27.042-3.346,49.296-3.346c22.491,0,38.527,4.308,49.291,12.928c10.292,8.131,17.215,21.534,17.215,37.328
c0,15.799-5.25,29.198-14.829,38.285c-12.442,11.728-30.865,16.996-52.407,16.996c-4.778,0-9.1-0.243-12.435-0.723v57.67H80.7
V393.499z M453.601,523.353H97.2V419.302h356.4V523.353z M484.898,262.127h-61.989v36.851h57.913v29.674h-57.913v64.848h-36.593
V232.216h98.582V262.127z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

2
site/snippets/header.php
View file

@ -39,7 +39,7 @@
<nav id="nav-highlight">
<ul>
<li><a href="#">Enquêtes</a></li>
<li><a href="/enquetes">Enquêtes</a></li>
<li><a href="#">Impact</a></li>
<li class="soutenir"><a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a></li>
</ul>

7
site/templates/investigation.php
View file

@ -62,18 +62,21 @@
<dt>Date du rapport</dt>
<dd><time datetime="2025-06-10">10 juin 2025</time></dd>
</div>
</dl>
<div class="thumbnail--group">
<div class="thumbnail thumbnail-pdf">
<figure><img src="/assets/images/cover-rapport.png"></figure>
<button class="btn--small"><a href="#">Télégarcher le PDF</a></button>
<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>
<button class="btn--small"><a href="#">Voir la synthèse</a></button>
<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>