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

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

Browse source
This commit is contained in:
Julie Blanc 2026-01-27 23:52:25 +01:00
parent 3836144423
commit 4fee638a93
10 changed files with 342 additions and 143 deletions
Download patch file Download diff file Expand all files Collapse all files

21
assets/css/components/_card-folder.scss
View file

@ -80,19 +80,18 @@
@media #{$x-small}{
display: flex;
flex-direction: column;
padding: calc(var(--padding-inner)*0.5);
// .short{ display: none; }
// @media #{$x-small}{
// display: flex;
// flex-direction: column;
// padding: calc(var(--padding-inner)*0.5);
.content{ display: contents;}
// .content{ display: contents;}
.title{ order: 1; }
figure{ order: 2; }
.short{ order: 3; }
ul{ order: 4; }
}
// .title{ order: 1; }
// figure{ order: 2; }
// .short{ order: 3; }
// ul{ order: 4; }
// }

46
assets/css/components/_swipper.scss
View file

@ -1,53 +1,71 @@
#home__investigations{
#home__investigations {
--slide-padding: 30px;
.swiper-button-prev,
.swiper-button-next{
.swiper-button-next {
--swiper-navigation-size: 32px;
color: var(--color-txt);
background-color: var(--color-bg);
height: 100%;
width: 60px;
width: var(--slide-padding);
// background-color: red;
svg{
svg {
width: 14px;
}
&.swiper-button-disabled {
opacity: 1;
svg{
svg {
opacity: 0.05;
}
}
}
.swiper-button-prev{
.swiper-button-prev {
left: 0px;
top: 0px;
justify-content: flex-start;
}
.swiper-button-next{
.swiper-button-next {
right: 0px;
top: 0px;
justify-content: flex-end;
}
.swiper-slide{
padding-left: 60px;
padding-right: 60px;
.swiper-slide {
padding-left: var(--slide-padding);
padding-right: var(--slide-padding);
}
.swiper-pagination{
.swiper-pagination {
position: relative;
margin-top: calc(var(--spacing)*1);
.swiper-pagination-bullet{
.swiper-pagination-bullet {
width: 15px;
height: 4px;
border-radius: 2px;
background: var(--color-txt-light);
}
.swiper-pagination-bullet-active{
.swiper-pagination-bullet-active {
background: var(--color-txt);
}
}
@media #{$x-small} {
.swiper-button-prev,
.swiper-button-next {
display: none;
}
.swiper-slide {
padding: 0px;
}
}
}

6
assets/css/partials/_page-header.scss
View file

@ -25,9 +25,13 @@
main .page__header {
max-width: var(--max-w-cards);
margin-inline: auto;
margin-top: calc(var(--spacing) * 1);
margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 2);
@media #{$x-small} {
margin-top: calc(var(--spacing) * 2);
}
.page__title {
max-width: var(--max-w-content);

165
assets/css/style.css
View file

@ -1565,28 +1565,6 @@ button.sort[data-sort-type=up] .arrow {
background-color: var(--grey-950);
border-color: var(--color-txt);
}
@media screen and (max-width: 560px) {
.card--folder {
display: flex;
flex-direction: column;
padding: calc(var(--padding-inner) * 0.5);
}
.card--folder .content {
display: contents;
}
.card--folder .title {
order: 1;
}
.card--folder figure {
order: 2;
}
.card--folder .short {
order: 3;
}
.card--folder ul {
order: 4;
}
}
@container cardfolder (width < 680px) {
figure {
@ -1688,13 +1666,16 @@ button.sort[data-sort-type=up] .arrow {
aspect-ratio: inherit;
}
}
#home__investigations {
--slide-padding: 30px;
}
#home__investigations .swiper-button-prev,
#home__investigations .swiper-button-next {
--swiper-navigation-size: 32px;
color: var(--color-txt);
background-color: var(--color-bg);
height: 100%;
width: 60px;
width: var(--slide-padding);
}
#home__investigations .swiper-button-prev svg,
#home__investigations .swiper-button-next svg {
@ -1711,14 +1692,16 @@ button.sort[data-sort-type=up] .arrow {
#home__investigations .swiper-button-prev {
left: 0px;
top: 0px;
justify-content: flex-start;
}
#home__investigations .swiper-button-next {
right: 0px;
top: 0px;
justify-content: flex-end;
}
#home__investigations .swiper-slide {
padding-left: 60px;
padding-right: 60px;
padding-left: var(--slide-padding);
padding-right: var(--slide-padding);
}
#home__investigations .swiper-pagination {
position: relative;
@ -1733,6 +1716,15 @@ button.sort[data-sort-type=up] .arrow {
#home__investigations .swiper-pagination .swiper-pagination-bullet-active {
background: var(--color-txt);
}
@media screen and (max-width: 560px) {
#home__investigations .swiper-button-prev,
#home__investigations .swiper-button-next {
display: none;
}
#home__investigations .swiper-slide {
padding: 0px;
}
}
#site-header {
z-index: var(--z-header);
@ -2003,9 +1995,14 @@ body main {
main .page__header {
max-width: var(--max-w-cards);
margin-inline: auto;
margin-top: calc(var(--spacing) * 1);
margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 2);
}
@media screen and (max-width: 560px) {
main .page__header {
margin-top: calc(var(--spacing) * 2);
}
}
main .page__header .page__title {
max-width: var(--max-w-content);
text-transform: uppercase;
@ -2049,35 +2046,15 @@ main .page__header .description-medium {
}
}
.section--home {
border-bottom: var(--border-light);
}
.section--home .btn--bold-inline {
text-transform: none;
margin-top: calc(var(--spacing) * 1.5);
}
.section--home .btn--bold-inline svg {
width: 12px;
height: 12px;
top: 0px;
}
.section--home .section--inner {
max-width: 1300px;
margin: calc(var(--spacing) * 3) auto;
display: grid;
--gap: calc(var(--padding-body)*2);
grid-template-columns: repeat(2, calc((100% - var(--gap)) * 0.5));
grid-gap: var(--gap);
}
.section--home .col-left {
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.section--home .col-right {
width: 100%;
height: 100%;
}
.section--home .title-section {
font-size: var(--fs-medium);
font-weight: normal;
@ -2086,23 +2063,93 @@ main .page__header .description-medium {
margin-bottom: calc(var(--spacing) * 1);
}
.section--home .description-section {
max-width: 42ch;
font-size: var(--fs-medium);
line-height: 1.1;
margin-bottom: calc(var(--spacing) * 1.5);
}
@media screen and (min-width: 1080px) {
.section--home {
border-bottom: var(--border-light);
}
.section--home .section--inner {
max-width: 1280px;
margin: calc(var(--spacing) * 3) auto;
display: grid;
--gap: calc(var(--padding-body)*2);
grid-template-columns: 1fr 640px;
grid-gap: var(--gap);
}
.section--home .col-left {
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.section--home .col-right {
width: 100%;
height: 100%;
}
}
@media screen and (max-width: 1080px) {
.section--home#home__investigations, .section--home#home__hero {
border-bottom: var(--border-light);
}
.section--home .section--inner {
margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 4);
}
.section--home .col-left {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
margin-bottom: calc(var(--spacing) * 2);
}
.section--home .col-left .title-section {
width: 100%;
}
}
@media screen and (max-width: 560px) {
.section--home .section--inner {
margin-top: calc(var(--spacing) * 2);
margin-bottom: calc(var(--spacing) * 4);
margin-bottom: 0px;
}
.section--home .col-left {
margin-bottom: calc(var(--spacing) * 1.5);
}
.section--home .title-section {
margin-bottom: calc(var(--spacing) * 0.25);
}
.section--home .description-section {
max-width: 42ch;
font-size: var(--fs-normal);
}
.section--home .btn--bold-inline {
color: var(--color-txt-light);
border-color: var(--color-txt-light);
height: calc(var(--h-block) * 0.75);
margin-top: calc(var(--spacing) * 0.75);
}
.section--home .btn--bold-inline a {
padding: 0 1ch;
padding-top: 2px;
}
.section--home .btn--bold-inline svg {
fill: var(--color-txt-light);
}
}
#home__investigations .home-investigations-slider {
max-width: 500px;
height: auto;
}
#home__investigations .card--article {
align-items: flex-start;
justify-content: flex-start;
}
#home__investigations .card--article .time-alone {
display: block;
}
#home__investigations .card--article .description, #home__investigations .card--article .dl, #home__investigations .card--article .pin {
#home__investigations .card--article .description,
#home__investigations .card--article .dl,
#home__investigations .card--article .pin {
display: none;
}
@ -2110,6 +2157,13 @@ main .page__header .description-medium {
margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 3);
}
@media screen and (max-width: 560px) {
#home__hero {
margin-top: calc(var(--spacing) * 2.5);
padding-bottom: calc(var(--spacing) * 1.5);
margin-bottom: 0px;
}
}
#home__hero .section--inner {
display: block;
}
@ -2119,6 +2173,11 @@ main .page__header .description-medium {
line-height: 1.1;
max-width: 26ch;
}
@media screen and (max-width: 560px) {
#home__hero .baseline {
font-size: 34px;
}
}
#home__hero button {
margin-top: calc(var(--spacing) * 1);
}

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

File diff suppressed because one or more lines are too long

194
assets/css/template/_home.scss
View file

@ -1,9 +1,10 @@
.section--home{
border-bottom: var(--border-light);
.section--home {
.btn--bold-inline{
.btn--bold-inline {
text-transform: none;
svg{
margin-top: calc(var(--spacing)*1.5);
svg {
width: 12px;
height: 12px;
top: 0px;
@ -12,31 +13,8 @@
}
.section--inner{
max-width: 1300px;
margin: calc(var(--spacing)*3) auto;
display: grid;
--gap: calc(var(--padding-body)*2);
grid-template-columns: repeat(2, calc((100% - var(--gap))*0.5));
grid-gap: var(--gap);
}
.col-left{
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.col-right{
width: 100%;
height: 100%;
}
.title-section{
.title-section {
font-size: var(--fs-medium);
font-weight: normal;
text-transform: uppercase;
@ -44,28 +22,138 @@
margin-bottom: calc(var(--spacing)*1);
}
.description-section{
.description-section {
max-width: 42ch;
font-size: var(--fs-medium);
line-height: 1.1;
margin-bottom: calc(var(--spacing)*1.5);
}
@media #{$medium-up} {
border-bottom: var(--border-light);
.section--inner {
max-width: 1280px;
margin: calc(var(--spacing)*3) auto;
display: grid;
--gap: calc(var(--padding-body)*2);
grid-template-columns: 1fr 640px;
grid-gap: var(--gap);
}
.col-left {
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.col-right {
width: 100%;
height: 100%;
}
}
@media #{$medium} {
&#home__investigations,
&#home__hero {
border-bottom: var(--border-light);
}
.section--inner {
margin-top: calc(var(--spacing)*3);
margin-bottom: calc(var(--spacing)*4);
}
.col-left {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
margin-bottom: calc(var(--spacing)*2);
.title-section {
width: 100%;
}
}
}
@media #{$x-small} {
.section--inner {
margin-top: calc(var(--spacing)*2);
margin-bottom: calc(var(--spacing)*4);
margin-bottom: 0px;
}
.col-left{
margin-bottom: calc(var(--spacing)*1.5);
}
.title-section {
margin-bottom: calc(var(--spacing)*0.25);
}
.description-section {
max-width: 42ch;
font-size: var(--fs-normal);
}
.btn--bold-inline {
color: var(--color-txt-light);
border-color: var(--color-txt-light);
height: calc(var(--h-block) * 0.75);
// margin: 0 auto;
margin-top: calc(var(--spacing)*0.75);
a {
padding: 0 1ch;
padding-top: 2px;
}
svg {
fill: var(--color-txt-light);
}
}
}
}
#home__investigations{
#home__investigations {
.home-investigations-slider{
.home-investigations-slider {
max-width: 500px;
height: auto;
}
.card--article{
align-items: flex-start;
justify-content: flex-start;
.time-alone{ display: block; }
.description, .dl, .pin{
.card--article {
// align-items: flex-start;
// justify-content: flex-start;
.time-alone {
display: block;
}
.description,
.dl,
.pin {
display: none;
}
}
@ -74,34 +162,44 @@
}
#home__hero{
#home__hero {
margin-top: calc(var(--spacing)*3);
margin-bottom: calc(var(--spacing)*3);
.section--inner{
@media #{$x-small} {
margin-top: calc(var(--spacing)*2.5);
padding-bottom: calc(var(--spacing)*1.5);
margin-bottom: 0px;
}
.section--inner {
display: block;
}
.baseline{
.baseline {
font-family: var(--title);
font-size: 45px;
line-height: 1.1;
max-width: 26ch;
// max-width: var(--max-w-content);
@media #{$x-small} {
font-size: 34px;
}
}
button{
button {
margin-top: calc(var(--spacing)*1);
}
}
#home__folders{
.card--folder{
#home__folders {
.card--folder {
margin-bottom: calc(var(--spacing)*0.5);
}
}

2
site/snippets/header.php
View file

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

2
site/snippets/nav.php
View file

@ -12,7 +12,7 @@ de la vérité et de la justice.</p>
<ul>
<li class="soutenir highlight"><a href="#">Soutenez-nous</a></li>
<li class="highlight"><a href="/enquetes">Enquêtes</a></li>
<li class="highlight"><a href="#">Impact</a></li>
<li class="highlight"><a href="/impacts">Impact</a></li>
<li><a href="/dossiers">Dossiers</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">À propos</a></li>

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

@ -287,32 +287,54 @@ if ($relatedInvestigations->isEmpty()) {
// KIRBY TO DO : récupérer s’il y a un dossier mr
?>
<?php
// Récupérer le dossier associé à cette investigation
$folderSlug = $page->folder()->value();
$folder = null;
if (!empty($folderSlug) && site()->find('dossiers')) {
$folder = site()->find('dossiers')->children()->filterBy('slug', $folderSlug)->first();
}
if ($folder):
?>
<aside class="section__article" id="section__folder">
<h3 class="section__title">Dans le dossier</h3>
<article class="card--folder">
<figure>
<img src="/media/pages/enquetes/l-homicide-de-nahel-merzouk/fe521629d6-1768297341/nahel-visuel1.png">
<?php if ($cover = $folder->cover()->toFile()): ?>
<figure>
<img src="<?= $cover->url() ?>" alt="<?= $folder->title()->esc() ?>">
</figure>
<?php endif ?>
<div class="content">
<h4 class="title"><a href="#"><span class="icon"><?= svg('assets/icons/folder.svg') ?></span>Refus d’optempérer</a></h4>
<h4 class="title"><a href="<?= $folder->url() ?>"><span class="icon"><?= svg('assets/icons/folder.svg') ?></span><?= $folder->title()->esc() ?></a></h4>
<p class="short">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam dolorum inventore itaque excepturi veritatis asperiores? Aliquid officiis reprehenderit sunt fugit dicta repudiandae dolores natus, doloremque illum, nesciunt, exercitationem vitae labore.
</p>
<?php if ($folder->description()->isNotEmpty()): ?>
<p class="short"><?= $folder->description()->excerpt(200) ?></p>
<?php endif ?>
<ul>
<li>4 enquêtes</li>
<li>8 impacts</li>
</ul>
<?php
// Compter les enquêtes associées à ce dossier
$investigationsCount = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($folder) {
return $investigation->folder()->value() === $folder->slug();
})->count();
?>
<ul>
<?php if ($investigationsCount > 0): ?>
<li><?= $investigationsCount ?> enquête<?= $investigationsCount > 1 ? 's' : '' ?></li>
<?php endif ?>
<li>8 impacts</li>
</ul>
</div>
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
<a class="link-block" href="#" target="_blank" aria-hidden="true"></a>
<button class="btn--go-to"><a href="<?= $folder->url() ?>" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
<a class="link-block" href="<?= $folder->url() ?>" target="_blank" aria-hidden="true"></a>
</article>
</aside>
<?php endif ?>

1
site/templates/investigations.php
View file

@ -7,7 +7,6 @@
<div class="description-medium">
<p>
<?= $page->chapo() ?>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto dignissimos, sit dolorum minima vel illo aliquam veniam eos assumenda cum quaerat error consequuntur laborum ipsum.
</p>
</div>
</header>