bachir/drupal-erable
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refonte décors home + texte vert lisible

Browse Source 
- home: chapo agrandi, flower-1 collée à gauche, oiseau droite retiré
- oiseau projets lauréats -> bird-3 (plus petit, repositionné)
- frise verte parallax au niveau de la carte projets
- suppression décors footer + système page-decor (code mort inclus)
- /projets: texte à gauche de la carte agrandi en desktop
- texte vert #33ffc4 -> #0c8461 (sidebars, contenus projets, etc.)
- icône dropdown sidebar au même vert que le texte
This commit is contained in:
Valentin Le Moign
2026-07-08 15:29:55 +02:00
parent 8e5a0c936e
commit 5adc79ac4b
16 changed files with 129 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
web/themes/erabletheme/assets/drawings/flower-1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 317 KiB

After

Width:  |  Height:  |  Size: 268 KiB

75
web/themes/erabletheme/css/styles.css
View File

@@ -408,33 +408,6 @@ footer.fluo_links p {
padding: 1rem; padding: 1rem;
} }
} }
.layout-container > footer > .footer-decor {
position: absolute;
bottom: 100%;
width: 18vw;
height: auto;
transform: translateY(15%);
pointer-events: none;
}
@media (min-width: 1080px) {
.layout-container > footer > .footer-decor {
width: 8vw;
}
}
.layout-container > footer > .footer-decor-bird {
left: 0;
}
.layout-container > footer > .footer-decor-flower {
right: 0;
}
@media (min-width: 1080px) {
.layout-container > footer > .footer-decor-bird {
left: -4vw;
}
.layout-container > footer > .footer-decor-flower {
right: -4vw;
}
}
.layout-container > footer #footer_middle { .layout-container > footer #footer_middle {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -654,7 +627,7 @@ footer.fluo_links p {
color: black; color: black;
} }
.carousel_container #carousel_dots ul li.slick-active button::before { .carousel_container #carousel_dots ul li.slick-active button::before {
color: #33ffc4; color: #0c8461;
} }
.carousel_container footer { .carousel_container footer {
text-align: center; text-align: center;
@@ -929,6 +902,18 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
top: 88%; top: 88%;
height: 10vh; height: 10vh;
} }
#background .decor-tile .decor-left-7 {
top: 10%;
height: 16vh;
}
#background .decor-tile .decor-left-8 {
top: 48%;
height: 20vh;
}
#background .decor-tile .decor-left-9 {
top: 80%;
height: 18vh;
}
#background .decor-tile .decor-right-1 { #background .decor-tile .decor-right-1 {
top: 1%; top: 1%;
height: 22vh; height: 22vh;
@@ -1070,6 +1055,7 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
font-size: 0.9375rem; font-size: 0.9375rem;
color: #4a4a49; color: #4a4a49;
line-height: 1.3; line-height: 1.3;
font-size: 1.1rem;
margin: 0; margin: 0;
} }
.home_introduction > div.more-link { .home_introduction > div.more-link {
@@ -1710,7 +1696,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
font-family: "Vogun", serif; font-family: "Vogun", serif;
font-weight: 500; font-weight: 500;
font-size: 1.375rem; font-size: 1.375rem;
color: #33ffc4; color: #0c8461;
line-height: 1.2; line-height: 1.2;
} }
aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > h2 > div, aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > h2 > div,
@@ -1719,10 +1705,9 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > div #block-erabletheme-views-block-projets-block-1 > h2 > div { aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > div #block-erabletheme-views-block-projets-block-1 > h2 > div {
mask-image: url("/themes/erabletheme/assets/icons/arrow-down-s-line.svg"); mask-image: url("/themes/erabletheme/assets/icons/arrow-down-s-line.svg");
background-size: contain; background-size: contain;
background-color: #33ffc4; background-color: #0c8461;
width: 1.3rem; width: 1.3rem;
height: 1.3rem; height: 1.3rem;
color: #33ffc4;
transform: rotate(0deg); transform: rotate(0deg);
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
@@ -1817,7 +1802,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > div #block-erabletheme-views-block-projets-block-1 .projets_list .views-row a:hover, aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > div #block-erabletheme-views-block-projets-block-1 .projets_list .views-row a:hover,
aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > div #block-erabletheme-views-block-projets-block-1 .projets_list .views-row a.is-active { aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > div #block-erabletheme-views-block-projets-block-1 .projets_list .views-row a.is-active {
font-weight: 400; font-weight: 400;
color: #33ffc4; color: #0c8461;
} }
aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > ul.closed, aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > ul.closed,
aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 .projets_list.closed, aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 .projets_list.closed,
@@ -2366,7 +2351,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
grid-row: 1/2; grid-row: 1/2;
} }
.fullpage.meetup > .meetup_list > .views-row > a > article > p.occupation > a, .fullpage.meetup > .meetup_list > .views-row > article > p.occupation > a { .fullpage.meetup > .meetup_list > .views-row > a > article > p.occupation > a, .fullpage.meetup > .meetup_list > .views-row > article > p.occupation > a {
color: #33ffc4; color: #0c8461;
text-transform: uppercase; text-transform: uppercase;
font-weight: 800; font-weight: 800;
} }
@@ -2473,7 +2458,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
.fullpage.meetup-offre > .retour-meetup a { .fullpage.meetup-offre > .retour-meetup a {
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: 800; font-weight: 800;
color: #33ffc4; color: #0c8461;
} }
.fullpage.meetup-offre > h2 { .fullpage.meetup-offre > h2 {
margin-bottom: 3vh; margin-bottom: 3vh;
@@ -2556,7 +2541,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
grid-column: 2/4; grid-column: 2/4;
grid-row: 1/2; grid-row: 1/2;
text-transform: uppercase; text-transform: uppercase;
color: #33ffc4; color: #0c8461;
font-weight: 800; font-weight: 800;
} }
.fullpage.meetup-offre > .offre-content > div > div > div > div > .offre-structure > h2 { .fullpage.meetup-offre > .offre-content > div > div > div > div > .offre-structure > h2 {
@@ -2566,7 +2551,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
grid-column: 2/4; grid-column: 2/4;
grid-row: 3/4; grid-row: 3/4;
font-weight: 800; font-weight: 800;
color: #33ffc4; color: #0c8461;
} }
.fullpage.meetup-offre > .offre-content > div > div > div > div > .offre-localisation > h2 { .fullpage.meetup-offre > .offre-content > div > div > div > div > .offre-localisation > h2 {
display: none; display: none;
@@ -2833,6 +2818,12 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
.layout-content .fullpage.projets > .intro_map > header p { .layout-content .fullpage.projets > .intro_map > header p {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@media (min-width: 1080px) {
.layout-content .fullpage.projets > .intro_map > header p {
font-size: 1.2rem;
line-height: 1.4;
}
}
.layout-content .fullpage.projets > .intro_map .projets_intro { .layout-content .fullpage.projets > .intro_map .projets_intro {
display: none; display: none;
} }
@@ -3015,7 +3006,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
.fullpage.projet_full .retour_projets a { .fullpage.projet_full .retour_projets a {
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: 800; font-weight: 800;
color: #33ffc4; color: #0c8461;
} }
.fullpage.projet_full .sous_titre > div > div { .fullpage.projet_full .sous_titre > div > div {
font-family: "Vogun", serif; font-family: "Vogun", serif;
@@ -3239,7 +3230,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
font-weight: 500; font-weight: 500;
font-size: 1.375rem; font-size: 1.375rem;
line-height: 1.2; line-height: 1.2;
color: #33ffc4; color: #0c8461;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
@@ -3579,7 +3570,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
.ressource .retour_ressources a { .ressource .retour_ressources a {
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: 800; font-weight: 800;
color: #33ffc4; color: #0c8461;
} }
.ressource > div:not(.retour_ressources) { .ressource > div:not(.retour_ressources) {
margin: 3vw; margin: 3vw;
@@ -3680,7 +3671,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
.faq-fullpage .faq-question > span > a { .faq-fullpage .faq-question > span > a {
color: #33ffc4; color: #0c8461;
font-weight: 800; font-weight: 800;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -3698,7 +3689,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
margin-left: -40px; margin-left: -40px;
color: #33ffc4; color: #0c8461;
} }
.faq-fullpage .faq-question-answer:last-of-type { .faq-fullpage .faq-question-answer:last-of-type {
border-bottom: solid 1px #0e3b2d; border-bottom: solid 1px #0e3b2d;
@@ -3798,7 +3789,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
.actu_full .retour_actus a { .actu_full .retour_actus a {
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: 800; font-weight: 800;
color: #33ffc4; color: #0c8461;
} }
.actu_full .article_meta { .actu_full .article_meta {
padding-top: 1.5rem; padding-top: 1.5rem;

153
web/themes/erabletheme/js/erabletheme.js
View File

@@ -595,88 +595,6 @@
document.body.dataset.colDecorScrollWired = 'true'; document.body.dataset.colDecorScrollWired = 'true';
} }
//
// Décor aléatoire en haut à droite de chaque .fullpage. Tirage
// parmi drawings/ (excluant flower-2 + bird-3 déjà au footer).
// Bas de l'image overlap le haut de l'ancre (20%, sauf flower-3
// à 40% car tige fine). Mobile : ancre = .page-header-outside.
// Largeur par breakpoint.
//
const PAGE_DECOR_POOL = ['bird-1.png', 'bird-2.png', 'flower-1.png', 'flower-3.png'];
const pageDecorState = [];
function pageDecorWidthVw() {
const w = window.innerWidth;
if (w < 1080) return 22; // mobile + tablette
return 10; // desktop
}
function setupPageDecor() {
if (!layoutContainer) return;
layoutContainer.querySelectorAll('.page-decor').forEach(n => n.remove());
pageDecorState.length = 0;
document.querySelectorAll('.fullpage').forEach(col => {
// Exclure les .fullpage situées dans une sidebar (vue projets
// imbriquée). On ne décore que les colonnes de contenu.
if (col.closest('aside')) return;
// Tirage déterministe par colonne : on stocke l'index sur le
// dataset pour qu'un resize ne change pas l'image affichée.
let idx = col.dataset.pageDecorIdx;
if (idx == null) {
idx = Math.floor(Math.random() * PAGE_DECOR_POOL.length);
col.dataset.pageDecorIdx = String(idx);
} else {
idx = parseInt(idx, 10);
}
const img = document.createElement('img');
img.className = 'page-decor';
img.setAttribute('aria-hidden', 'true');
img.setAttribute('alt', '');
img.src = `/themes/erabletheme/assets/drawings/${PAGE_DECOR_POOL[idx]}`;
img.style.cssText = 'position:absolute;width:auto;height:auto;pointer-events:none;z-index:0;';
layoutContainer.appendChild(img);
pageDecorState.push({ img, col });
});
positionPageDecor();
}
function positionPageDecor() {
if (!pageDecorState.length) return;
const lcRect = layoutContainer.getBoundingClientRect();
const lcTopAbs = lcRect.top + window.scrollY;
const lcLeftAbs = lcRect.left + window.scrollX;
const widthVw = pageDecorWidthVw();
const widthPx = (widthVw / 100) * window.innerWidth;
const isMobile = window.innerWidth < 760;
for (const entry of pageDecorState) {
const img = entry.img;
if (!img.naturalWidth) {
img.addEventListener('load', positionPageDecor, { once: true });
continue;
}
const heightPx = widthPx * (img.naturalHeight / img.naturalWidth);
// Mobile : ancre = .page-header-outside (titre/retour) si présent,
// sinon la colonne elle-même.
let anchorEl = entry.col;
if (isMobile) {
const layoutContent = entry.col.closest('.layout-content');
const phOutside = layoutContent && layoutContent.querySelector('.page-header-outside');
if (phOutside) anchorEl = phOutside;
}
const r = anchorEl.getBoundingClientRect();
const anchorTopAbs = r.top + window.scrollY;
const anchorRightAbs = r.right + window.scrollX;
// flower-3 a une tige fine en haut → on la pousse plus dans
// l'ancre (40%) pour qu'elle ne soit pas perdue dans la marge.
const overlapRatio = img.src.includes('flower-3') ? 0.4 : 0.2;
const top = anchorTopAbs + heightPx * overlapRatio - heightPx;
const left = anchorRightAbs - widthPx * 0.7; // 30% dépasse à droite
img.style.width = widthPx + 'px';
img.style.top = (top - lcTopAbs) + 'px';
img.style.left = (left - lcLeftAbs) + 'px';
}
}
// //
// Décors home-diapo-{right,left} : ancrés aux bords droit/gauche // Décors home-diapo-{right,left} : ancrés aux bords droit/gauche
// du viewport, leur haut dépassant au-dessus du haut des cards // du viewport, leur haut dépassant au-dessus du haut des cards
@@ -747,14 +665,16 @@
} }
// //
// Décors home-above : flower-1 (gauche) et bird-1 (droite), // Décor home-above : flower-1 (gauche), au-dessus des cards, son bas
// au-dessus des cards, leur bas débordant de `overlap` px sur le // débordant de `overlap` px sur le haut des cards. offsetVw décale
// haut des cards. offsetVw : décalage horizontal vers l'intérieur. // horizontalement : négatif = déborde à gauche du viewport, si bien
// que la fleur semble « sortir de sous » une card. offsetVwDesktop
// (optionnel) surcharge offsetVw à partir de $breakpoint_desktop :
// ici un léger décalage à droite du bouquet en desktop uniquement.
// Pas de parallax. // Pas de parallax.
// //
const HOME_ABOVE_CONFIGS = [ const HOME_ABOVE_CONFIGS = [
{ side: 'left', file: 'drawings/flower-1.png', widthVw: 15, overlap: 40, offsetVw: 8 }, { side: 'left', file: 'drawings/flower-1.png', widthVw: 15, overlap: 40, offsetVw: -3, offsetVwDesktop: 0 },
{ side: 'right', file: 'drawings/bird-1.png', widthVw: 15, overlap: 40, offsetVw: 4 },
]; ];
const homeAboveState = []; const homeAboveState = [];
@@ -770,9 +690,9 @@
img.setAttribute('aria-hidden', 'true'); img.setAttribute('aria-hidden', 'true');
img.setAttribute('alt', ''); img.setAttribute('alt', '');
img.src = `/themes/erabletheme/assets/${cfg.file}`; img.src = `/themes/erabletheme/assets/${cfg.file}`;
img.style.cssText = `position:absolute;${cfg.side}:${cfg.offsetVw}vw;width:auto;height:auto;pointer-events:none;z-index:0;`; img.style.cssText = 'position:absolute;width:auto;height:auto;pointer-events:none;z-index:0;';
layoutContainer.appendChild(img); layoutContainer.appendChild(img);
homeAboveState.push({ img, widthVw: cfg.widthVw, overlap: cfg.overlap, cardsBox }); homeAboveState.push({ img, side: cfg.side, widthVw: cfg.widthVw, overlap: cfg.overlap, offsetVw: cfg.offsetVw, offsetVwDesktop: cfg.offsetVwDesktop, cardsBox });
} }
positionHomeAboveDecor(); positionHomeAboveDecor();
} }
@@ -793,19 +713,25 @@
const bottomFromLcBottom = (lcTopAbs + lcHeight) - imgBottom; const bottomFromLcBottom = (lcTopAbs + lcHeight) - imgBottom;
entry.img.style.width = widthPx + 'px'; entry.img.style.width = widthPx + 'px';
entry.img.style.bottom = bottomFromLcBottom + 'px'; entry.img.style.bottom = bottomFromLcBottom + 'px';
// Décalage horizontal responsive : offsetVwDesktop surcharge
// offsetVw à partir de 1080px (léger recentrage du bouquet).
const isDesktop = window.innerWidth >= 1080;
const offsetVw = (isDesktop && entry.offsetVwDesktop != null)
? entry.offsetVwDesktop : entry.offsetVw;
entry.img.style[entry.side] = offsetVw + 'vw';
} }
} }
// //
// Décors home-projet, ancrés au bloc .map-projets : // Décors home-projet, ancrés au bloc .map-projets :
// - bird-2 en haut à gauche, débordant à gauche du bloc en // - bird-3 en haut à gauche, débordant à gauche du bloc en
// desktop, ou collé à -3vw du viewport en mobile/tablette. // desktop, ou collé à -3vw du viewport en mobile/tablette.
// - flower-3 collée au bord droit du viewport (tronquée), centre // - flower-3 collée au bord droit du viewport (tronquée), centre
// vertical à 1/3 depuis le haut du bloc. // vertical à 1/3 depuis le haut du bloc.
// Pas de parallax. // Pas de parallax.
// //
const HOME_PROJET_CONFIGS = [ const HOME_PROJET_CONFIGS = [
{ file: 'drawings/bird-2.png', widthVw: 15, anchor: 'block-left-top' }, { file: 'drawings/bird-3.png', widthVw: 11, anchor: 'block-left-top' },
{ file: 'drawings/flower-3.png', widthVw: 7, anchor: 'viewport-right' }, { file: 'drawings/flower-3.png', widthVw: 7, anchor: 'viewport-right' },
]; ];
const homeProjetState = []; const homeProjetState = [];
@@ -849,12 +775,17 @@
const blockHeightPx = bRect.height; const blockHeightPx = bRect.height;
img.style.width = widthPx + 'px'; img.style.width = widthPx + 'px';
if (entry.anchor === 'block-left-top') { if (entry.anchor === 'block-left-top') {
// bird-2 remontée de 0.6× sa hauteur au-dessus du bloc. // bird-3 remontée de 0.75× sa hauteur au-dessus du bloc,
const top = blockTopAbs - heightPx * 0.6; // puis redescendue de 20px (toutes vues).
const top = blockTopAbs - heightPx * 0.75 + 20;
if (window.innerWidth < 1080) { if (window.innerWidth < 1080) {
img.style.left = '-3vw'; // tablette : collée au bord gauche (léger décalage vers la
// droite par rapport à l'ancien -3vw).
img.style.left = '0';
} else { } else {
img.style.left = (blockLeftAbs - widthPx * 0.5 - lcLeftAbs) + 'px'; // desktop : moins de débord à gauche du bloc (0.25 au lieu
// de 0.5) → l'oiseau est décalé vers la droite.
img.style.left = (blockLeftAbs - widthPx * 0.25 - lcLeftAbs) + 'px';
} }
img.style.top = (top - lcTopAbs) + 'px'; img.style.top = (top - lcTopAbs) + 'px';
img.style.right = ''; img.style.right = '';
@@ -902,6 +833,34 @@
} }
} }
// Frise verte fluo à gauche, au niveau de la carte des projets
// lauréats. Injectée comme .bgImg dans #background (donc animée par
// Rellax comme les autres frises), dimensionnée en vh comme elles
// (largeur auto → pas d'effet « zoomé »), positionnée au centre
// vertical du bloc .map-projets. Doit être appelée AVANT initRellax.
function setupMapDecor() {
if (!bgRoot) return;
bgRoot.querySelectorAll('.map-decor').forEach(n => n.remove());
const block = document.querySelector('.map-projets');
if (!block) return;
const bgRect = bgRoot.getBoundingClientRect();
const bgTopAbs = bgRect.top + window.scrollY;
const bRect = block.getBoundingClientRect();
const blockCenterAbs = bRect.top + window.scrollY + bRect.height / 2;
const img = document.createElement('img');
// .bgImg → capté par Rellax ; .decor-left → collé à left:0 ;
// .map-decor → sélecteur de nettoyage.
img.className = 'bgImg decor-left map-decor';
img.setAttribute('data-rellax-speed', '-3');
img.setAttribute('aria-hidden', 'true');
img.setAttribute('alt', '');
img.src = '/themes/erabletheme/assets/new-bg-shapes/left-3.png';
// height en vh (comme les frises) ; top centré sur la carte.
img.style.cssText = 'position:absolute;left:0;width:auto;height:32vh;'
+ 'pointer-events:none;top:' + (blockCenterAbs - bgTopAbs - (0.16 * window.innerHeight)) + 'px;';
bgRoot.appendChild(img);
}
function initRellax() { function initRellax() {
if (rellax) { try { rellax.destroy(); } catch (e) { /* noop */ } } if (rellax) { try { rellax.destroy(); } catch (e) { /* noop */ } }
rellax = new Rellax('.bgImg', { wrapper: 'body' }); rellax = new Rellax('.bgImg', { wrapper: 'body' });
@@ -923,7 +882,7 @@
setupHomeDiapoDecor(); setupHomeDiapoDecor();
setupHomeAboveDecor(); setupHomeAboveDecor();
setupHomeProjetDecor(); setupHomeProjetDecor();
setupPageDecor(); setupMapDecor();
initRellax(); initRellax();
}); });
@@ -938,7 +897,7 @@
setupHomeDiapoDecor(); setupHomeDiapoDecor();
setupHomeAboveDecor(); setupHomeAboveDecor();
setupHomeProjetDecor(); setupHomeProjetDecor();
setupPageDecor(); setupMapDecor();
initRellax(); initRellax();
}, 200); }, 200);
}); });

4
web/themes/erabletheme/scss/_faq.scss
View File

@@ -11,7 +11,7 @@
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
> span > a { > span > a {
color: $teal; color: $fluo_green_text;
font-weight: 800; font-weight: 800;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -33,7 +33,7 @@
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
margin-left: -40px; margin-left: -40px;
color: $teal; color: $fluo_green_text;
} }
} }
.faq-question-answer:last-of-type { .faq-question-answer:last-of-type {

9
web/themes/erabletheme/scss/_fullpage.scss
View File

@@ -347,15 +347,16 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) {
font-family: $vogun; font-family: $vogun;
font-weight: $fw_medium; font-weight: $fw_medium;
font-size: $fs_lg; font-size: $fs_lg;
color: $fluo_green; color: $fluo_green_text;
line-height: $lh_tight; line-height: $lh_tight;
> div { > div {
mask-image: url('/themes/erabletheme/assets/icons/arrow-down-s-line.svg'); mask-image: url('/themes/erabletheme/assets/icons/arrow-down-s-line.svg');
background-size: contain; background-size: contain;
background-color: $fluo_green; // Icône colorée via la mask → c'est background-color qui la teinte ;
// même vert lisible que le titre/texte de la sidebar.
background-color: $fluo_green_text;
width: 1.3rem; width: 1.3rem;
height: 1.3rem; height: 1.3rem;
color: $fluo_green;
transform: rotate(0deg); transform: rotate(0deg);
transition: transform 0.3s ease; transition: transform 0.3s ease;
&.closed { &.closed {
@@ -382,7 +383,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) {
&:hover, &:hover,
&.is-active { &.is-active {
font-weight: $fw_regular; font-weight: $fw_regular;
color: $fluo_green; color: $fluo_green_text;
} }
} }
} }

1
web/themes/erabletheme/scss/_home.scss
View File

@@ -71,6 +71,7 @@
margin-inline: auto; // centrage horizontal du wrapper texte margin-inline: auto; // centrage horizontal du wrapper texte
p { p {
@include main_text_content(); @include main_text_content();
font-size: 1.1rem; // chapo home agrandi (au-dessus du corps courant)
margin: 0; margin: 0;
} }
} }

8
web/themes/erabletheme/scss/_meetup.scss
View File

@@ -167,7 +167,7 @@
grid-column: 2; grid-column: 2;
grid-row: 1/2; grid-row: 1/2;
> a { > a {
color: $teal; color: $fluo_green_text;
text-transform: uppercase; text-transform: uppercase;
font-weight: 800; font-weight: 800;
} }
@@ -265,7 +265,7 @@
a { a {
font-size: $fs_xs; font-size: $fs_xs;
font-weight: 800; font-weight: 800;
color: $teal; color: $fluo_green_text;
} }
} }
> h2 { > h2 {
@@ -337,7 +337,7 @@
grid-column: 2/4; grid-column: 2/4;
grid-row: 1/2; grid-row: 1/2;
text-transform: uppercase; text-transform: uppercase;
color: $teal; color: $fluo_green_text;
font-weight: 800; font-weight: 800;
} }
> .offre-localisation { > .offre-localisation {
@@ -350,7 +350,7 @@
grid-column: 2/4; grid-column: 2/4;
grid-row: 3/4; grid-row: 3/4;
font-weight: 800; font-weight: 800;
color: $teal; color: $fluo_green_text;
} }
> .offre-title { > .offre-title {
grid-column: 2/4; grid-column: 2/4;

10
web/themes/erabletheme/scss/_projets.scss
View File

@@ -34,6 +34,12 @@
} }
p { p {
margin-bottom: 1rem; margin-bottom: 1rem;
// Desktop : texte agrandi pour combler le blanc sous la colonne
// de gauche par rapport à la hauteur de la carte (à droite).
@media (min-width: $breakpoint_desktop) {
font-size: 1.2rem;
line-height: $lh_loose;
}
} }
} }
.projets_intro { .projets_intro {
@@ -206,7 +212,7 @@
a { a {
font-size: $fs_xs; font-size: $fs_xs;
font-weight: 800; font-weight: 800;
color: $teal; color: $fluo_green_text;
} }
} }
.sous_titre > div > div { .sous_titre > div > div {
@@ -412,7 +418,7 @@
font-weight: $fw_medium; font-weight: $fw_medium;
font-size: $fs_lg; font-size: $fs_lg;
line-height: $lh_tight; line-height: $lh_tight;
color: $fluo_green; color: $fluo_green_text;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;

2
web/themes/erabletheme/scss/_ressources.scss
View File

@@ -112,7 +112,7 @@
a { a {
font-size: $fs_xs; font-size: $fs_xs;
font-weight: 800; font-weight: 800;
color: $teal; color: $fluo_green_text;
} }
} }
> div:not(.retour_ressources) { > div:not(.retour_ressources) {

4
web/themes/erabletheme/scss/global/_global.scss
View File

@@ -25,8 +25,8 @@ body {
} }
} }
footer { footer {
// Au-dessus de main pour que les ornements posés sur le footer // Au-dessus de main pour rester net au-dessus du bas de la colonne
// (cf. .footer-decor) passent par-dessus le bas de la colonne. // et des décors latéraux.
z-index: 3; z-index: 3;
} }
#background { #background {

5
web/themes/erabletheme/scss/global/variables/_colors.scss
View File

@@ -1,5 +1,10 @@
$fluo_green: #33ffc4; $fluo_green: #33ffc4;
$teal: $fluo_green; $teal: $fluo_green;
// Vert lisible pour le texte : le fluo (#33ffc4) manque de contraste en
// tant que couleur de texte, on utilise cette variante foncée dès qu'un
// libellé/lien est écrit en vert (sidebars programme/projets, contenus
// projets, etc.). Réservé aux `color:` ; les fonds/bordures gardent $fluo_green.
$fluo_green_text: #0c8461;
$beige: #fcf9ee; $beige: #fcf9ee;
$dark_green: #0e3b2d; $dark_green: #0e3b2d;
$text_grey: #4a4a49; $text_grey: #4a4a49;

2
web/themes/erabletheme/scss/partials/_articles.scss
View File

@@ -8,7 +8,7 @@
a { a {
font-size: $fs_xs; font-size: $fs_xs;
font-weight: 800; font-weight: 800;
color: $teal; color: $fluo_green_text;
} }
} }
.article_meta { .article_meta {

6
web/themes/erabletheme/scss/partials/_background.scss
View File

@@ -38,7 +38,7 @@ $tile_height: 220vh;
.decor-left { left: 0; } .decor-left { left: 0; }
.decor-right { right: 0; } .decor-right { right: 0; }
// --- Frises gauches (6 répartiess sur la hauteur du tile) --- // --- Frises gauches (réparties sur la hauteur du tile) ---
.decor-left-1 { top: 2%; height: 20vh; } .decor-left-1 { top: 2%; height: 20vh; }
.decor-left-2 { top: 18%; height: 32vh; } .decor-left-2 { top: 18%; height: 32vh; }
.decor-left-3 { top: 38%; height: 42vh; } .decor-left-3 { top: 38%; height: 42vh; }
@@ -46,6 +46,10 @@ $tile_height: 220vh;
.decor-left-5 { top: 70%; height: 22vh; } .decor-left-5 { top: 70%; height: 22vh; }
.decor-left_6, .decor-left_6,
.decor-left-6 { top: 88%; height: 10vh; } .decor-left-6 { top: 88%; height: 10vh; }
// Frises intercalées pour densifier le bord gauche.
.decor-left-7 { top: 10%; height: 16vh; }
.decor-left-8 { top: 48%; height: 20vh; }
.decor-left-9 { top: 80%; height: 18vh; }
// --- Frises droites (13 réparties sur la hauteur du tile) --- // --- Frises droites (13 réparties sur la hauteur du tile) ---
.decor-right-1 { top: 1%; height: 22vh; } .decor-right-1 { top: 1%; height: 22vh; }

2
web/themes/erabletheme/scss/partials/_carousel.scss
View File

@@ -147,7 +147,7 @@ $pagination_line_offset: 4rem; // distance bas carrousel -> centre de la ligne f
color: black; color: black;
} }
&.slick-active button::before { &.slick-active button::before {
color: $fluo_green; color: $fluo_green_text;
} }
} }
} }

25
web/themes/erabletheme/scss/partials/_footer.scss
View File

@@ -26,31 +26,6 @@
padding: 1rem; padding: 1rem;
} }
// Ornements décoratifs (oiseau / fleur) "posés" sur le bord haut du
// footer : bord bas légèrement entré dans le footer, le reste dépasse
// au-dessus. En desktop le footer fait 50vw centré ; les ornements
// sont à cheval sur les bords du footer (moitié dedans, moitié hors).
// Le footer est passé au-dessus de main (cf. _global.scss) pour que
// les ornements recouvrent le bas de la colonne.
// pointer-events:none pour ne pas bloquer les liens du footer.
> .footer-decor {
position: absolute;
bottom: 100%;
width: 18vw;
height: auto;
transform: translateY(15%);
pointer-events: none;
@media (min-width: $breakpoint_desktop) {
width: 8vw;
}
}
> .footer-decor-bird { left: 0; }
> .footer-decor-flower { right: 0; }
@media (min-width: $breakpoint_desktop) {
> .footer-decor-bird { left: -4vw; }
> .footer-decor-flower { right: -4vw; }
}
#footer_middle { #footer_middle {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

9
web/themes/erabletheme/templates/page/page.html.twig
View File

@@ -86,10 +86,6 @@
</main> </main>
<footer role="contentinfo"> <footer role="contentinfo">
{# Ornements décoratifs au-dessus du footer (à cheval entre fullpage
et footer). Purement visuels. #}
<img class="footer-decor footer-decor-bird" src="/themes/erabletheme/assets/drawings/bird-3.png" aria-hidden="true" alt="">
<img class="footer-decor footer-decor-flower" src="/themes/erabletheme/assets/drawings/flower-2.png" aria-hidden="true" alt="">
<section id="footer_top">{{ page.footer_top }}</section> <section id="footer_top">{{ page.footer_top }}</section>
<section id="footer_middle"> <section id="footer_middle">
<section id="footer_left">{{ page.footer_left }}</section> <section id="footer_left">{{ page.footer_left }}</section>
@@ -118,6 +114,11 @@
<img class="bgImg decor-left decor-left-4" data-rellax-speed="-4" src="/themes/erabletheme/assets/new-bg-shapes/left-4.png" aria-hidden="true" alt=""> <img class="bgImg decor-left decor-left-4" data-rellax-speed="-4" src="/themes/erabletheme/assets/new-bg-shapes/left-4.png" aria-hidden="true" alt="">
<img class="bgImg decor-left decor-left-5" data-rellax-speed="-2" src="/themes/erabletheme/assets/new-bg-shapes/left-5.png" aria-hidden="true" alt=""> <img class="bgImg decor-left decor-left-5" data-rellax-speed="-2" src="/themes/erabletheme/assets/new-bg-shapes/left-5.png" aria-hidden="true" alt="">
<img class="bgImg decor-left decor-left-6" data-rellax-speed="-3" src="/themes/erabletheme/assets/new-bg-shapes/left-6.png" aria-hidden="true" alt=""> <img class="bgImg decor-left decor-left-6" data-rellax-speed="-3" src="/themes/erabletheme/assets/new-bg-shapes/left-6.png" aria-hidden="true" alt="">
{# Frises gauches supplémentaires : densifient le bord gauche
(notamment au niveau de la carte des projets, en bas de home). #}
<img class="bgImg decor-left decor-left-7" data-rellax-speed="-4" src="/themes/erabletheme/assets/new-bg-shapes/left-3.png" aria-hidden="true" alt="">
<img class="bgImg decor-left decor-left-8" data-rellax-speed="-2" src="/themes/erabletheme/assets/new-bg-shapes/left-2.png" aria-hidden="true" alt="">
<img class="bgImg decor-left decor-left-9" data-rellax-speed="-3" src="/themes/erabletheme/assets/new-bg-shapes/left-5.png" aria-hidden="true" alt="">
<img class="bgImg decor-right decor-right-1 decor-once" data-rellax-speed="-2" src="/themes/erabletheme/assets/new-bg-shapes/right-1.png" aria-hidden="true" alt=""> <img class="bgImg decor-right decor-right-1 decor-once" data-rellax-speed="-2" src="/themes/erabletheme/assets/new-bg-shapes/right-1.png" aria-hidden="true" alt="">
<img class="bgImg decor-right decor-right-2" data-rellax-speed="-3" src="/themes/erabletheme/assets/new-bg-shapes/right-2.png" aria-hidden="true" alt=""> <img class="bgImg decor-right decor-right-2" data-rellax-speed="-3" src="/themes/erabletheme/assets/new-bg-shapes/right-2.png" aria-hidden="true" alt="">