.
+ const a = document.createElement('a');
+ a.setAttribute('href', href);
+ while (subtitle.firstChild) a.appendChild(subtitle.firstChild);
+ subtitle.appendChild(a);
+ }
+ card.dataset.subtitleLinked = 'true';
+ });
+
//
// Home intro : sortir le .more-link (rendu profond par smart_trim)
// de .intro_body pour le placer directement sous .intro_main.
@@ -310,46 +362,6 @@
}
}
- //
- // Sous Menu display on hover
- //
-
- const programLink = document.querySelector("#block-erabletheme-navigationprincipale ul li:first-of-type");
- const programSubmenu = document.querySelector("#block-erabletheme-leprogramme");
- let isSubmenuOpen = false;
-
- function showSubmenu() {
- programLink.classList.add("submenu-open");
- let rect = programLink.getBoundingClientRect();
- programSubmenu.style.top = `${rect.bottom}px`;
- programSubmenu.style.left = `${rect.left}px`;
- programSubmenu.style.display = "block";
-
- programSubmenu.style.display = "block";
- setTimeout(() => {
- programSubmenu.style.maxHeight = "50vh";
- }, 10)
-
- isSubmenuOpen = true;
- }
-
- function hideSubmenu() {
- programLink.classList.remove("submenu-open");
- programSubmenu.style.maxHeight = "0px";
- isSubmenuOpen = false;
- setTimeout(() => {
- if (!isSubmenuOpen) {
- programSubmenu.style.display = "none";
- }
- }, 600);
- }
-
- programLink.addEventListener("mouseenter", showSubmenu);
- programLink.addEventListener("mouseleave", hideSubmenu);
-
- programSubmenu.addEventListener("mouseenter", showSubmenu);
- programSubmenu.addEventListener("mouseleave", hideSubmenu);
-
//
// Aside menu toggle
//
@@ -524,10 +536,10 @@
// map on the projects page
let customIcon = L.icon({
- iconUrl: '/themes/erabletheme/assets/leaf.svg',
- iconSize: [20, 20],
- iconAnchor: [10, 20],
- popupAnchor: [0, -20]
+ iconUrl: '/themes/erabletheme/assets/leaflet-point.svg',
+ iconSize: [18, 18],
+ iconAnchor: [9, 9],
+ popupAnchor: [0, -9]
});
let initiatedMap = document.querySelector(`#${mapid}`);
@@ -581,7 +593,7 @@
const currentMap = document.querySelector('.leaflet-container');
const leafletIcons = document.querySelectorAll('.leaflet-marker-pane img');
for (let icon of leafletIcons) {
- icon.setAttribute('src', '/themes/erabletheme/assets/leaf.svg');
+ icon.setAttribute('src', '/themes/erabletheme/assets/leaflet-point.svg');
}
//
diff --git a/web/themes/erabletheme/scss/_actualites.scss b/web/themes/erabletheme/scss/_actualites.scss
index e6078cf..2e06abf 100644
--- a/web/themes/erabletheme/scss/_actualites.scss
+++ b/web/themes/erabletheme/scss/_actualites.scss
@@ -10,6 +10,17 @@
grid-template-columns: repeat(3, 1fr);
}
}
+
+ // En grille, deux teasers voisins peuvent se toucher : on déplace le
+ // border-bottom fluo de l'article vers le .preview_sous_titre pour qu'il
+ // reste à l'intérieur du teaser (padding de l'article en dessous).
+ // Spécifique à l'index actus — carousel home conserve son trait au bord.
+ .actus_list article.actu-teaser {
+ border-bottom: none;
+ .preview_sous_titre {
+ border-bottom: 7px solid $fluo_green;
+ }
+ }
}
.fullpage {
diff --git a/web/themes/erabletheme/scss/_fullpage.scss b/web/themes/erabletheme/scss/_fullpage.scss
index 0fe85b3..f32a0a7 100644
--- a/web/themes/erabletheme/scss/_fullpage.scss
+++ b/web/themes/erabletheme/scss/_fullpage.scss
@@ -1,8 +1,172 @@
+// En-tête de page placé HORS de la colonne blanche (.fullpage) :
+// "Retour …", , trait, .sous_titre apparaissent directement sur le fond gris.
+// Couleur grisée (text_grey atténué) en cohérence avec les "meta" de la home.
+.layout-content .page-header-outside {
+ padding: 3vh $x_margin 2vh;
+ background: transparent;
+ color: $text_grey;
+ .retour_projets,
+ .retour_actus,
+ .retour_ressources,
+ .retour-meetup {
+ margin-bottom: 1.5rem;
+ a {
+ // Marianne, pas Vogun.
+ font-family: $marianne;
+ font-weight: $fw_bold;
+ font-size: $fs_xs;
+ color: $text_grey;
+ opacity: 0.7;
+ text-decoration: none;
+ &:hover { opacity: 1; }
+ }
+ }
+ // Typo titre harmonisée entre toutes les pages (projets / actus / autres) :
+ // Vogun 36px constant, on retire le bump à 57px du main_title() par défaut.
+ > h2 {
+ font-family: $vogun;
+ font-weight: $fw_medium;
+ font-size: $fs_xl;
+ color: black;
+ line-height: $lh_tight;
+ margin: 0;
+ padding: 0;
+ a { color: inherit; text-decoration: none; }
+ }
+ // Trait de séparation entre titre et sous-titre.
+ > h2 + .sous_titre,
+ > h2 ~ .sous_titre {
+ padding-top: 1.2rem;
+ margin-top: 1.2rem;
+ border-top: 1px solid $text_grey;
+ }
+ .sous_titre {
+ font-family: $vogun;
+ font-weight: $fw_medium;
+ font-size: $fs_lg; // 22px constant sur tous les breakpoints
+ line-height: $lh_tight;
+ color: $text_grey;
+ opacity: 0.7;
+ padding: 0;
+ margin-bottom: 0;
+ }
+ @media (min-width: $breakpoint_tablet) {
+ width: 75vw;
+ margin-left: 12.5vw;
+ margin-top: 5vh;
+ }
+ @media (min-width: $breakpoint_desktop) {
+ width: 50vw;
+ margin-left: 25%;
+ margin-top: 5vh; // identique à tablette, en ligne avec les pages projets
+ }
+}
+
+// Sur les pages d'index (.fullpage.large-container : /projets, /actualites,
+// /meetup), la colonne blanche est plus large. On aligne le .page-header-outside
+// dessus pour que le titre démarre à la même abscisse que le contenu.
+.layout-content .page-header-outside:has(+ .fullpage.large-container) {
+ @media (min-width: $breakpoint_tablet) {
+ width: auto;
+ margin-left: calc(#{$x_margin} * 2.5);
+ margin-right: calc(#{$x_margin} * 2.5);
+ }
+}
+
+// Quand le .page-header-outside est suivi d'une .fullpage (pages SANS
+// sidebar : actus, programme…), on supprime la marge top de .fullpage pour
+// rapprocher la colonne blanche du bloc en-tête.
+// Exceptions :
+// - /ressources : layout hacky (cf. _ressources.scss), on n'y touche pas
+// - articles non-premiers d'une vue (.views-row:not(:first-of-type)) :
+// leur en-tête est masqué donc pas de besoin d'override.
+.layout-content .page-header-outside + .fullpage,
+.layout-content .page-header-outside + article.fullpage {
+ margin-top: 1rem !important;
+ @media (min-width: $breakpoint_tablet) {
+ margin-top: 1rem !important;
+ }
+}
+// Restaurer le margin-top par défaut pour les cas exclus en desktop.
+@media (min-width: $breakpoint_desktop) {
+ .views-row:not(:first-of-type) .page-header-outside + .fullpage,
+ .views-row:not(:first-of-type) .page-header-outside + article.fullpage,
+ .ressources.page-header-outside + .fullpage,
+ .page-header-outside + .ressources,
+ .page-header-outside + article.ressources {
+ margin-top: revert !important;
+ }
+}
+
+// Sur les pages SANS sidebar (mentions-legales, programme, etc.), le
+// ayant été sorti dans .page-header-outside, le contenu peut se retrouver
+// collé au bord supérieur de la colonne (la règle p:first-of-type
+// { margin-top: 7vh } ne matche que si le premier élément est un
).
+// On compense uniquement dans ce contexte.
+main:not(:has(#block-erabletheme-leprogramme-2)):not(:has(#block-erabletheme-views-block-projets-block-1))
+ .layout-content .page-header-outside + .fullpage > .fullpage_content {
+ padding-top: 1.5rem;
+ // Si le premier élément est un
, on neutralise sa marge top par défaut
+ // (sinon elle s'ajoute au padding qu'on vient de poser).
+ p:first-of-type {
+ margin-top: 0;
+ }
+}
+
+// Contexte page projet (sidebar sommaire à gauche, layout en flex row-reverse
+// au niveau du ) : on force le .page-header-outside à occuper toute la
+// largeur AU-DESSUS de la sidebar et de la colonne blanche.
+// Le .page-header-outside est dans .layout-content donc il flotte en
+// position: absolute pour passer par-dessus et on pousse main de padding-top.
+//
+// IMPORTANT : on ne cible QUE les .page-header-outside enfants DIRECTS de
+// .layout-content (pages node-like : projet, programme, taxonomy). Sur
+// /ressources la sidebar est aussi présente mais le .page-header-outside
+// est imbriqué dans une .views-row — on le laisse en flux normal.
+main:has(#block-erabletheme-leprogramme-2),
+main:has(#block-erabletheme-views-block-projets-block-1) {
+ @media (min-width: $breakpoint_tablet) {
+ position: relative;
+ // Le .page-header-outside passe en position absolute, sauf s'il est
+ // imbriqué dans une .views-row (cas /ressources, layout hacky : on laisse
+ // en flux normal et on compense via _ressources.scss).
+ .layout-content .page-header-outside:not(.views-row .page-header-outside) {
+ position: absolute;
+ top: 3vh;
+ left: 0;
+ right: 0;
+ width: auto !important;
+ margin: 0 !important;
+ padding-left: 14vw;
+ padding-right: 40vw;
+ @media (min-width: $breakpoint_desktop) {
+ padding-left: 15vw;
+ padding-right: 40vw;
+ }
+ }
+ }
+ // Réserver la place du header-outside uniquement quand il est en absolute
+ // (= pas dans une .views-row). Sinon padding-top normal.
+ @media (min-width: $breakpoint_tablet) {
+ &:has(.layout-content .page-header-outside:not(.views-row .page-header-outside)) {
+ padding-top: calc(var(--page-header-outside-h, 18vh) + 4vh);
+ // Le padding-top de réserve déjà la place du header-outside.
+ // On annule les marges top de la sidebar et de la colonne blanche
+ // pour qu'elles démarrent juste en dessous (pas de double espacement).
+ .fullpage,
+ aside.layout-sidebar-first {
+ margin-top: 0 !important;
+ }
+ }
+ }
+}
+
.layout-content .fullpage {
margin-bottom: 10vh;
padding-top: 3vh;
padding-bottom: 3vh;
background-color: white;
+ border-bottom: 7px solid $fluo_green;
position: relative;
h2 {
margin-top: 5vh !important;
@@ -50,6 +214,10 @@
@include fluo_button();
a {
display: inline-block;
+ // En mobile, ces liens sont en flux normal dans la colonne blanche,
+ // donc on contraste leur fond en gris pâle (en desktop ils sont
+ // position: fixed sur fond gris, on garde le fond blanc d'origine).
+ background-color: $page_bg;
}
@media (min-width: $breakpoint_desktop) {
//margin-bottom: 0 !important;
@@ -62,6 +230,7 @@
}
a {
max-width: calc(25vw - $x_margin * 2);
+ background-color: white;
}
}
}
@@ -158,21 +327,27 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) {
}
padding: 1.5rem;
background-color: white;
+ border-bottom: 7px solid $fluo_green;
margin-left: 2vw;
> h2 {
padding-bottom: 1rem;
- border-bottom: solid 1px $teal;
+ border-bottom: solid 1px $fluo_green;
display: flex;
justify-content: space-between;
cursor: pointer;
- @include sous_titre();
+ // Titre sidebar : Vogun brand color, plus grand.
+ font-family: $vogun;
+ font-weight: $fw_medium;
+ font-size: $fs_lg;
+ color: $fluo_green;
+ line-height: $lh_tight;
> div {
mask-image: url('/themes/erabletheme/assets/icons/arrow-down-s-line.svg');
background-size: contain;
- background-color: $teal;
+ background-color: $fluo_green;
width: 1.3rem;
height: 1.3rem;
- color: $teal;
+ color: $fluo_green;
transform: rotate(0deg);
transition: transform 0.3s ease;
&.closed {
@@ -189,14 +364,17 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) {
> li,
.views-row {
margin: 1rem 0;
- @include main_text_content();
-
+ // Items sidebar : Vogun, item actif en brand color (pas gras).
a {
- color: black;
+ font-family: $vogun;
+ font-weight: $fw_regular;
font-size: $fs_sm;
+ color: black;
+ line-height: $lh_normal;
&:hover,
&.is-active {
- font-weight: 800;
+ font-weight: $fw_regular;
+ color: $fluo_green;
}
}
}
diff --git a/web/themes/erabletheme/scss/_gouvernance.scss b/web/themes/erabletheme/scss/_gouvernance.scss
index cab78da..3101522 100644
--- a/web/themes/erabletheme/scss/_gouvernance.scss
+++ b/web/themes/erabletheme/scss/_gouvernance.scss
@@ -49,15 +49,24 @@
}
}
- > .prenom,
- > .nom {
+ // Prénom + nom regroupés via le template paragraph--membre-equipe.html.twig.
+ // Même typo que sur les pages projets (Marianne regular, $fs_md).
+ > .nom-prenom {
align-self: flex-end;
margin-bottom: 2vh;
- @include sous_titre();
- }
-
- > .nom > div {
- padding-left: 0.5rem;
+ display: flex;
+ flex-wrap: wrap;
+ column-gap: 0.3rem;
+ color: black;
+ font-family: $marianne;
+ font-weight: $fw_regular;
+ font-size: $fs_md;
+ line-height: $lh_normal;
+ > .prenom,
+ > .nom {
+ margin: 0;
+ padding: 0;
+ }
}
> .texte {
@@ -76,7 +85,7 @@
border-radius: 5vw;
}
- > .prenom {
+ > .nom-prenom {
padding-left: 3vw;
}
@@ -98,15 +107,12 @@
height: 7vw;
}
}
- > .prenom,
- > .nom {
+ > .nom-prenom {
margin-top: 0.8rem;
align-self: start;
padding: 0 !important;
grid-row: 2 / 2;
- }
- > .prenom {
- justify-self: end;
+ grid-column: 1 / 3;
}
> .texte {
grid-column: 1 / 3;
diff --git a/web/themes/erabletheme/scss/_home.scss b/web/themes/erabletheme/scss/_home.scss
index f92fa77..9d123c8 100644
--- a/web/themes/erabletheme/scss/_home.scss
+++ b/web/themes/erabletheme/scss/_home.scss
@@ -34,8 +34,18 @@
width: 40vw;
max-width: 14rem;
height: auto;
- @media (min-width: $breakpoint_desktop) {
- width: 100%;
+ }
+ // Desktop : le logo se cale sur la hauteur du texte de présentation
+ // (la colonne logo s'étire à la hauteur de la ligne grid).
+ @media (min-width: $breakpoint_desktop) {
+ align-self: stretch;
+ align-items: center;
+ img {
+ width: auto;
+ max-width: 100%;
+ height: 100%;
+ max-height: 100%;
+ object-fit: contain;
}
}
}
diff --git a/web/themes/erabletheme/scss/_meetup.scss b/web/themes/erabletheme/scss/_meetup.scss
index 0247ad4..0d0c57f 100644
--- a/web/themes/erabletheme/scss/_meetup.scss
+++ b/web/themes/erabletheme/scss/_meetup.scss
@@ -1,3 +1,8 @@
+// Wrapper config_pages (bandeau d'intro de la page meetup).
+.config_pages--type--meetup {
+ padding-top: 1.5rem;
+}
+
.fullpage.meetup {
> h2 {
border-bottom: solid 1px $teal;
@@ -20,8 +25,10 @@
width: calc(75% - $x_margin * 2);
}
}
+ // Bouton "Déposer mon offre" : texte gris foncé (et icônes ::before /
+ // ::after) au repos, noir au survol. Fond brand conservé.
> div:last-of-type {
- background-color: $teal;
+ background-color: $fluo_green;
width: 60%;
margin-left: calc(40% - $x_margin);
margin-top: 4vh;
@@ -42,26 +49,28 @@
height: 100%;
display: block;
font-weight: 800;
- color: white;
+ color: $text_grey;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
transform: translateY(0);
- transition: transform 0.2s ease-out;
+ transition: color 0.2s ease-out, transform 0.2s ease-out;
@media (min-width: $breakpoint_tablet) {
padding: 1rem 0.5rem;
}
}
> a::after {
content: "\2003 →";
+ color: $text_grey;
+ transition: color 0.2s ease-out;
}
> a::before {
content: "+";
aspect-ratio: 1/1;
text-decoration: none !important;
- color: white;
- border: solid 1px white;
+ color: $text_grey;
+ border: solid 1px $text_grey;
width: 1.8rem;
height: 1.8rem;
border-radius: 1.5rem;
@@ -71,6 +80,7 @@
align-items: center;
margin-right: 0.6rem;
padding-bottom: 5px;
+ transition: color 0.2s ease-out, border-color 0.2s ease-out;
@media (min-width: $breakpoint_tablet) {
padding-bottom: 10px;
width: 3rem;
@@ -80,10 +90,22 @@
}
> a:hover {
transform: translateY(-2px);
+ color: black;
+ &::after { color: black; }
+ &::before { color: black; border-color: black; }
}
}
}
}
+ // Form de filtre meetup.
+ .js-form-item {
+ padding-left: 0;
+ }
+ // Bouton submit "Appliquer".
+ input.form-submit,
+ .form-submit {
+ padding: 0.5rem 1.2rem;
+ }
> .meetup_list {
display: grid;
margin: 3vh $x_margin;
@@ -163,7 +185,7 @@
grid-row: 2/3;
color: black;
text-transform: uppercase;
- font-weight: 800;
+ font-weight: $fw_regular;
//display: none;
}
> a.offre-title {
@@ -172,8 +194,11 @@
> h2 {
margin: unset;
padding: unset;
- font-weight: 800;
margin-top: 0 !important;
+ font-family: $vogun;
+ font-weight: $fw_medium;
+ font-size: $fs_lg;
+ line-height: $lh_tight;
}
}
> p.address {
@@ -250,11 +275,15 @@
}
> .offre-content {
> div {
- border-top: solid 1px $teal;
padding-top: 4vh;
margin-left: $x_margin;
margin-right: $x_margin;
width: calc(100% - $x_margin * 2);
+ // Méta de l'offre : occupation + address en gris foncé.
+ .occupation,
+ .address {
+ color: $text_grey;
+ }
> div > div > div {
display: grid;
grid-template-columns: 0.3fr 1fr 1fr;
@@ -412,6 +441,9 @@
@include fluo_button();
a {
display: inline-block;
+ // Mobile : bouton sur fond gris (colonne blanche).
+ // Desktop : repasse en blanc (position: fixed sur fond gris).
+ background-color: $page_bg;
}
@media (min-width: $breakpoint_desktop) {
text-align: right;
@@ -425,6 +457,7 @@
}
a {
max-width: calc(25vw - $x_margin * 2);
+ background-color: white;
}
}
}
@@ -441,6 +474,8 @@
@include fluo_button();
a {
display: inline-block;
+ // Mobile : bouton sur fond gris (colonne blanche).
+ background-color: $page_bg;
}
@media (min-width: $breakpoint_desktop) {
text-align: right;
@@ -454,6 +489,7 @@
}
a {
max-width: calc(25vw - $x_margin * 2);
+ background-color: white;
}
}
}
diff --git a/web/themes/erabletheme/scss/_partenaires.scss b/web/themes/erabletheme/scss/_partenaires.scss
index a54be56..3509c21 100644
--- a/web/themes/erabletheme/scss/_partenaires.scss
+++ b/web/themes/erabletheme/scss/_partenaires.scss
@@ -66,6 +66,8 @@
padding-bottom: 2rem;
margin-top: 1rem;
@include fluo_button();
+ // Fond carte = blanc, on contraste le CTA en gris pâle.
+ a { background-color: $page_bg; }
}
}
diff --git a/web/themes/erabletheme/scss/_projets.scss b/web/themes/erabletheme/scss/_projets.scss
index a363a16..9756ba0 100644
--- a/web/themes/erabletheme/scss/_projets.scss
+++ b/web/themes/erabletheme/scss/_projets.scss
@@ -1,6 +1,9 @@
.layout-content .fullpage.projets {
padding-top: 5vh;
> .intro_map {
+ // Le bloc carte (block--sitesmap-block) est partagé avec l'accueil.
+ // Ici on n'affiche pas le CTA "Voir les projets" : on est déjà sur l'index.
+ footer.fluo_links { display: none; }
@media (min-width: $breakpoint_desktop) {
display: flex;
flex-direction: row;
@@ -52,6 +55,8 @@
//width: 85%;
}
#popup {
+ // Cohérence visuelle avec la home : tooltip sur fond gris pâle.
+ background-color: $page_bg;
h3 {
@include sous_titre();
}
@@ -59,6 +64,13 @@
@include main_text_content();
}
}
+ // Carte plus petite ici → cercles plus petits.
+ // Le SVG point.svg fait 18x18 et est partagé avec la home ; on réduit
+ // visuellement sans toucher au SVG.
+ #projects_icons > svg {
+ width: 12px;
+ height: 12px;
+ }
}
}
> .projets_list {
@@ -78,24 +90,22 @@
}
> .views-row{
display: grid;
- grid-template-columns: 0.5fr 1fr;
- grid-template-rows: repeat(4, auto);
+ // Colonne image (gauche) | colonne textes (droite).
+ grid-template-columns: 0.4fr 1fr;
+ grid-template-rows: auto auto auto auto auto;
grid-column-gap: 1rem;
+ grid-row-gap: 0.5rem;
> .views-field-field-diaporama {
grid-column: 1;
- grid-row: 1/3;
+ grid-row: 1 / -1;
align-self: start;
overflow: hidden;
- height: 100%;
> .field-content {
display: block;
width: 100%;
- height: auto;
- //height: 100%;
> a {
aspect-ratio: 1/1;
width: 100%;
- height: auto;
display: flex;
align-items: start;
justify-content: center;
@@ -106,64 +116,73 @@
img {
width: auto;
height: 100%;
- //object-fit: cover;
}
}
}
}
- > .views-field-title {
+ // Lieu (1re ligne droite) : Vogun gris-text, petit.
+ > .views-field-field-localisation-textuel {
grid-column: 2;
grid-row: 1;
- margin-bottom: 1rem;
- //margin-left: -1rem;
- a {
- color: $teal;
- }
- @include sous_titre();
+ font-family: $vogun;
+ font-weight: $fw_medium;
+ font-size: $fs_sm;
+ color: $text_grey;
+ line-height: $lh_tight;
+ a { color: inherit; text-decoration: none; }
}
- > .views-field-field-sous-titre {
+ // Titre (2e ligne droite) : Vogun plus grand mais pas trop.
+ > .views-field-title {
grid-column: 2;
grid-row: 2;
- font-size: 1.1rem !important;
- margin-bottom: 1rem;
- line-height: 1.3;
- font-size: $fs_sm !important;
- a {
- color: black;
- }
- @include sous_titre_alt();
+ font-family: $vogun;
+ font-weight: $fw_medium;
+ font-size: $fs_lg;
+ color: black;
+ line-height: $lh_tight;
+ // Filet brand color en bas, sur toute la largeur disponible.
+ padding-bottom: 0.6rem;
+ border-bottom: 1px solid $fluo_green;
+ a { color: inherit; text-decoration: none; }
}
- > .views-field-field-localisation-textuel {
- grid-column: 1/3;
+ // Sous-titre (3e ligne droite) : Marianne gris-text.
+ > .views-field-field-sous-titre {
+ grid-column: 2;
grid-row: 3;
- margin-bottom: 1rem;
- padding-left: 1.2rem;
- padding-top: 0.3rem;
- //margin-left: -0.5rem;
- @include main_text_content();
- a {
- color: black;
- }
+ font-family: $marianne;
+ font-weight: $fw_regular;
+ font-size: $fs_sm;
+ color: $text_grey;
+ line-height: $lh_normal;
+ a { color: inherit; text-decoration: none; }
}
+ // Étiquettes thématiques (4e ligne droite) : fond blanc, contour brand.
> .views-field-field-th {
- grid-column: 1/3;
+ grid-column: 2;
grid-row: 4;
- padding-left: 1rem;
ul {
+ padding: 0;
+ margin: 0;
+ list-style: none;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
li {
display: inline-block;
- font-size: 0.8rem !important;
- background-color: #d3f0ea;
- margin: 0.2rem;
+ font-family: $marianne;
+ font-weight: $fw_regular;
+ font-size: $fs_xs;
+ background-color: white;
+ border: 1px solid $fluo_green;
transition: background-color 0.3s ease;
- @include main_text_content();
&:hover {
- background-color: #8ec2b8;
+ background-color: $fluo_green;
}
a {
display: block;
color: black;
padding: 0.2rem 0.4rem;
+ text-decoration: none;
}
}
}
@@ -174,6 +193,12 @@
.fullpage.projet_full {
// overflow-x: hidden; // enlever quand on ajoute le menu des projets à gauche
+ // Wrapper interne des fields : flex column pour pouvoir inverser
+ // l'ordre thematiques / localisation via order.
+ > .fullpage_content > div {
+ display: flex;
+ flex-direction: column;
+ }
.retour_projets {
padding-top: 3vh;
padding-left: $x_margin;
@@ -187,11 +212,30 @@
.sous_titre > div > div {
@include sous_titre_alt();
}
+ // Thématiques AVANT localisation.
+ .thematiques { order: 1; }
+ .localisation { order: 2; }
+ // Tous les autres fields gardent leur ordre source (order: 3 par défaut).
+ .intro { order: 3; }
+ .diapo { order: 4; }
+ .text-content { order: 5; }
+ .chiffre-clefs { order: 6; }
+ .carte { order: 7; }
+ .legende-carte { order: 8; }
+ .equipe { order: 9; }
+ .liens { order: 10; }
.localisation {
margin-left: $x_margin;
- margin-top: 2rem;
+ margin-top: 1rem;
@include main_text_content();
}
+ // Force la marge top du premier de l'intro à 2rem.
+ // (Le sélecteur générique .layout-content .fullpage .fullpage_content
+ // p:first-of-type met 7vh — trop pour ce contexte.)
+ .intro p:first-of-type {
+ margin-top: 2rem !important;
+ }
+ // Thématiques : "tags" sur fond blanc avec contour 1px brand color.
.thematiques {
margin-top: 1rem;
margin-left: $x_margin;
@@ -199,12 +243,13 @@
> div {
display: inline-block;
font-size: 0.8rem !important;
- background-color: #d3f0ea;
+ background-color: white;
+ border: 1px solid $fluo_green;
margin: 0.2rem;
transition: background-color 0.3s ease;
@include main_text_content();
&:hover {
- background-color: #8ec2b8;
+ background-color: $fluo_green;
}
a {
display: block;
@@ -245,17 +290,16 @@
width: 1.2rem;
height: 1.2rem;
border-radius: 1.5rem;
- background-color: $teal !important;
- transition: background-color 0.3s ease;
+ background-color: transparent !important;
&:hover {
- background-color: white !important;
+ background-color: transparent !important;
&::before {
- color: $teal;
+ color: black;
}
}
&::before {
opacity: 1 !important;
- color: white;
+ color: $text_grey;
font-weight: bold;
font-family: 'Marianne', sans-serif;
display: block;
@@ -272,7 +316,13 @@
.text-content {
.intertitre {
margin-left: $x_margin;
- @include sous_titre();
+ padding-right: $x_margin;
+ // Intertitres en Vogun un peu plus grands.
+ font-family: $vogun;
+ font-weight: $fw_medium;
+ font-size: $fs_lg;
+ color: black;
+ line-height: $lh_tight;
}
.paragraph {
margin-bottom: 3rem;
@@ -288,7 +338,7 @@
grid-column-gap: 2rem;
grid-row-gap: 2rem;
width: auto;
- margin: 4rem $x_margin;
+ margin: 0 $x_margin;
.paragraph {
> div:first-of-type {
font-size: 2rem !important;
@@ -298,7 +348,7 @@
margin: 0;
padding: 0;
margin-top: 0.5rem;
- color: $teal;
+ color: $text_grey;
}
}
}
@@ -352,10 +402,26 @@
.equipe {
margin-top: 4rem;
> div {
+ // Label "Collectif du projet" : intertitre Vogun, brand color, avec un
+ // filet 1px à droite centré verticalement jusqu'à la marge de colonne.
> div:first-of-type {
margin-left: $x_margin;
+ margin-right: $x_margin;
margin-bottom: 2rem;
- @include sous_titre_alt();
+ font-family: $vogun;
+ font-weight: $fw_medium;
+ font-size: $fs_lg;
+ line-height: $lh_tight;
+ color: $fluo_green;
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ &::after {
+ content: '';
+ flex: 1;
+ height: 1px;
+ background-color: $fluo_green;
+ }
}
> div:nth-of-type(2) {
> div:first-of-type > div {
@@ -392,21 +458,17 @@
> div:first-of-type {
margin-bottom: 2rem;
display: inline-block;
- @include sous_titre();
+ // Titre de rôle d'équipe : même typo que les intertitres.
+ font-family: $vogun;
+ font-weight: $fw_medium;
+ font-size: $fs_lg;
+ color: black;
+ line-height: $lh_tight;
> div:last-of-type {
display: flex;
align-items: center;
- &::before {
- content: '';
- display: inline-block;
- width: 1.8rem;
- height: 1.8rem;
- background-color: $teal;
- mask-repeat: no-repeat;
- mask-position: center;
- mask-size: 1.8rem;
- margin-right: 0.5rem;
- }
+ // Icônes en ::before (grenouille/marmotte/etc.) retirées —
+ // les règles mask-image plus haut deviennent inopérantes.
}
}
> div:nth-of-type(2) {
@@ -428,38 +490,30 @@
> .paragraph {
margin: 0 !important;
padding: 0 !important;
- display: grid;
- grid-template-columns: auto 1fr;
- grid-column-gap: 0;
+ display: flex;
flex-direction: column;
> .portrait {
display: none;
}
- > .nom {
- grid-column: 2;
- grid-row: 2;
- margin: 0;
- padding: 0;
- color: black !important;
- font-size: $fs_sm !important;
- @include sous_titre();
- > div {
- padding-left: 0.2rem !important;
+ // Prénom + nom regroupés via le template
+ // paragraph--membre-equipe.html.twig.
+ > .nom-prenom {
+ display: flex;
+ flex-wrap: wrap;
+ column-gap: 0.3rem;
+ color: black;
+ font-family: $marianne;
+ font-weight: $fw_regular;
+ font-size: $fs_md;
+ line-height: $lh_normal;
+ > .prenom,
+ > .nom {
+ margin: 0;
+ padding: 0;
}
}
- > .prenom {
- grid-column: 1;
- grid-row: 2;
- margin: 0;
- padding: 0;
- color: black !important;
- font-size: $fs_sm !important;
- @include sous_titre();
- }
> .texte {
margin-top: 0.5rem;
- grid-column: 1 / span 2;
- grid-row: 3;
p {
font-size: $fs_sm;
margin: 0 !important;
@@ -481,17 +535,41 @@
}
}
}
-.views-row:first-of-type > .taxonomy_page {
- margin-top: 13vh !important;
+// Page d'archive taxonomy : on n'affiche le .page-header-outside (titre du
+// tag + retour) que sur la 1re .views-row. Les autres sont masquées.
+.views-row .page-header-outside.taxonomy_header {
+ display: none;
}
+.views-row:first-of-type > .page-header-outside.taxonomy_header {
+ display: block;
+}
+
+// Border-bottom brand color uniquement sur le dernier .taxonomy_page (les
+// .fullpage intermédiaires l'ont par défaut, cf. _fullpage.scss).
+.views-row:not(:last-of-type) > .taxonomy_page {
+ border-bottom: none !important;
+}
+
.taxonomy_page {
margin-top: 0 !important;
margin-bottom: 0 !important;
+ // Titres de projets listés : réduits drastiquement (cards compactes).
+ > .fullpage_content > .projet_label {
+ font-family: $vogun;
+ font-weight: $fw_medium;
+ font-size: $fs_md;
+ color: black;
+ line-height: $lh_tight;
+ margin: 0 !important;
+ padding: 0 $x_margin 0 $x_margin !important;
+ a { color: inherit; text-decoration: none; }
+ }
> .fullpage_content {
> div:last-of-type {
display: grid !important;
grid-template-columns: 0.5fr 1fr;
grid-template-rows: repeat(3, auto);
+ padding-right: $x_margin;
> .diapo {
grid-column: 1;
grid-row: 2/4;
@@ -501,12 +579,29 @@
> .sous_titre {
grid-column: 1/3;
grid-row: 1;
- margin-bottom: 2rem;
+ margin-bottom: 0.5rem;
+ // Sous-titres : également réduits.
+ // (chaîne d'éléments traversée par un ajouté en JS, on cible
+ // descendants tous niveaux confondus avec !important.)
+ font-size: $fs_sm !important;
+ font-family: $marianne !important;
+ font-weight: $fw_regular !important;
+ color: $text_grey !important;
+ line-height: $lh_normal !important;
+ * {
+ font-size: $fs_sm !important;
+ font-family: $marianne !important;
+ font-weight: $fw_regular !important;
+ color: $text_grey !important;
+ line-height: $lh_normal !important;
+ }
+ a { text-decoration: none; }
}
> .localisation {
grid-column: 2;
grid-row: 2;
margin-top: 0 !important;
+ font-size: $fs_xs !important;
}
> .thematiques {
grid-column: 2;
@@ -520,7 +615,3 @@
.feed-icon {
display: none;
}
-
-.views-row:not(:first-of-type) .taxonomy_page .retour_projets {
- display: none;
-}
diff --git a/web/themes/erabletheme/scss/_ressources.scss b/web/themes/erabletheme/scss/_ressources.scss
index d8ca8c6..0cf95d4 100644
--- a/web/themes/erabletheme/scss/_ressources.scss
+++ b/web/themes/erabletheme/scss/_ressources.scss
@@ -1,9 +1,27 @@
+// Le titre "Ressources" est rendu par chaque node (dans .page-header-outside,
+// frère de .ressources). On masque par défaut, et on n'affiche que sur la
+// 1re ressource via .views-row:first-of-type ci-dessous.
+.views-row .page-header-outside {
+ display: none;
+}
+
+// Pas d'espace entre les .views-row sur la page Ressources : on veut donner
+// l'illusion d'une colonne blanche unique. On annule margin-bottom de la
+// .views-row, et padding-top/bottom de chaque carte .ressources.
+.views-row:has(> .ressources) {
+ margin-bottom: 0 !important;
+}
+// Border-bottom brand color uniquement sur la dernière ressource (les
+// .fullpage intermédiaires l'ont par défaut, cf. _fullpage.scss).
+.views-row:not(:last-of-type) > .ressources {
+ border-bottom: none !important;
+}
+
.ressources {
margin-top: 0 !important;
margin-bottom: 0 !important;
- > .main-title {
- display: none;
- }
+ padding-top: 0 !important;
+ padding-bottom: 0 !important;
> div {
padding: 0 $x_margin;
display: grid;
@@ -35,6 +53,8 @@
> div > span {
margin-top: -1rem;
@include fluo_button();
+ // Carte sur fond blanc : on contraste le CTA en gris pâle.
+ a { background-color: $page_bg; }
}
> div > span:last-of-type {
display: none;
@@ -66,13 +86,20 @@
}
}
-.views-row:first-of-type {
- > .ressources {
- margin-top: 13vh !important;
- > .main-title {
- display: block;
- padding-top: 5vh !important;
- @include main_title();
+// Scope strict à la page /ressources (article.ressources frère du
+// .page-header-outside dans la 1re views-row). On ne touche pas aux autres
+// pages où un .page-header-outside peut aussi être dans une .views-row
+// (ex. /taxonomy/term/N avec .taxonomy_header).
+.views-row:first-of-type:has(> article.ressources) {
+ > .page-header-outside {
+ display: block;
+ // La page /ressources utilise un layout hacky qui pousse à ~255px
+ // sous le header (cause non identifiée, conçu ainsi par le précédent dev).
+ // On compense avec un margin-top négatif pour rapprocher visuellement le
+ // titre du header, comme sur les autres pages d'index.
+ margin-top: calc(-200px + 3rem) !important;
+ @media (min-width: $breakpoint_desktop) {
+ margin-top: calc(-200px + 3rem) !important;
}
}
}
diff --git a/web/themes/erabletheme/scss/global/variables/_colors.scss b/web/themes/erabletheme/scss/global/variables/_colors.scss
index 6c4ca6c..a328bd7 100644
--- a/web/themes/erabletheme/scss/global/variables/_colors.scss
+++ b/web/themes/erabletheme/scss/global/variables/_colors.scss
@@ -1,7 +1,7 @@
$fluo_green: #33ffc4;
$teal: $fluo_green;
$beige: #fcf9ee;
-$dark_green: #314e41;
+$dark_green: #0e3b2d;
$text_grey: #4a4a49;
$page_bg: #f9f9f9;
diff --git a/web/themes/erabletheme/scss/global/variables/_typography.scss b/web/themes/erabletheme/scss/global/variables/_typography.scss
index 99a9b66..30961f6 100644
--- a/web/themes/erabletheme/scss/global/variables/_typography.scss
+++ b/web/themes/erabletheme/scss/global/variables/_typography.scss
@@ -95,7 +95,8 @@ $fw_bold: 800;
padding: 0.75rem 1.5rem;
text-decoration: none;
transition: color 0.2s ease;
- text-wrap: nowrap !important;
+ // Pas de nowrap : si le texte du lien est long, on autorise le wrap
+ // pour éviter qu'il déborde du conteneur (notamment colonne d'article).
svg { display: none; }
&:hover { color: black; }
}
diff --git a/web/themes/erabletheme/scss/partials/_articles.scss b/web/themes/erabletheme/scss/partials/_articles.scss
index 03aec07..9dfdc37 100644
--- a/web/themes/erabletheme/scss/partials/_articles.scss
+++ b/web/themes/erabletheme/scss/partials/_articles.scss
@@ -12,34 +12,26 @@
}
}
.article_meta {
+ padding-top: 1.5rem;
padding-left: $x_margin;
margin: 20px 0;
+ display: flex;
+ flex-direction: row;
+ gap: 1.5rem;
div {
font-size: $fs_xs;
margin-bottom: 5px;
}
}
- .article_meta + h2 {
- margin-top: 0 !important;
- }
- h2 {
- padding-top: 0 !important;
- margin-bottom: 2rem !important;
- }
- h2 + div { // tout le contenu qui n'est pas le titre
+ // Le
+ 
+ 
+