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

add icon folder
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-27 23:06:29 +01:00
parent d3c5e5c39d
commit 3836144423
7 changed files with 66 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -31,6 +31,15 @@
font-size: var(--fs-normal);
}
.icon{
padding-right: 1ch;
svg{
height: 15px;
width: 15px;
fill: var(--color-txt);
}
}
}
.short{
@ -75,7 +84,6 @@
display: flex;
flex-direction: column;
padding: calc(var(--padding-inner)*0.5);
background-color: yellow;
// .short{ display: none; }
.content{ display: contents;}
@ -93,6 +101,19 @@
@container cardfolder (width < 680px) {
figure{
aspect-ratio: inherit;
width: 100%;
height: 100%;
}
.short{
margin-top: calc(var(--spacing)*0.5);
}
}
@container cardfolder (width < 520px) {
figure{
aspect-ratio: inherit;
@ -103,4 +124,5 @@
font-size: var(--fs-small);
}
}

19
assets/css/style.css
View file

@ -1497,6 +1497,14 @@ button.sort[data-sort-type=up] .arrow {
font-size: var(--fs-normal);
}
}
.card--folder .title .icon {
padding-right: 1ch;
}
.card--folder .title .icon svg {
height: 15px;
width: 15px;
fill: var(--color-txt);
}
.card--folder .short {
display: -webkit-box;
-webkit-line-clamp: 3;
@ -1562,7 +1570,6 @@ button.sort[data-sort-type=up] .arrow {
display: flex;
flex-direction: column;
padding: calc(var(--padding-inner) * 0.5);
background-color: yellow;
}
.card--folder .content {
display: contents;
@ -1581,6 +1588,16 @@ button.sort[data-sort-type=up] .arrow {
}
}
@container cardfolder (width < 680px) {
figure {
aspect-ratio: inherit;
width: 100%;
height: 100%;
}
.short {
margin-top: calc(var(--spacing) * 0.5);
}
}
@container cardfolder (width < 520px) {
figure {
aspect-ratio: inherit;

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

File diff suppressed because one or more lines are too long

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

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.083 4c1.38 1.612 2.578 3 4.917 3h11v13h-20v-16h4.083zm.917-2h-7v20h24v-17h-13c-1.629 0-2.305-1.058-4-3z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 207 B

2
site/templates/folders.php
View file

@ -28,7 +28,7 @@
<div class="content">
<h4 class="title"><a href="<?= $folder->url() ?>"><?= $folder->title()->esc() ?></a></h4>
<h4 class="title"><a href="<?= $folder->url() ?>"><span class="icon"><?= svg('assets/icons/folder.svg') ?></span><?= $folder->title()->esc() ?></a></h4>
<?php if ($folder->description()->isNotEmpty()): ?>
<p class="short"><?= $folder->description()->excerpt(200) ?></p>

31
site/templates/home.php
View file

@ -22,10 +22,13 @@
<div class="section--inner">
<div class="col-left">
<h2 class="title-section">Enquêtes</h2>
<?php $investigationsPage = site()->find('enquetes'); ?>
<h2 class="title-section"><?= $investigationsPage ? $investigationsPage->title() : 'Enquêtes' ?></h2>
<?php if ($investigationsPage && $investigationsPage->chapo()->isNotEmpty()): ?>
<p class="description-section">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum quasi cupiditate iste odio adipisci quae, doloribus quas facilis eaque id labore nam, illum animi. Eaque iusto beatae error consequatur totam.
<?= $investigationsPage->chapo() ?>
</p>
<?php endif ?>
<button class="btn--bold-inline">
<a href="/enquetes">
<span class="text">Voir les enquêtes</span>
@ -57,10 +60,12 @@ foreach ($latestInvestigations as $investigation):
<h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4>
<?php if ($investigation->chapo()->isNotEmpty()): ?>
<p class="description"><?= $investigation->chapo()->excerpt(200) ?></p>
<?php endif ?>
<time class="time-alone" datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time>
</div>
<?php if ($keywords = $investigation->keywords()->split()): ?>
@ -110,12 +115,15 @@ foreach ($latestInvestigations as $investigation):
<div class="section--inner">
<div class="col-left">
<h2 class="title-section">Impacts</h2>
<?php $impactsPage = site()->find('impacts'); ?>
<h2 class="title-section"><?= $impactsPage ? $impactsPage->title() : 'Impacts' ?></h2>
<?php if ($impactsPage && $impactsPage->chapo()->isNotEmpty()): ?>
<p class="description-section">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum quasi cupiditate iste odio adipisci quae, doloribus quas facilis eaque id labore nam, illum animi. Eaque iusto beatae error consequatur totam.
<?= $impactsPage->chapo() ?>
</p>
<?php endif ?>
<button class="btn--bold-inline">
<a href="#">
<a href="/impacts">
<span class="text">Voir les impacts</span>
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
</a>
@ -176,10 +184,13 @@ foreach ($latestInvestigations as $investigation):
<div class="section--inner">
<div class="col-left">
<h2 class="title-section">Dossiers</h2>
<?php $foldersPage = site()->find('dossiers'); ?>
<h2 class="title-section"><?= $foldersPage ? $foldersPage->title() : 'Dossiers' ?></h2>
<?php if ($foldersPage && $foldersPage->chapo()->isNotEmpty()): ?>
<p class="description-section">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum quasi cupiditate iste odio adipisci quae, doloribus quas facilis eaque id labore nam, illum animi. Eaque iusto beatae error consequatur totam.
<?= $foldersPage->chapo() ?>
</p>
<?php endif ?>
<button class="btn--bold-inline">
<a href="/dossiers">
<span class="text">Voir les dossiers</span>
@ -204,7 +215,7 @@ foreach ($latestFolders as $folder):
<?php endif ?>
<div class="content">
<h4 class="title"><a href="<?= $folder->url() ?>"><?= $folder->title()->esc() ?></a></h4>
<h4 class="title"><a href="<?= $folder->url() ?>"><span class="icon"><?= svg('assets/icons/folder.svg') ?></span><?= $folder->title()->esc() ?></a></h4>
<?php if ($folder->description()->isNotEmpty()): ?>
<p class="short"><?= $folder->description()->excerpt(200) ?></p>

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

@ -295,7 +295,7 @@ if ($relatedInvestigations->isEmpty()) {
<img src="/media/pages/enquetes/l-homicide-de-nahel-merzouk/fe521629d6-1768297341/nahel-visuel1.png">
</figure>
<div class="content">
<h4 class="title"><a href="#">Refus d’optempérer</a></h4>
<h4 class="title"><a href="#"><span class="icon"><?= svg('assets/icons/folder.svg') ?></span>Refus d’optempérer</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.