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;
}
}
.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 {
display: flex;
flex-wrap: wrap;
@@ -654,7 +627,7 @@ footer.fluo_links p {
color: black;
}
.carousel_container #carousel_dots ul li.slick-active button::before {
color: #33ffc4;
color: #0c8461;
}
.carousel_container footer {
text-align: center;
@@ -929,6 +902,18 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
top: 88%;
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 {
top: 1%;
height: 22vh;
@@ -1070,6 +1055,7 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo
font-size: 0.9375rem;
color: #4a4a49;
line-height: 1.3;
font-size: 1.1rem;
margin: 0;
}
.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-weight: 500;
font-size: 1.375rem;
color: #33ffc4;
color: #0c8461;
line-height: 1.2;
}
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 {
mask-image: url("/themes/erabletheme/assets/icons/arrow-down-s-line.svg");
background-size: contain;
background-color: #33ffc4;
background-color: #0c8461;
width: 1.3rem;
height: 1.3rem;
color: #33ffc4;
transform: rotate(0deg);
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.is-active {
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 .projets_list.closed,
@@ -2366,7 +2351,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
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 {
color: #33ffc4;
color: #0c8461;
text-transform: uppercase;
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 {
font-size: 0.8125rem;
font-weight: 800;
color: #33ffc4;
color: #0c8461;
}
.fullpage.meetup-offre > h2 {
margin-bottom: 3vh;
@@ -2556,7 +2541,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
grid-column: 2/4;
grid-row: 1/2;
text-transform: uppercase;
color: #33ffc4;
color: #0c8461;
font-weight: 800;
}
.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-row: 3/4;
font-weight: 800;
color: #33ffc4;
color: #0c8461;
}
.fullpage.meetup-offre > .offre-content > div > div > div > div > .offre-localisation > h2 {
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 {
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 {
display: none;
}
@@ -3015,7 +3006,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
.fullpage.projet_full .retour_projets a {
font-size: 0.8125rem;
font-weight: 800;
color: #33ffc4;
color: #0c8461;
}
.fullpage.projet_full .sous_titre > div > div {
font-family: "Vogun", serif;
@@ -3239,7 +3230,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
font-weight: 500;
font-size: 1.375rem;
line-height: 1.2;
color: #33ffc4;
color: #0c8461;
display: flex;
align-items: center;
gap: 1rem;
@@ -3579,7 +3570,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
.ressource .retour_ressources a {
font-size: 0.8125rem;
font-weight: 800;
color: #33ffc4;
color: #0c8461;
}
.ressource > div:not(.retour_ressources) {
margin: 3vw;
@@ -3680,7 +3671,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
padding-bottom: 0.5rem;
}
.faq-fullpage .faq-question > span > a {
color: #33ffc4;
color: #0c8461;
font-weight: 800;
display: flex;
align-items: center;
@@ -3698,7 +3689,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) >
padding-top: 1rem;
padding-bottom: 0.5rem;
margin-left: -40px;
color: #33ffc4;
color: #0c8461;
}
.faq-fullpage .faq-question-answer:last-of-type {
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 {
font-size: 0.8125rem;
font-weight: 800;
color: #33ffc4;
color: #0c8461;
}
.actu_full .article_meta {
padding-top: 1.5rem;

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

@@ -595,88 +595,6 @@
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
// 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),
// au-dessus des cards, leur bas débordant de `overlap` px sur le
// haut des cards. offsetVw : décalage horizontal vers l'intérieur.
// Décor home-above : flower-1 (gauche), au-dessus des cards, son bas
// débordant de `overlap` px sur le haut des cards. offsetVw décale
// 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.
//
const HOME_ABOVE_CONFIGS = [
{ side: 'left', file: 'drawings/flower-1.png', widthVw: 15, overlap: 40, offsetVw: 8 },
{ side: 'right', file: 'drawings/bird-1.png', widthVw: 15, overlap: 40, offsetVw: 4 },
{ side: 'left', file: 'drawings/flower-1.png', widthVw: 15, overlap: 40, offsetVw: -3, offsetVwDesktop: 0 },
];
const homeAboveState = [];
@@ -770,9 +690,9 @@
img.setAttribute('aria-hidden', 'true');
img.setAttribute('alt', '');
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);
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();
}
@@ -793,19 +713,25 @@
const bottomFromLcBottom = (lcTopAbs + lcHeight) - imgBottom;
entry.img.style.width = widthPx + '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 :
// - 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.
// - flower-3 collée au bord droit du viewport (tronquée), centre
// vertical à 1/3 depuis le haut du bloc.
// Pas de parallax.
//
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' },
];
const homeProjetState = [];
@@ -849,12 +775,17 @@
const blockHeightPx = bRect.height;
img.style.width = widthPx + 'px';
if (entry.anchor === 'block-left-top') {
// bird-2 remontée de 0.6× sa hauteur au-dessus du bloc.
const top = blockTopAbs - heightPx * 0.6;
// bird-3 remontée de 0.75× sa hauteur au-dessus du bloc,
// puis redescendue de 20px (toutes vues).
const top = blockTopAbs - heightPx * 0.75 + 20;
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 {
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.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() {
if (rellax) { try { rellax.destroy(); } catch (e) { /* noop */ } }
rellax = new Rellax('.bgImg', { wrapper: 'body' });
@@ -923,7 +882,7 @@
setupHomeDiapoDecor();
setupHomeAboveDecor();
setupHomeProjetDecor();
setupPageDecor();
setupMapDecor();
initRellax();
});
@@ -938,7 +897,7 @@
setupHomeDiapoDecor();
setupHomeAboveDecor();
setupHomeProjetDecor();
setupPageDecor();
setupMapDecor();
initRellax();
}, 200);
});

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

@@ -11,7 +11,7 @@
padding-top: 1rem;
padding-bottom: 0.5rem;
> span > a {
color: $teal;
color: $fluo_green_text;
font-weight: 800;
display: flex;
align-items: center;
@@ -33,7 +33,7 @@
padding-top: 1rem;
padding-bottom: 0.5rem;
margin-left: -40px;
color: $teal;
color: $fluo_green_text;
}
}
.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-weight: $fw_medium;
font-size: $fs_lg;
color: $fluo_green;
color: $fluo_green_text;
line-height: $lh_tight;
> div {
mask-image: url('/themes/erabletheme/assets/icons/arrow-down-s-line.svg');
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;
height: 1.3rem;
color: $fluo_green;
transform: rotate(0deg);
transition: transform 0.3s ease;
&.closed {
@@ -382,7 +383,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) {
&:hover,
&.is-active {
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
p {
@include main_text_content();
font-size: 1.1rem; // chapo home agrandi (au-dessus du corps courant)
margin: 0;
}
}

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

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

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

@@ -34,6 +34,12 @@
}
p {
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 {
@@ -206,7 +212,7 @@
a {
font-size: $fs_xs;
font-weight: 800;
color: $teal;
color: $fluo_green_text;
}
}
.sous_titre > div > div {
@@ -412,7 +418,7 @@
font-weight: $fw_medium;
font-size: $fs_lg;
line-height: $lh_tight;
color: $fluo_green;
color: $fluo_green_text;
display: flex;
align-items: center;
gap: 1rem;

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

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

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

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

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

@@ -1,5 +1,10 @@
$fluo_green: #33ffc4;
$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;
$dark_green: #0e3b2d;
$text_grey: #4a4a49;

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

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

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

@@ -38,7 +38,7 @@ $tile_height: 220vh;
.decor-left { left: 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-2 { top: 18%; height: 32vh; }
.decor-left-3 { top: 38%; height: 42vh; }
@@ -46,6 +46,10 @@ $tile_height: 220vh;
.decor-left-5 { top: 70%; height: 22vh; }
.decor-left_6,
.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) ---
.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;
}
&.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;
}
// 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 {
display: flex;
flex-wrap: wrap;

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

@@ -86,10 +86,6 @@
</main>
<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_middle">
<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-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="">
{# 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-2" data-rellax-speed="-3" src="/themes/erabletheme/assets/new-bg-shapes/right-2.png" aria-hidden="true" alt="">