167 lines
4.2 KiB
SCSS
167 lines
4.2 KiB
SCSS
// 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;
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
> div {
|
|
padding: 0 $x_margin;
|
|
display: grid;
|
|
grid-template-columns: 0.25fr 1fr;
|
|
grid-auto-rows: auto;
|
|
> div > div:first-of-type {
|
|
display: none;
|
|
}
|
|
> h2 {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
justify-self: start;
|
|
align-self: end;
|
|
> a {
|
|
display: block;
|
|
pointer-events: none;
|
|
> span {
|
|
display: block;
|
|
@include sous_titre_alt();
|
|
}
|
|
}
|
|
}
|
|
// lien
|
|
> div:has(a) {
|
|
grid-column: 2;
|
|
grid-row: 3;
|
|
> 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;
|
|
}
|
|
}
|
|
// image
|
|
> div:has(img) {
|
|
grid-column: 1;
|
|
grid-row: 1/4;
|
|
min-width: 120px;
|
|
padding: 2rem 0;
|
|
margin-right: 2rem;
|
|
img {
|
|
border: solid 1px $teal;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
// date
|
|
> div:has(time) {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
margin-top: -1rem;
|
|
align-self: center;
|
|
display: block;
|
|
padding-bottom: 0.5rem;
|
|
@include main_text_content();
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ressource {
|
|
.retour_ressources {
|
|
padding-top: 3vh;
|
|
padding-left: $x_margin;
|
|
@include main_text_content();
|
|
a {
|
|
font-size: $fs_xs;
|
|
font-weight: 800;
|
|
color: $teal;
|
|
}
|
|
}
|
|
> div:not(.retour_ressources) {
|
|
margin: $x_margin;
|
|
display: grid;
|
|
grid-template-columns: 0.25fr 1fr;
|
|
grid-auto-rows: auto;
|
|
> div > div:first-of-type {
|
|
display: none;
|
|
}
|
|
> h2 {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
justify-self: start;
|
|
> span {
|
|
//margin-top: -1rem !important;
|
|
display: block;
|
|
@include sous_titre_alt();
|
|
}
|
|
}
|
|
> div:not(.retour_ressources):first-of-type {
|
|
grid-column: 2;
|
|
grid-row: 3;
|
|
> div > span {
|
|
margin-top: -1rem;
|
|
@include fluo_button();
|
|
}
|
|
> div > span:last-of-type {
|
|
display: none;
|
|
}
|
|
}
|
|
> div:nth-of-type(2) {
|
|
grid-column: 1;
|
|
grid-row: 1/4;
|
|
padding: 2rem 0;
|
|
margin-right: 2rem;
|
|
img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
> div:nth-of-type(3) {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
margin-top: -1rem;
|
|
@include main_text_content();
|
|
}
|
|
}
|
|
}
|