388 lines
12 KiB
SCSS
388 lines
12 KiB
SCSS
// 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;
|
|
margin-bottom: 7vh;
|
|
z-index: 1;
|
|
position: relative;
|
|
width: auto;
|
|
display: inline-block;
|
|
line-height: 1.3;
|
|
@include main_title();
|
|
}
|
|
|
|
.legende {
|
|
display: block !important;
|
|
font-size: 0.8rem;
|
|
color: $dark_green;
|
|
}
|
|
|
|
.fullpage_content {
|
|
> h2 {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.sous_titre {
|
|
padding: 0 $x_margin;
|
|
@include sous_titre_alt();
|
|
}
|
|
|
|
p {
|
|
padding: 0 $x_margin;
|
|
margin-bottom: 2rem;
|
|
@include main_text_content();
|
|
}
|
|
|
|
p:first-of-type {
|
|
margin-top: 7vh;
|
|
}
|
|
|
|
|
|
.liens_fixed > div > div, .file_fixed > div > div,
|
|
.liens > div > div, .file_fixed > div > div {
|
|
text-align: right;
|
|
padding: 0 calc($x_margin / 2);
|
|
margin: 2rem 0;
|
|
@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;
|
|
margin: 0;
|
|
//position: fixed; -> dans le js direct
|
|
//left: 75vw;
|
|
bottom: 10vh;
|
|
> div {
|
|
height: 3vh;
|
|
}
|
|
a {
|
|
max-width: calc(25vw - $x_margin * 2);
|
|
background-color: white;
|
|
}
|
|
}
|
|
}
|
|
.file_fixed span:last-of-type {
|
|
display: none;
|
|
}
|
|
|
|
h3, h4, h5, h6 {
|
|
margin-bottom: 1rem;
|
|
padding-left: $x_margin;
|
|
@include sous_titre();
|
|
}
|
|
.faded {
|
|
opacity: 0;
|
|
transform: translateY(2rem);
|
|
transition: all 0.5s ease 0.2s;
|
|
}
|
|
.fade-in {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.views-row {
|
|
margin-bottom: 8vh;
|
|
}
|
|
@media (min-width: $breakpoint_tablet) {
|
|
margin-top: 5vh;
|
|
padding-top: 0;
|
|
width: 75vw;
|
|
margin-left: 12.5vw;
|
|
}
|
|
@media (min-width: $breakpoint_desktop) {
|
|
margin-top: 13vh;
|
|
width: 50vw;
|
|
margin-left: 25%;
|
|
}
|
|
|
|
&.large-container {
|
|
@media (min-width: $breakpoint_tablet) {
|
|
width: auto;
|
|
margin-left: calc($x_margin * 2.5);
|
|
margin-right: calc($x_margin * 2.5);
|
|
}
|
|
}
|
|
}
|
|
|
|
main:has(#block-erabletheme-leprogramme-2),
|
|
main:has(#block-erabletheme-views-block-projets-block-1) {
|
|
.fullpage {
|
|
@media (min-width: $breakpoint_tablet) {
|
|
width: 70vw;
|
|
margin-left: 2vw;
|
|
overflow-x: hidden;
|
|
}
|
|
@media (min-width: $breakpoint_desktop) {
|
|
width: 50vw;
|
|
margin-left: 3vw;
|
|
margin-right: 24vw;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2),
|
|
aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) {
|
|
height: auto;
|
|
margin-top: 2vh;
|
|
margin-bottom: 2vh;
|
|
@media screen and (min-width: $breakpoint_tablet) {
|
|
margin-top: 5vh;
|
|
margin-bottom: 0;
|
|
}
|
|
@media screen and (min-width: $breakpoint_desktop) {
|
|
margin-top: 13vh;
|
|
}
|
|
> div {
|
|
width: auto;
|
|
display: inline-block;
|
|
@media screen and (min-width: $breakpoint_tablet) {
|
|
position: sticky;
|
|
top: 5vh;
|
|
width: 27vw;
|
|
}
|
|
@media screen and (min-width: $breakpoint_desktop) {
|
|
top: 12vh;
|
|
width: 22vw;
|
|
}
|
|
#block-erabletheme-leprogramme-2,
|
|
#block-erabletheme-views-block-projets-block-1 {
|
|
> div > div {
|
|
width: auto !important;
|
|
margin: 0 !important;
|
|
}
|
|
padding: 1.5rem;
|
|
background-color: white;
|
|
border-bottom: 7px solid $fluo_green;
|
|
margin-left: 2vw;
|
|
> h2 {
|
|
padding-bottom: 1rem;
|
|
border-bottom: solid 1px $fluo_green;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
cursor: pointer;
|
|
// 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: $fluo_green;
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
color: $fluo_green;
|
|
transform: rotate(0deg);
|
|
transition: transform 0.3s ease;
|
|
&.closed {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
> ul,
|
|
.projets_list {
|
|
max-height: 100vh;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
transition: max-height 0.6s ease;
|
|
> li,
|
|
.views-row {
|
|
margin: 1rem 0;
|
|
// Items sidebar : Vogun, item actif en brand color (pas gras).
|
|
a {
|
|
font-family: $vogun;
|
|
font-weight: $fw_regular;
|
|
font-size: $fs_sm;
|
|
color: black;
|
|
line-height: $lh_normal;
|
|
&:hover,
|
|
&.is-active {
|
|
font-weight: $fw_regular;
|
|
color: $fluo_green;
|
|
}
|
|
}
|
|
}
|
|
&.closed {
|
|
max-height: 0vh;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|