application de la nouvelle identité sur toutes les pages

This commit is contained in:
2026-06-01 22:10:03 +02:00
parent a4cc0ef538
commit b52190eff6
44 changed files with 1369 additions and 907 deletions

View File

@@ -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 <h2> et .sous_titre ont été sortis dans .page-header-outside ;
// l'ancien sélecteur `h2 + div` est remplacé par `.article_meta + div`
// qui cible le wrapper de contenu directement.
.article_meta + div {
position: relative;
padding: 0 $x_margin;
.visually-hidden {
width: 0% !important;
}
.sous_titre {
margin-top: -1.5rem;
> div > div {
font-size: $fs_lg;
margin-bottom: 30px;
}
}
> div {
> div {
width: 100%;
@@ -68,6 +60,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;
@@ -80,6 +76,7 @@
}
a {
max-width: calc(25vw - $x_margin * 2);
background-color: white;
}
}
}

View File

@@ -39,7 +39,22 @@
align-items: center;
gap: 1rem;
#block-erabletheme-logorep img { max-width: 100px; height: auto; }
#block-erabletheme-logoepau img { max-width: 150px; height: auto; }
// Logo epau : padding vertical pour cohérence visuelle avec le header
// (le logo a moins de marge interne que les autres).
#block-erabletheme-logoepau {
a {
display: flex;
align-items: center;
height: 4.5rem; // hauteur de référence (= $header_height)
padding: 1.4rem 0;
box-sizing: border-box;
}
img {
max-width: 150px;
height: 100%;
width: auto;
}
}
}
// --- Groupe droite : navs + linkedin ---

View File

@@ -49,12 +49,44 @@ $header_height: 4.5rem; // 72px maquette
padding: 0 1rem;
}
// Logo République : occupe toute la hauteur du header
// (pas le -1rem de marge appliqué aux autres logos).
#block-erabletheme-logorep-2 {
padding-left: 1.25rem;
img {
max-height: $header_height;
height: $header_height;
width: auto;
}
}
#block-erabletheme-logoerable {
margin-left: auto; // pousse le burger à droite
img {
width: auto;
height: auto;
max-height: calc($header_height - 1rem);
}
}
// Templates custom (block--erabletheme-logoepau-2 et logoerable)
// → structure <div><a><img> hors du sélecteur générique
// `div > div > div img`. On rappelle la contrainte de hauteur.
// Padding vertical pour réduire visuellement le logo epau,
// qui a moins de marge interne que les autres logos.
#block-erabletheme-logoepau-2 {
a {
display: flex;
align-items: center;
height: 100%;
padding: 1.4rem 0;
box-sizing: border-box;
}
img {
width: auto;
height: 100%;
max-height: 100%;
}
}
#block-erabletheme-socialmedialinks {
@@ -208,9 +240,6 @@ $header_height: 4.5rem; // 72px maquette
}
}
#block-erabletheme-navigationprincipale {
margin-top: 0 !important;
}
}
> div:nth-of-type(2) {
@@ -219,51 +248,6 @@ $header_height: 4.5rem; // 72px maquette
}
}
#block-erabletheme-navigationprincipale {
background: linear-gradient(to bottom, white, rgba(255, 255, 255, 0.8) 50%, transparent);
width: 100%;
display: none;
position: absolute;
padding-top: 1rem;
@media (min-width: $breakpoint_desktop) {
display: block;
}
ul {
width: 100%;
display: flex;
padding: 1rem 10vw;
justify-content: space-around;
li {
font-family: $marianne;
font-size: $fs_sm;
padding: 9px 16px;
background-color: white;
transition: background-color 0.3s ease;
&:first-of-type {
display: flex;
justify-items: center;
&::after {
content: url(../assets/icons/arrow-down-s-line.svg);
display: inline-block;
height: 1rem;
width: 1rem;
margin-left: 0.2rem;
}
}
&:hover, &.submenu-open {
background-color: $fluo_green;
}
a {
font-weight: 800;
color: black;
&:is-active {
background-color: $fluo_green;
}
}
}
}
}
#block-erabletheme-leprogramme {
position: fixed;
background-color: white;