Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

static: add CDC logo #79

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

static: add CDC logo #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d3dfd2b
static: add CDC logo
ludovicdmt Feb 26, 2025
c731c78
static: minors corrections
ludovicdmt Feb 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 20 additions & 25 deletions static/assets/sass/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ hr.full-width {
}

.bandeau-logo {
flex: 1; /* 1/3 pour le logo */
flex: 0.3; /* 1/3 pour le logo */
Copy link

@QuentinMadura QuentinMadura Feb 26, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

J'enleverai probablement les commentaires qui sont présents sur les balises CSS :)

text-align: right; /* Aligne le logo à droite */
}

Expand All @@ -139,6 +139,25 @@ hr.full-width {
height: auto; /* Conserve les proportions */
}

/* Bandeau CDC */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ce serait mieux que tu remettes ces zones de textes lignes 311 et suivantes, cela permet de mieux voir les différences.

Là ce n’est pas faisable de relire facilement les modifications effectuées.

.bandeau-cdc {
background-color: #efefed; /* Couleur de fond légèrement grise */
padding: 40px 20px; /* Espacement interne */
}

.bandeau-cdc .bandeau-logo {
text-align: left; /* Logo aligné à gauche */
flex: 0.3; /* 1/3 pour le logo */
}
.bandeau-cdc .bandeau-text {
flex: 2; /* 2/3 pour le texte */
font-family: $main-font, Arial, sans-serif;
font-size: 1.2rem;
line-height: 1.6;
text-align: left;
color: #32312d;
}

/* Bandeau de navigation */
.navbar {
position: relative;
Expand Down Expand Up @@ -308,30 +327,6 @@ hr.full-width {
box-shadow: none; /* Supprime l'ombre */
}

.bandeau-cdc {
background-color: #efefed; /* Couleur de fond légèrement grise */
padding: 40px 20px; /* Espacement interne */
}

.bandeau-cdc .bandeau-content {
display: flex;
flex-wrap: wrap; /* Adapte le contenu sur mobile */
align-items: center; /* Centre verticalement */
justify-content: space-between; /* Équilibre horizontalement */
max-width: 1200px;
margin: 0 auto; /* Centre le contenu */
}

.bandeau-cdc .bandeau-logo {
flex: 1; /* Prend 1/3 de l'espace */
text-align: left; /* Logo aligné à gauche */
}

.bandeau-cdc .bandeau-logo img {
max-width: 150px; /* Limite la taille du logo */
height: auto;
}

.discord-button:hover {
background-color: $darkGreen; /* Changement de couleur au survol */
color: $white; /* Maintient le texte blanc */
Expand Down
4 changes: 2 additions & 2 deletions static/data/team.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
function: TelesCoop
portrait: max.png
- name: David Parent
title: Responsable de Erasme
title: Responsable de ERASME
function: ERASME
portrait: parent.png
- name: Geoffrey Dorne
Expand All @@ -20,7 +20,7 @@
portrait: ludo.png
- name: Patrick Vincent
title: Directeur de projet
function: Erasme
function: ERASME
portrait: vinc.png
- name: Natacha Salmeron
title: Geomaticienne
Expand Down
203 changes: 110 additions & 93 deletions static/layouts/_default/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,80 +27,81 @@
<a href="https://carte.iarbre.fr/" target="_blank" rel="noopener noreferrer">
<img src="/images/mockup.jpg" alt="Mockup du projet IA.rbre" />
</a>
</section>

<section class="content">
<div class="split-section reversed-section">
<div class="left">
<img src="/images/telescoop.png" alt="Logo TelesCoop" />
</div>
<div class="right">
<div class="text">
{{ with .Resources.GetMatch "telescoop.md" }} {{ .Content }} {{ end }}
</div>
<section class="content">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(Semi détail) Je l’avais pas indiqué dans la précédente MR sur le site static, mais là encore on a des différences uniquement de tabulation.

Est-ce que le linter est bien configuré ? 

(cela pourrit bien l’historique git car c’est compliqué de voir quelles modifs ont été réellement effectuées)

<div class="split-section reversed-section">
<div class="left">
<img src="/images/telescoop.png" alt="Logo TelesCoop" />
</div>
<div class="right">
<div class="text">
{{ with .Resources.GetMatch "telescoop.md" }} {{ .Content }} {{ end }}
</div>
</div>
</section>
</div>
</section>

<hr class="full-width" />
<hr class="full-width" />

<section class="content">
<div class="split-section reversed-section">
<div class="left">
<img
src="/images/part.png"
alt="Logo partenaires"
class="logo-partners"
/>
</div>
<div class="right">
<div class="text">
<p>
— Le <strong>consortium IA.rbre</strong> vise à développer des
outils pour la <strong>végétalisation</strong> et l’<strong
>adaptation au changement climatique</strong
>, en collaboration avec la
<a href="https://www.grandlyon.com" target="_blank"
><strong>Métropole de Lyon</strong></a
>, le
<a href="https://liris.cnrs.fr" target="_blank"
><strong>laboratoire LIRIS</strong></a
>
et d'autres partenaires. Le laboratoire
<a href="https://www.erasme.org" target="_blank"
><strong>Erasme</strong></a
>
joue un rôle clé en coordonnant des projets de
<strong>co-développement</strong> pour pérenniser et généraliser les
innovations publiques.
</p>
<section class="content">
<div class="split-section reversed-section">
<div class="left">
<img
src="/images/part.png"
alt="Logo partenaires"
class="logo-partners"
/>
</div>
<div class="right">
<div class="text">
<p>
— Le <strong>consortium IA.rbre</strong> vise à développer des outils
pour la <strong>végétalisation</strong> et l’<strong
>adaptation au changement climatique</strong
>, en collaboration avec la
<a href="https://www.grandlyon.com" target="_blank"
><strong>Métropole de Lyon</strong></a
>, le
<a href="https://liris.cnrs.fr" target="_blank"
><strong>laboratoire LIRIS</strong></a
>
et d'autres partenaires. Le laboratoire
<a href="https://www.erasme.org" target="_blank"
><strong>Erasme</strong></a
>
joue un rôle clé en coordonnant des projets de
<strong>co-développement</strong> pour pérenniser et généraliser les
innovations publiques.
</p>

<p>
Ces outils permettent une meilleure <strong>analyse</strong> et
<strong>visualisation des données</strong>, répondant aux enjeux de
<strong>résilience urbaine</strong>. Le projet reflète une dynamique
collective d'<strong>innovation ouverte</strong> et d’adaptation aux
politiques publiques complexes.
</p>
</div>
<p>
Ces outils permettent une meilleure <strong>analyse</strong> et
<strong>visualisation des données</strong>, répondant aux enjeux de
<strong>résilience urbaine</strong>. Le projet reflète une dynamique
collective d'<strong>innovation ouverte</strong> et d’adaptation aux
politiques publiques complexes.
</p>
</div>
</div>
</section>
</div>
</section>

<section class="discord-section">
<div class="discord-container">
<p>
<strong
>Pour suivre l’évolution du projet et participer aux discussions,
inscrivez-vous aux actualités !</strong
>
</p>
<a href="#" target="_blank" class="discord-button"
>Je m’inscris par e-mail</a
<section class="discord-section">
<div class="discord-container">
<p>
<strong
>Pour suivre l’évolution du projet et participer aux discussions,
inscrivez-vous aux actualités !</strong
>
</div>
</section>
</p>
<a href="#" target="_blank" class="discord-button"
>Je m’inscris par e-mail</a
>
</div>
</section>

<!-- Section des partenaires
<!-- Section des partenaires
<section class="partenaires">
<h2>Partenaires</h2>
<div class="logos">
Expand All @@ -113,38 +114,54 @@ <h2>Partenaires</h2>
</div>
</section> -->

<section class="team">
<h2>Équipe du projet</h2>
<div class="team-grid">
{{ range $member := .Site.Data.team }}
<div class="team-member">
<img
src="/images/{{ $member.portrait }}"
alt="Photo de {{ $member.name }}"
/>
<h3>{{ $member.name }}</h3>
<p class="title">{{ $member.title}}</p>
<p class="function">{{ $member.function }}</p>
</div>
{{ end}}
<section class="team">
<h2>Équipe du projet</h2>
<div class="team-grid">
{{ range $member := .Site.Data.team }}
<div class="team-member">
<img
src="/images/{{ $member.portrait }}"
alt="Photo de {{ $member.name }}"
/>
<h3>{{ $member.name }}</h3>
<p class="title">{{ $member.title}}</p>
<p class="function">{{ $member.function }}</p>
</div>
</section>
{{ end}}
</div>
</section>

<section class="bandeau-2030">
<div class="bandeau-content">
<div class="bandeau-text">
<p>
#France2030 est un plan ambitieux doté de 54 milliards d’euros visant
à transformer durablement les secteurs clés de l’économie française
par l’innovation, en soutenant des projets décarbonés et portés par
des acteurs émergens pour positionner la France comme leader mondial
des technologies et industries du futur.
</p>
</div>
<div class="bandeau-logo">
<img src="/images/2030.png" alt="Logo 2030" />
</div>
<section class="bandeau-2030">
<div class="bandeau-content">
<div class="bandeau-text">
<p>
#France2030 est un plan ambitieux doté de 54 milliards d’euros visant à
transformer durablement les secteurs clés de l’économie française par
l’innovation, en soutenant des projets décarbonés et portés par des
acteurs émergens pour positionner la France comme leader mondial des
technologies et industries du futur.
</p>
</div>
<div class="bandeau-logo">
<img src="/images/2030.png" alt="Logo 2030" />
</div>
</section>
</div>
</section>

<section class="bandeau-cdc">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

En fait, t’as ajouté seulement ça non ? 

<div class="bandeau-content">
<div class="bandeau-logo">
<img src="/images/cdc.png" alt="Logo Caisse des Dépôts" />
</div>
<div class="bandeau-text">
<p>
Ce projet est financé par la <strong>Caisse des Dépôts</strong>, un
acteur majeur de la transition écologique et du développement des
territoires. Découvrez plus sur leur engagement
<a href="https://www.caissedesdepots.fr/" target="_blank">ici</a>.
</p>
</div>
</div>
</section>

{{ end}}