application de la nouvelle identité sur toutes les pages
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -1,8 +1,172 @@
|
||||
// En-tête de page placé HORS de la colonne blanche (.fullpage) :
|
||||
// "Retour …", <h2>, 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 <h2>
|
||||
// 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 <p>).
|
||||
// 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 <p>, 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 <main>) : 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 <main> 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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 <p> 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 <a> 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;
|
||||
}
|
||||
|
||||
@@ -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 <main> à ~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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
$fluo_green: #33ffc4;
|
||||
$teal: $fluo_green;
|
||||
$beige: #fcf9ee;
|
||||
$dark_green: #314e41;
|
||||
$dark_green: #0e3b2d;
|
||||
$text_grey: #4a4a49;
|
||||
$page_bg: #f9f9f9;
|
||||
|
||||
|
||||
@@ -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; }
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 ---
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user