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

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;