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

newsletter apage
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-26 17:02:34 +01:00
parent e7da4d77b5
commit 20bdf428e4
25 changed files with 648 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

3
assets/css/components/_bottom-bar.scss
View file

@ -55,6 +55,9 @@
.icon{
transform: rotate(-90deg);
transform-origin: center;
svg{
fill: var(--color-txt);
}
}
}

2
assets/css/components/_buttons.scss
View file

@ -366,6 +366,7 @@ fill: var(--color-txt-light);
display: flex;
align-items: center;
gap: 1ch;
text-decoration: none;
}
.text{
@ -390,6 +391,7 @@ fill: var(--color-txt-light);
svg{
width: 12px;
height: 12px;
fill: var(--color-txt);
}
}

37
assets/css/components/_dl-table.scss Normal file
View file

@ -0,0 +1,37 @@
.dl-table {
margin-top: calc(var(--spacing) * 1.5);
border-bottom: var(--border-light);
max-width: var(--max-w-content);
max-width: var(--max-w-cards);
margin-inline: auto;
font-size: var(--fs-normal);
@media #{$small} {
font-size: var(--fs-small);
}
.dl__group {
@include grid-content();
column-gap: 1ch;
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;
}
}
a:hover{
opacity: 0.8;
}
}

112
assets/css/components/_newsletter-form.scss Normal file
View file

@ -0,0 +1,112 @@
.form__newsletter {
margin-top: calc(var(--spacing)*2);
--size: 24px;
position: relative;
display: flex;
align-items: center;
position: relative;
max-width: var(--max-w-content);
margin-inline: auto;
}
.form__newsletter input[type=email] {
height: calc(var(--h-block) * 1.5);
width: 100%;
border-radius: calc(var(--h-block) * 0.75);
outline: none;
border: none;
padding: 0 2ch;
font-family: var(--font);
font-size: var(--fs-normal);
z-index: 40;
padding-top: 4px;
border: 1px solid var(--color-txt);
background-color: white;
font-family: var(--font);
font-size: var(--fs-normal);
font-weight: 500;
color: black;
&::-moz-placeholder,
&::placeholder {
font-family: var(--font);
font-size: var(--fs-normal);
font-weight: 500;
color: black!important;
}
}
.form__newsletter input[type=email]:focus {
outline: 3px solid var(--grey-400);
}
.form__newsletter button[type=submit] {
position: absolute;
right: 2px;
z-index: 100;
--size: calc(var(--h-block)*1.5 - 4px);
font-family: var(--font);
font-size: var(--fs-button-bold);
height: var(--size);
display: flex;
align-items: center;
gap: 0.75ch;
color: var(--color-accent);
font-weight: var(--fw-medium);
text-decoration: none;
cursor: pointer;
}
.form__newsletter button[type=submit] .icon,
.form__newsletter button[type=submit] .txt {
z-index: 10;
}
.form__newsletter button[type=submit] .icon {
width: var(--size);
height: var(--size);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-bg);
text-align: center;
}
.form__newsletter button[type=submit] .icon svg {
fill: var(--color-bg);
width: 80%;
}
.form__newsletter button[type=submit] .txt {
position: relative;
top: 2px;
font-size: var(--fs-normal);
display: none;
padding-left: 1ch;
}
.form__newsletter button[type=submit]::after {
content: "";
display: block;
background-color: var(--color-accent);
border-radius: calc(var(--size) / 2);
width: var(--size);
height: var(--size);
position: absolute;
right: 0;
z-index: 0;
transition: width 0.2s;
}
.form__newsletter button[type=submit]:hover .txt {
color: var(--color-bg);
display: block;
}
.form__newsletter button[type=submit]:hover::after {
width: 100%;
}
[data-template="newsletter"]{
.details p{
font-size: var(--fs-xsmall);
margin-top: calc(var(--spacing)*1);
}
}

4
assets/css/partials/_main-layout.scss
View file

@ -14,8 +14,8 @@ body{
padding-top: var(--header-h);
padding-bottom: calc(var(--spacing)*6);
min-height: 100dvh;
min-height: 100vh;
// min-height: 100dvh;
// min-height: 100vh;
.page__content{
max-width: var(--max-w-cards);

211
assets/css/style.css
View file

@ -674,6 +674,7 @@ button:disabled {
display: flex;
align-items: center;
gap: 1ch;
text-decoration: none;
}
#btn--back-to-top .text {
font-size: var(--fs-small);
@ -695,6 +696,7 @@ button:disabled {
#btn--back-to-top .icon svg {
width: 12px;
height: 12px;
fill: var(--color-txt);
}
#btn--back-to-top:hover {
opacity: 0.8;
@ -2461,6 +2463,43 @@ figcaption, .caption {
box-shadow: 1px 1px 1px hsla(0, 50%, 2%, 0.5);
}
.dl-table {
margin-top: calc(var(--spacing) * 1.5);
border-bottom: var(--border-light);
max-width: var(--max-w-content);
max-width: var(--max-w-cards);
margin-inline: auto;
font-size: var(--fs-normal);
}
@media screen and (max-width: 768px) {
.dl-table {
font-size: var(--fs-small);
}
}
.dl-table .dl__group {
display: grid;
grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr;
position: relative;
-moz-column-gap: 1ch;
column-gap: 1ch;
border-top: var(--border-light);
padding: calc(var(--spacing) * 0.5) 0;
}
.dl-table dt {
color: var(--color-txt-light);
padding-right: 1ch;
}
.dl-table ul:not(.keywords) {
list-style: none;
}
.dl-table ul:not(.keywords) li {
padding-bottom: 0.2em;
}
.dl-table a:hover {
opacity: 0.8;
}
#bottom-bar {
position: fixed;
left: 0;
@ -2519,6 +2558,9 @@ figcaption, .caption {
transform: rotate(-90deg);
transform-origin: center;
}
#bottom-bar .btn--back-to-top .icon svg {
fill: var(--color-txt);
}
#bottom-bar .title-group {
font-size: var(--fs-small);
display: flex;
@ -2563,6 +2605,124 @@ figcaption, .caption {
}
}
.form__newsletter {
margin-top: calc(var(--spacing) * 2);
--size: 24px;
position: relative;
display: flex;
align-items: center;
position: relative;
max-width: var(--max-w-content);
margin-inline: auto;
}
.form__newsletter input[type=email] {
height: calc(var(--h-block) * 1.5);
width: 100%;
border-radius: calc(var(--h-block) * 0.75);
outline: none;
border: none;
padding: 0 2ch;
font-family: var(--font);
font-size: var(--fs-normal);
z-index: 40;
padding-top: 4px;
border: 1px solid var(--color-txt);
background-color: white;
font-family: var(--font);
font-size: var(--fs-normal);
font-weight: 500;
color: black;
}
.form__newsletter input[type=email]::-moz-placeholder {
font-family: var(--font);
font-size: var(--fs-normal);
font-weight: 500;
color: black !important;
}
.form__newsletter input[type=email]::-moz-placeholder, .form__newsletter input[type=email]::placeholder {
font-family: var(--font);
font-size: var(--fs-normal);
font-weight: 500;
color: black !important;
}
.form__newsletter input[type=email]:focus {
outline: 3px solid var(--grey-400);
}
.form__newsletter button[type=submit] {
position: absolute;
right: 2px;
z-index: 100;
--size: calc(var(--h-block)*1.5 - 4px);
font-family: var(--font);
font-size: var(--fs-button-bold);
height: var(--size);
display: flex;
align-items: center;
gap: 0.75ch;
color: var(--color-accent);
font-weight: var(--fw-medium);
text-decoration: none;
cursor: pointer;
}
.form__newsletter button[type=submit] .icon,
.form__newsletter button[type=submit] .txt {
z-index: 10;
}
.form__newsletter button[type=submit] .icon {
width: var(--size);
height: var(--size);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-bg);
text-align: center;
}
.form__newsletter button[type=submit] .icon svg {
fill: var(--color-bg);
width: 80%;
}
.form__newsletter button[type=submit] .txt {
position: relative;
top: 2px;
font-size: var(--fs-normal);
display: none;
padding-left: 1ch;
}
.form__newsletter button[type=submit]::after {
content: "";
display: block;
background-color: var(--color-accent);
border-radius: calc(var(--size) / 2);
width: var(--size);
height: var(--size);
position: absolute;
right: 0;
z-index: 0;
transition: width 0.2s;
}
.form__newsletter button[type=submit]:hover .txt {
color: var(--color-bg);
display: block;
}
.form__newsletter button[type=submit]:hover::after {
width: 100%;
}
[data-template=newsletter] .details p {
font-size: var(--fs-xsmall);
margin-top: calc(var(--spacing) * 1);
}
#support-bar {
height: var(--header-h);
background-color: var(--color-accent);
@ -2981,8 +3141,6 @@ body main {
padding: 0 var(--padding-body);
padding-top: var(--header-h);
padding-bottom: calc(var(--spacing) * 6);
min-height: 100dvh;
min-height: 100vh;
}
body main .page__content {
max-width: var(--max-w-cards);
@ -3233,6 +3391,22 @@ main .page__header ul.details li:hover {
}
}
[data-template=newsletter] .page__header,
[data-template=about] .page__header,
[data-template=privacy-policy] .page__header,
[data-template=legal-notices] .page__header {
border-bottom: none;
padding-bottom: 0px;
}
[data-template=newsletter] .page__header .page__title,
[data-template=about] .page__header .page__title,
[data-template=privacy-policy] .page__header .page__title,
[data-template=legal-notices] .page__header .page__title {
text-align: center;
border-bottom: var(--border-medium);
padding-bottom: calc(var(--spacing) * 0.5);
}
[data-template=investigation] main {
position: relative;
}
@ -3259,39 +3433,6 @@ main .page__header ul.details li:hover {
margin-bottom: calc(var(--spacing) * 2);
}
}
[data-template=investigation] main #investigation__dl {
margin-top: calc(var(--spacing) * 1.5);
border-bottom: var(--border-light);
max-width: var(--max-w-content);
max-width: var(--max-w-cards);
margin-inline: auto;
font-size: var(--fs-normal);
}
@media screen and (max-width: 768px) {
[data-template=investigation] main #investigation__dl {
font-size: var(--fs-small);
}
}
[data-template=investigation] main #investigation__dl .dl__group {
display: grid;
grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr;
position: relative;
-moz-column-gap: 1ch;
column-gap: 1ch;
border-top: var(--border-light);
padding: calc(var(--spacing) * 0.5) 0;
}
[data-template=investigation] main #investigation__dl dt {
color: var(--color-txt-light);
padding-right: 1ch;
}
[data-template=investigation] main #investigation__dl ul:not(.keywords) {
list-style: none;
}
[data-template=investigation] main #investigation__dl ul:not(.keywords) li {
padding-bottom: 0.2em;
}
#investigation__content {
padding-top: calc(var(--spacing) * 4);

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

File diff suppressed because one or more lines are too long

3
assets/css/style.scss
View file

@ -28,9 +28,12 @@
@import "components/card-open-graph";
@import "components/swiper";
@import "components/slider-before-after";
@import "components/dl-table";
@import "components/bottom-bar";
@import "components/newsletter-form";
@import "components/support-bar";
@import "partials/site-header";
@import "partials/site-menu";
@import "partials/site-footer";

36
assets/css/template/_investigation.scss
View file

@ -33,39 +33,6 @@
#investigation__dl {
margin-top: calc(var(--spacing) * 1.5);
border-bottom: var(--border-light);
max-width: var(--max-w-content);
max-width: var(--max-w-cards);
margin-inline: auto;
font-size: var(--fs-normal);
@media #{$small} {
font-size: var(--fs-small);
}
.dl__group {
@include grid-content();
column-gap: 1ch;
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;
}
}
}
@ -77,3 +44,6 @@
}

19
assets/css/template/_page-single.scss
View file

@ -30,3 +30,22 @@
padding-top: 0;
}
}
[data-template="newsletter"],
[data-template="about"],
[data-template="privacy-policy"],
[data-template="legal-notices"]{
.page__header{
border-bottom: none;
padding-bottom: 0px;
.page__title{
text-align: center;
border-bottom: var(--border-medium);
padding-bottom: calc(var(--spacing) * 0.5);
}
}
}

23
site/blueprints/blocks/heading-sub.yml Normal file
View file

@ -0,0 +1,23 @@
name: Titre
icon: title
wysiwyg: true
preview: heading
fields:
level:
label: Niveau
type: toggles
empty: false
default: "h4"
labels: false
options:
- value: h4
icon: h4
text: H4
- value: h5
icon: h5
text: H5
text:
label: Texte
type: writer
inline: true
placeholder: Titre…

16
site/blueprints/pages/about.yml
View file

@ -4,4 +4,20 @@ tabs:
contentTab:
label: Contenu
icon: page
fields:
title:
label: Titre
type: text
required: true
body:
label: Corps
type: blocks
fieldsets:
- heading-sub
- text
- image
- beforeafter
- video
- gallery
- insert
seo: seo/page

13
site/blueprints/pages/contact.yml
View file

@ -3,4 +3,17 @@ title: Contact
tabs:
contentTab:
label: Contenu
icon: page
fields:
title:
label: Titre
type: text
required: true
body:
label: Corps
type: blocks
fieldsets:
- heading
- text
- image
seo: seo/page

33
site/blueprints/pages/legal-notices.yml
View file

@ -3,4 +3,37 @@ title: Mentions légales
tabs:
contentTab:
label: Contenu
icon: page
fields:
title:
label: Titre
type: text
required: true
definitions:
label: Tableau de définitions
help: Affiché sous forme de liste en deux colonnes (terme — définition)
type: structure
fields:
term:
label: Terme
type: text
width: 1/3
definition:
label: Définition
type: writer
width: 2/3
marks:
- bold
- italic
- highlight
- link
nodes:
- bulletList
- orderedList
body:
label: Corps
type: blocks
fieldsets:
- heading-sub
- text
seo: seo/page

30
site/blueprints/pages/newsletter.yml Normal file
View file

@ -0,0 +1,30 @@
title: Newsletter
tabs:
contentTab:
label: Contenu
icon: email
fields:
title:
label: Titre
type: text
required: true
chapo:
label: Chapeau
type: writer
nodes: false
marks:
- bold
- italic
- underline
- link
details:
label: Détails
type: writer
nodes: false
marks:
- bold
- italic
- underline
- link
seo: seo/page

18
site/blueprints/pages/privacy-policy.yml Normal file
View file

@ -0,0 +1,18 @@
title: Politique de confidentialité
tabs:
contentTab:
label: Contenu
icon: page
fields:
title:
label: Titre
type: text
required: true
body:
label: Corps
type: blocks
fieldsets:
- heading-sub
- text
seo: seo/page

10
site/blueprints/site.yml
View file

@ -5,4 +5,14 @@ tabs:
label: Contenu
sections:
investigations: fields/investigations
legal:
type: pages
label: Pages légales
templates:
- legal-notices
- privacy-policy
- newsletter
layout: list
text: "{{ page.title }}"
create: false
seo: seo/site

18
site/config/menu.php
View file

@ -93,6 +93,24 @@ return [
return Str::contains($path, 'pages/mentions-legales');
}
],
'newsletter' => [
'label' => 'Newsletter',
'icon' => 'email',
'link' => 'pages/newsletter',
'current' => function (string $current): bool {
$path = Kirby\Cms\App::instance()->path();
return Str::contains($path, 'pages/newsletter');
}
],
'privacy-policy' => [
'label' => 'Politique de confidentialité',
'icon' => 'lock',
'link' => 'pages/politique-de-confidentialite',
'current' => function (string $current): bool {
$path = Kirby\Cms\App::instance()->path();
return Str::contains($path, 'pages/politique-de-confidentialite');
}
],
'-',
'database' => [
'label' => 'Bases de données',

33
site/snippets/nav.php
View file

@ -15,21 +15,30 @@ de la vérité et de la justice.</p>
</form>
<nav>
<nav id="nav-pages">
<ul>
<li><a href="<?= page('a-propos')->url() ?>"><?= kirby()->language() && kirby()->language()->code() === 'en' ? 'About' : 'À propos' ?></a></li>
<li><a href="<?= page('enquetes')->url() ?>"><?= t('investigations.title') ?></a></li>
<li><a href="<?= page('packages')->url() ?>"><?= t('packages.title') ?></a></li>
<li><a href="<?= page('impacts')->url() ?>"><?= t('impacts.title') ?></a></li>
<li><a href="<?= page('news')->url() ?>"><?= t('news.title') ?></a></li>
<li><a href="<?= page('ressources')->url() ?>"><?= t('resources.title') ?></a></li>
<li><a href="<?= page('laboratoire')->url() ?>"><?= t('lab.title') ?></a></li>
</ul>
</nav>
<li><a href="#">À propos</a></li> <!-- page à créer -->
<li><a href="/enquêtes">Equêtes</a></li>
<li><a href="/packages">Dossiers</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">À propos</a></li>
<li><a href="#">Ressources</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Mentions légales</a></li>
<li class="support highlight"><a href="#">Soutenez-nous</a></li>
<nav id="nav-aside">
<ul>
<li><a href="<?= page('contact')->url() ?>">Contact</a></li>
<li><a href="<?= page('newsletter')->url() ?>">Newsletter</a></li>
<li class="support highlight"><a href="#">Soutenez-nous</a></li>
</ul>
</nav>
<nav id="nav-legal">
<ul>
<li><a href="<?= page('mentions-legales')->url() ?>"><?= kirby()->language() && kirby()->language()->code() === 'en' ? 'Legal notices' : 'Mentions légales' ?></a></li>
<li><a href="<?= page('politique-de-confidentialite')->url() ?>"><?= kirby()->language() && kirby()->language()->code() === 'en' ? 'Privacy policy' : 'Politique de confidentialité' ?></a></li>
</ul>
</nav>

13
site/templates/about.php
View file

@ -1,4 +1,15 @@
<?php snippet('header') ?>
<main>
<main class="main__single">
<header class="page__header">
<h2 class="page__title"><?= $page->title()->esc() ?></h2>
</header>
<?php if ($page->body()->isNotEmpty()): ?>
<div class="page__content">
<?= $page->body()->toBlocks() ?>
</div>
<?php endif ?>
</main>
<?php snippet('footer') ?>

13
site/templates/contact.php
View file

@ -1,2 +1,15 @@
<?php snippet('header') ?>
<main class="main__single">
<header class="page__header">
<h2 class="page__title"><?= $page->title()->esc() ?></h2>
</header>
<?php if ($page->body()->isNotEmpty()): ?>
<div class="page__content">
<?= $page->body()->toBlocks() ?>
</div>
<?php endif ?>
</main>
<?php snippet('footer') ?>

2
site/templates/investigation.php
View file

@ -62,7 +62,7 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
<dl id="investigation__dl">
<dl class="dl-table" id="investigation__dl">
<?php if ($page->incidentDate()->isNotEmpty()): ?>
<div class="dl__group">
<dt>Date de l'incident</dt>

25
site/templates/legal-notices.php
View file

@ -1,2 +1,27 @@
<?php snippet('header') ?>
<main class="main__single">
<header class="page__header">
<h2 class="page__title"><?= $page->title()->esc() ?></h2>
</header>
<?php $definitions = $page->definitions()->toStructure() ?>
<?php if ($definitions->isNotEmpty()): ?>
<dl class="dl-table" id="legal-notices__dl">
<?php foreach ($definitions as $item): ?>
<div class="dl__group">
<dt><?= $item->term()->esc() ?></dt>
<dd><?= $item->definition() ?></dd>
</div>
<?php endforeach ?>
</dl>
<?php endif ?>
<?php if ($page->body()->isNotEmpty()): ?>
<div class="page__content">
<?= $page->body()->toBlocks() ?>
</div>
<?php endif ?>
</main>
<?php snippet('footer') ?>

39
site/templates/newsletter.php Normal file
View file

@ -0,0 +1,39 @@
<?php snippet('header') ?>
<main class="main__single">
<header class="page__header">
<h2 class="page__title"><?= $page->title()->esc() ?></h2>
</header>
<div class="page__content">
<?php if ($page->chapo()->isNotEmpty()): ?>
<div class="description">
<p><?= $page->chapo() ?></p>
</div>
<?php endif ?>
<form class="form__newsletter">
<input type="email" name="email" placeholder="Votre adresse e-mail" required="">
<button class="btn--newsletter" type="submit" aria-label="s’inscrire">
<span class="txt">S’inscrire</span>
<span class="icon">
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m14.523 18.787s4.501-4.505 6.255-6.26c.146-.146.219-.338.219-.53s-.073-.383-.219-.53c-1.753-1.754-6.255-6.258-6.255-6.258-.144-.145-.334-.217-.524-.217-.193 0-.385.074-.532.221-.293.292-.295.766-.004 1.056l4.978 4.978h-14.692c-.414 0-.75.336-.75.75s.336.75.75.75h14.692l-4.979 4.979c-.289.289-.286.762.006 1.054.148.148.341.222.533.222.19 0 .378-.072.522-.215z" fill-rule="nonzero"></path>
</svg>
</span>
</button>
</form>
<?php if ($page->details()->isNotEmpty()): ?>
<div class="details">
<p><?= $page->details() ?></p>
</div>
<?php endif ?>
</div>
</main>
<?php snippet('footer') ?>

15
site/templates/privacy-policy.php Normal file
View file

@ -0,0 +1,15 @@
<?php snippet('header') ?>
<main class="main__single">
<header class="page__header">
<h2 class="page__title"><?= $page->title()->esc() ?></h2>
</header>
<?php if ($page->body()->isNotEmpty()): ?>
<div class="page__content">
<?= $page->body()->toBlocks() ?>
</div>
<?php endif ?>
</main>
<?php snippet('footer') ?>