application de la nouvelle identité sur toutes les pages
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user