scss refactor: main.scss split into abstracts/global/pages partials, kebab-case (compiled css unchanged)
This commit is contained in:
+1
-1
File diff suppressed because one or more lines are too long
@@ -1,756 +1,16 @@
|
||||
@use "partials/variables" as *;
|
||||
@use "partials/colors" as *;
|
||||
@use "partials/fonts" as *;
|
||||
@use "partials/mixins" as *;
|
||||
|
||||
a, a:visited{
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: color 0.15s ease-out;
|
||||
}
|
||||
|
||||
body{
|
||||
margin: 0;
|
||||
// background-color: green;
|
||||
font-weight: $default_fwght;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
// Splitting met .word ET .char en inline-block :
|
||||
// - inline-block sur .char crée une opportunité de coupure entre CHAQUE lettre ;
|
||||
// - inline-block sur .word (dimensionné en max-content) empêche tout retour à la
|
||||
// ligne interne, donc les soft hyphens ne peuvent jamais couper le mot.
|
||||
// On repasse les deux en inline : le mot redevient un flux de texte qui ne coupe
|
||||
// qu'aux césures logicielles (U+00AD) insérées par le JS.
|
||||
// Spécificité (0,2,1) pour battre `.splitting .word/.char` de Splitting.
|
||||
.splitting span.word,
|
||||
.splitting span.char{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
// _ _
|
||||
// | | | |
|
||||
// | | __ _ _ _ ___ _ _| |_
|
||||
// | | / _` | | | |/ _ \| | | | __|
|
||||
// | |___| (_| | |_| | (_) | |_| | |_
|
||||
// \_____/\__,_|\__, |\___/ \__,_|\__|
|
||||
// __/ |
|
||||
// |___/
|
||||
|
||||
div.layout-container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
max-width:$layout_width;
|
||||
margin: 0 auto;
|
||||
header[role="banner"]{
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 0.5em 0;
|
||||
flex: 1 1 $header_height;
|
||||
z-index: 100;
|
||||
// position: fixed;
|
||||
// top:0;
|
||||
// width: 100%;
|
||||
height: $header_height;
|
||||
min-height: $header_height;
|
||||
}
|
||||
main[role="main"]{
|
||||
flex: 1 1 auto;
|
||||
// padding:5em 0;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
// footer[role="contentinfo"]{
|
||||
// // flex: 0 1 content;
|
||||
// z-index: 100;
|
||||
// position: fixed;
|
||||
// bottom: 0;
|
||||
// width: 100%;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
||||
// _ _ _
|
||||
// | | | | | |
|
||||
// | |_| | ___ __ _ __| | ___ _ __
|
||||
// | _ |/ _ \/ _` |/ _` |/ _ \ '__|
|
||||
// | | | | __/ (_| | (_| | __/ |
|
||||
// \_| |_/\___|\__,_|\__,_|\___|_|
|
||||
|
||||
|
||||
header[role="banner"]{
|
||||
background-color: #fff;
|
||||
// box-shadow: 0 -5px 15px #000;
|
||||
|
||||
.header-middle{
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
align-items: center;
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
|
||||
#block-leshed-identitedusite{
|
||||
a{
|
||||
// color: ;
|
||||
text-decoration: none;
|
||||
font-size: 2em;
|
||||
font-weight: 500;
|
||||
margin-right: 0.5em;
|
||||
// &:hover{
|
||||
// color: $rose;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.header-right{
|
||||
// position: relative;
|
||||
height:20px; width:20px;
|
||||
cursor: pointer;
|
||||
// background-color: green;
|
||||
|
||||
>div#burger-btn{
|
||||
position:relative;
|
||||
transition-duration: 0.5s;
|
||||
transition-property: transform;
|
||||
top: 8.5px;
|
||||
&, &::before, &::after{
|
||||
// position: absolute;
|
||||
width:20px; height:3px;
|
||||
background-color: #000;
|
||||
|
||||
}
|
||||
&:hover{
|
||||
&, &::before, &::after{
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
&::before, &::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
// background-color: red;
|
||||
}
|
||||
&::before{
|
||||
top:6px;
|
||||
}
|
||||
&::after{
|
||||
bottom: 6px;
|
||||
}
|
||||
&[opened]{
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&>div.wrapper{
|
||||
// fixed (et non absolute) pour échapper à l'overflow:hidden de
|
||||
// .layout-container : sinon le débord pleine largeur (et donc le
|
||||
// backdrop-filter) est rogné aux bords du conteneur centré.
|
||||
position:fixed;
|
||||
top:$header_height;
|
||||
left: 0;
|
||||
width:100vw;
|
||||
padding: 0 calc((100vw - $layout_width) / 2) 0 calc((100vw - $layout_width) / 2);
|
||||
|
||||
background-color: rgba(255,255,255,0.3);
|
||||
backdrop-filter: blur(7px);
|
||||
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition-duration: 0.5s;
|
||||
&[opened]{
|
||||
height: calc(100vh - $header_height);
|
||||
}
|
||||
nav#block-leshed-navigationprincipale{
|
||||
// width: $layout_width;
|
||||
// margin: 0 auto;
|
||||
padding-top: 10px;
|
||||
// background-color: #fff;
|
||||
>ul{
|
||||
margin: 0;
|
||||
padding:0;
|
||||
li{
|
||||
list-style: none;
|
||||
a{
|
||||
font-size: 4em;
|
||||
font-weight: 200;
|
||||
filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #fff);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div#block-leshed-selecteurdelangue{
|
||||
ul{
|
||||
margin:0;
|
||||
padding:0;
|
||||
li{
|
||||
list-style: none;
|
||||
padding:0;
|
||||
display: inline-block;
|
||||
font-size: 2em;
|
||||
&:first-child{
|
||||
&:after{
|
||||
content: " /";
|
||||
font-weight: 200;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
padding-left: 0.3em;
|
||||
|
||||
}
|
||||
&.is-active{
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
} // end of header[role="banner"]{
|
||||
|
||||
|
||||
// ____ _ _ _
|
||||
// / ___| | ___ | |__ __ _| |___
|
||||
// | | _| |/ _ \| '_ \ / _` | / __|
|
||||
// | |_| | | (_) | |_) | (_| | \__ \
|
||||
// \____|_|\___/|_.__/ \__,_|_|___/
|
||||
|
||||
.variable-title{
|
||||
margin: 0;
|
||||
font-weight: 200;
|
||||
text-transform:lowercase;
|
||||
line-height: 1;
|
||||
// margin-left: -0.04em;
|
||||
filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #fff);
|
||||
span.word{
|
||||
span.char{
|
||||
letter-spacing:-0.1em;
|
||||
}
|
||||
}
|
||||
// span.whitespace{
|
||||
// letter-spacing: 0.5em;
|
||||
// }
|
||||
}
|
||||
|
||||
// Titres traités par assets/js/titles.js : garder identique à TITLE_SELECTORS.
|
||||
$variable-title-selectors: (
|
||||
'#block-leshed-identitedusite>a',
|
||||
'article.node-type-projet>header>h2',
|
||||
'article.node-type-projet>.cols>.left>h2',
|
||||
'article.node-type-projet.view-mode-full h2.node-title',
|
||||
'article.node-type-evenement>header>h2',
|
||||
'article.node-type-evenement>header>.field_dates>time',
|
||||
'article.node-type-evenement.view-mode-full h2.node-title',
|
||||
'article.node-type-evenement.view-mode-full .field_dates.digit-dates span.date-part',
|
||||
);
|
||||
|
||||
// Avant le split : même métrique qu'après, pour éviter un saut de mise en page.
|
||||
:where(#{$variable-title-selectors}):not(.splitting){
|
||||
margin: 0;
|
||||
font-weight: 200;
|
||||
text-transform: lowercase;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.1em;
|
||||
}
|
||||
|
||||
// Masqués (place conservée) jusqu'au split ; réaffichés après 3 s si le JS échoue.
|
||||
@media (scripting: enabled){
|
||||
:where(#{$variable-title-selectors}):not(.is-ready){
|
||||
visibility: hidden;
|
||||
animation: leshed-title-failsafe 0s 3s forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes leshed-title-failsafe{
|
||||
to{ visibility: visible; }
|
||||
}
|
||||
|
||||
|
||||
div#block-leshed-titredelapage h1{
|
||||
font-size: 1em;
|
||||
font-weight: $default_fwght;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// _____ _____ __ ____ ___ _ ____
|
||||
// |_ _/ _ \ \ / / / ___/ _ \| | / ___|
|
||||
// | || | | \ \ /\ / / | | | | | | | \___ \
|
||||
// | || |_| |\ V V / | |__| |_| | |___ ___) |
|
||||
// |_| \___/ \_/\_/ \____\___/|_____|____/
|
||||
|
||||
@mixin nodeListe{
|
||||
>header{
|
||||
|
||||
>h2{
|
||||
font-size: 5em;
|
||||
}
|
||||
}
|
||||
.field_artiste_s_invite_s{
|
||||
font-size: 1.8em;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.field_type_d_evenement,
|
||||
.field_type_de_projet{
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&.has-image{
|
||||
>header{
|
||||
>h2{
|
||||
position: relative;
|
||||
max-height: 1em;
|
||||
overflow: visible;
|
||||
z-index: 10;
|
||||
// text-shadow: 0 0 10px #fff;
|
||||
// box-shadow: 0 0 15px #f00;
|
||||
// filter: drop-shadow(0 0 5px #fff);
|
||||
|
||||
// Si le titre déborde de N lignes sous l'image, on remet N lignes
|
||||
// supplémentaires dans le flux avant l'image pour absorber le débordement.
|
||||
@for $i from 1 through 10 {
|
||||
&[data-overflow-lines="#{$i}"] {
|
||||
max-height: #{$i}em;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.field_images{
|
||||
position:relative;
|
||||
// width: 100%;
|
||||
z-index: 5;
|
||||
a{
|
||||
display:block;
|
||||
img{
|
||||
width:100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin projetListe{
|
||||
@include nodeListe();
|
||||
|
||||
div.field_artiste_s_invite_s.field-items.multiple{
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
.field-item{
|
||||
display: inline-block;
|
||||
&:not(:last-of-type):after{
|
||||
content: ", ";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin evenementListe{
|
||||
@include nodeListe();
|
||||
>header{
|
||||
.field_dates{
|
||||
font-size: 4em;
|
||||
line-height: 1;
|
||||
time{
|
||||
span.date-part:not(:last-child){
|
||||
&:after{
|
||||
content:".";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
div.layout.layout--twocol-section--50-50{
|
||||
flex-wrap: nowrap;
|
||||
// Sans ça, `align-items: stretch` (défaut flex) étire les deux colonnes à la
|
||||
// même hauteur : la synchro de scroll ne verrait aucune différence de hauteur.
|
||||
// flex-start = chaque colonne prend la hauteur de son contenu.
|
||||
align-items: flex-start;
|
||||
|
||||
column-gap: $colsgap;
|
||||
div.layout__region{
|
||||
max-width: calc(50% - $colsgap / 2);
|
||||
flex: 1 0 calc(50% - $colsgap / 2);
|
||||
.views-row{
|
||||
// border: 1px solid red;
|
||||
// box-sizing: border-box;
|
||||
margin-bottom: 2em;
|
||||
max-width: 100%;
|
||||
article.node-type-projet{
|
||||
@include projetListe();
|
||||
}
|
||||
article.node-type-evenement{
|
||||
@include evenementListe();
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// _ _ _ _____ _ _
|
||||
// | \ | | ___ __| | ___| ___| _| | |
|
||||
// | \| |/ _ \ / _` |/ _ \ |_ | | | | | |
|
||||
// | |\ | (_) | (_| | __/ _|| |_| | | |
|
||||
// |_| \_|\___/ \__,_|\___|_| \__,_|_|_|
|
||||
|
||||
|
||||
@mixin nodefull{
|
||||
div.cols{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: $colsgap;
|
||||
align-items: flex-start;
|
||||
div.col{
|
||||
flex:0 0 calc(50% - $colsgap / 2);
|
||||
max-width: calc(50% - $colsgap / 2);
|
||||
|
||||
&.left{
|
||||
z-index: 10;
|
||||
// padding-bottom: 5em;
|
||||
// box-sizing: border-box;
|
||||
>header{
|
||||
transform-origin: 0 0;
|
||||
width: 205%;//calc(50% - $colsgap / 2);
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
|
||||
>h2.node-title{
|
||||
position: relative;
|
||||
font-size: 12em;
|
||||
margin: 0;
|
||||
&.leshed-svg-export-target{
|
||||
pointer-events: painted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field_artiste_s_invite_s{
|
||||
font-size: 1.8em;
|
||||
font-weight: 300;
|
||||
}
|
||||
.field_invite_accompagne_curate_p,
|
||||
.field_partenaire_s{
|
||||
margin-top: 1em;
|
||||
font-weight: 400;
|
||||
.field-label{
|
||||
font-weight: $default_fwght;
|
||||
}
|
||||
// >div{
|
||||
// display: inline-block;
|
||||
// }
|
||||
}
|
||||
.field_dates{
|
||||
margin-top: 1em;
|
||||
time{
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
>div.spacer{
|
||||
display: block;
|
||||
height: 5em;
|
||||
}
|
||||
}
|
||||
&.right{
|
||||
// Étire .field_images sur toute la hauteur de la colonne (= colonne la
|
||||
// plus haute, via le stretch de .cols) : le contexte de collage sticky
|
||||
// couvre alors tout le scroll, donc les cartes restent figées tant que
|
||||
// la colonne gauche défile encore (cf. point 6).
|
||||
display: flex;
|
||||
.field_images{
|
||||
flex: 1;
|
||||
// .field-items{
|
||||
&:after{
|
||||
display: block;
|
||||
position: relative;
|
||||
content: "";
|
||||
// border: 1px solid red;
|
||||
width: 100%;
|
||||
// Étend le contexte sticky au-delà de la dernière image pour
|
||||
// couvrir le scroll restant de la colonne gauche. Hauteur calculée
|
||||
// en JS (voir main.js, adjustStickyContext) via --sticky-extent.
|
||||
height: var(--sticky-extent, 100vh);
|
||||
}
|
||||
// }
|
||||
.field-item{
|
||||
position: relative;
|
||||
// Empilement "cartes" : chaque image se fige au même endroit (haut) et
|
||||
// est recouverte par la suivante (l'ordre du DOM fait que la dernière
|
||||
// passe au-dessus). La 1re image ne bouge pas. Desktop uniquement.
|
||||
@media (min-width: 768px){
|
||||
position: sticky;
|
||||
top: 0;
|
||||
// &:last-child:after{
|
||||
// content: "";
|
||||
// // position: relative;
|
||||
// display:block;
|
||||
// // blockquote.image-field-caption{
|
||||
// height: 100vh;
|
||||
// width:100%;
|
||||
// border: 1px solid red;
|
||||
// // }
|
||||
// }
|
||||
}
|
||||
figure{
|
||||
margin: 0;
|
||||
a{
|
||||
display: block;
|
||||
img{
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
figcaption.image-field-caption{
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
bottom: 0; left: 0;
|
||||
height: 5em;
|
||||
width: 100%;
|
||||
overflow: visible;
|
||||
display: block;
|
||||
// border: 1px solid red;
|
||||
blockquote{
|
||||
position: absolute;
|
||||
bottom: 0; left: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background-color: rgba(0,0,0,0.65);
|
||||
color: #fff;
|
||||
pointer-events: none;
|
||||
p{
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
font-weight: 300;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
&:hover{
|
||||
// z-index:200;
|
||||
blockquote{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover{
|
||||
z-index:200;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ____ _ _
|
||||
// | _ \ _ __ ___ (_) ___| |_
|
||||
// | |_) | '__/ _ \| |/ _ \ __|
|
||||
// | __/| | | (_) | | __/ |_
|
||||
// |_| |_| \___// |\___|\__|
|
||||
// |__/
|
||||
article.node-type-projet.view-mode-full{
|
||||
@include nodefull();
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
// _____ _
|
||||
// | ____|_ _____ _ __ ___ _ __ ___ ___ _ __ | |_
|
||||
// | _| \ \ / / _ \ '_ \ / _ \ '_ ` _ \ / _ \ '_ \| __|
|
||||
// | |___ \ V / __/ | | | __/ | | | | | __/ | | | |_
|
||||
// |_____| \_/ \___|_| |_|\___|_| |_| |_|\___|_| |_|\__|
|
||||
|
||||
@mixin event-date-time($ref: 10em){
|
||||
display: flex;
|
||||
position: relative;
|
||||
time{
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: $ref ($ref * 7 / 18);
|
||||
grid-template-rows: $ref / 2.3 $ref / 2.3;
|
||||
grid-template-areas:
|
||||
"day month"
|
||||
"day year";
|
||||
|
||||
span.date-day{
|
||||
grid-area: day;
|
||||
font-size: $ref;
|
||||
font-weight: 100;
|
||||
font-style: italic;
|
||||
}
|
||||
span.date-month{
|
||||
grid-area: month;
|
||||
align-self: end;
|
||||
font-weight: 400;
|
||||
}
|
||||
span.date-year{
|
||||
grid-area: year;
|
||||
align-self: end;
|
||||
font-weight: 700;
|
||||
}
|
||||
span.date-month,
|
||||
span.date-year{
|
||||
font-size: $ref / 2.45;
|
||||
}
|
||||
}
|
||||
span.date-sep{
|
||||
font-size: $ref / 2;
|
||||
padding:0 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
article.node-type-evenement.view-mode-full{
|
||||
@include nodefull();
|
||||
|
||||
.field_dates.digit-dates{
|
||||
transform-origin: 0 0;
|
||||
@include event-date-time();
|
||||
}
|
||||
|
||||
div.field_projet_s_lie_s{
|
||||
margin-top: 2em;
|
||||
.field-label{
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
article.node-type-projet.view-mode-tableau_liste{
|
||||
@include projetListe();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// __ ___ _ _ _ ____ _ _
|
||||
// \ \ / (_) _____ _____ / \ _ __ ___| |__ (_)_ _____ ___ | _ \ _ __ ___ (_) ___| |_
|
||||
// \ \ / /| |/ _ \ \ /\ / / __| / _ \ | '__/ __| '_ \| \ \ / / _ \/ __| | |_) | '__/ _ \| |/ _ \ __|
|
||||
// \ V / | | __/\ V V /\__ \ / ___ \| | | (__| | | | |\ V / __/\__ \ | __/| | | (_) | | __/ |_
|
||||
// \_/ |_|\___| \_/\_/ |___/ /_/ \_\_| \___|_| |_|_| \_/ \___||___/ |_| |_| \___// |\___|\__|
|
||||
// |__/
|
||||
div.views-archives-projets{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 2em;
|
||||
gap: $colsgap;
|
||||
div.views-row{
|
||||
flex: 1 0 calc(25% - $colsgap);
|
||||
width: calc(25% - $colsgap);
|
||||
}
|
||||
|
||||
article.node-type-projet.view-mode-tableau_liste{
|
||||
|
||||
@include projetListe();
|
||||
>header{
|
||||
>h2{
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
form#views-exposed-form-archives-page-1{
|
||||
div.bef-links{
|
||||
ul{
|
||||
margin:0; padding:0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
li{
|
||||
list-style: none;
|
||||
flex: 0 1 auto;
|
||||
padding: 0.2em 0.5em;
|
||||
font-size: 0.756em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// __ ___ _ _ _ _____ _
|
||||
// \ \ / (_) _____ _____ / \ _ __ ___| |__ (_)_ _____ ___ | ____|_ _____ _ __ ___ _ __ ___ ___ _ __ | |_ ___
|
||||
// \ \ / /| |/ _ \ \ /\ / / __| / _ \ | '__/ __| '_ \| \ \ / / _ \/ __| | _| \ \ / / _ \ '_ \ / _ \ '_ ` _ \ / _ \ '_ \| __/ __|
|
||||
// \ V / | | __/\ V V /\__ \ / ___ \| | | (__| | | | |\ V / __/\__ \ | |___ \ V / __/ | | | __/ | | | | | __/ | | | |_\__ \
|
||||
// \_/ |_|\___| \_/\_/ |___/ /_/ \_\_| \___|_| |_|_| \_/ \___||___/ |_____| \_/ \___|_| |_|\___|_| |_| |_|\___|_| |_|\__|___/
|
||||
div.views-archives-evenements {
|
||||
|
||||
& > h3{
|
||||
border-bottom: 1px solid #999;
|
||||
}
|
||||
|
||||
article.node-type-evenement.view-mode-calendrier{
|
||||
// @include evenementListe();
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1em;
|
||||
header{
|
||||
flex:0 1 auto;
|
||||
// width: 5em;
|
||||
padding:0 1em 0 0;
|
||||
|
||||
.field_dates{
|
||||
@include event-date-time(5em);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.6em;
|
||||
span.date-sep{
|
||||
display: block;
|
||||
width: 1em;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
transform-origin: center;
|
||||
transform: rotate(90deg) translateX(0.1em);
|
||||
line-height: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.content{
|
||||
flex:0 1 auto;
|
||||
h2.node-title{
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
section.last-cel{
|
||||
flex:0 1 auto;
|
||||
.field_images{
|
||||
a{
|
||||
display: block;
|
||||
width: 12em;
|
||||
height: 12em;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit:contain;
|
||||
object-position: top left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// ── Bibliothèques (aucun CSS émis, chargées par les autres) ────────────────
|
||||
@use "partials/abstracts/variables" as *;
|
||||
|
||||
// ── Socle global (présent sur toutes les pages) ────────────────────────────
|
||||
@use "partials/global/fonts" as *;
|
||||
@use "partials/global/base";
|
||||
@use "partials/global/layout";
|
||||
@use "partials/global/header";
|
||||
@use "partials/global/variable-titles";
|
||||
|
||||
// ── Pages (l'ordre ci-dessous EST la cascade) ──────────────────────────────
|
||||
@use "partials/pages/home";
|
||||
@use "partials/pages/projet";
|
||||
@use "partials/pages/evenement";
|
||||
@use "partials/pages/views-archives-projets";
|
||||
@use "partials/pages/views-archives-evenements";
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
@mixin event-date-time($ref: 10em){
|
||||
display: flex;
|
||||
position: relative;
|
||||
time{
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: $ref calc($ref * 7 / 18);
|
||||
grid-template-rows: calc($ref / 2.3) calc($ref / 2.3);
|
||||
grid-template-areas:
|
||||
"day month"
|
||||
"day year";
|
||||
|
||||
span.date-day{
|
||||
grid-area: day;
|
||||
font-size: $ref;
|
||||
font-weight: 100;
|
||||
font-style: italic;
|
||||
}
|
||||
span.date-month{
|
||||
grid-area: month;
|
||||
align-self: end;
|
||||
font-weight: 400;
|
||||
}
|
||||
span.date-year{
|
||||
grid-area: year;
|
||||
align-self: end;
|
||||
font-weight: 700;
|
||||
}
|
||||
span.date-month,
|
||||
span.date-year{
|
||||
font-size: calc($ref / 2.45);
|
||||
}
|
||||
}
|
||||
span.date-sep{
|
||||
font-size: calc($ref / 2);
|
||||
padding:0 0.2em;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
// _ _ _ _____ _ _
|
||||
// | \ | | ___ __| | ___| ___| _| | |
|
||||
// | \| |/ _ \ / _` |/ _ \ |_ | | | | | |
|
||||
// | |\ | (_) | (_| | __/ _|| |_| | | |
|
||||
// |_| \_|\___/ \__,_|\___|_| \__,_|_|_|
|
||||
|
||||
@use "variables" as *;
|
||||
|
||||
@mixin nodefull{
|
||||
div.cols{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: $colsgap;
|
||||
align-items: flex-start;
|
||||
div.col{
|
||||
flex:0 0 calc(50% - $colsgap / 2);
|
||||
max-width: calc(50% - $colsgap / 2);
|
||||
|
||||
&.left{
|
||||
z-index: 10;
|
||||
// padding-bottom: 5em;
|
||||
// box-sizing: border-box;
|
||||
>header{
|
||||
transform-origin: 0 0;
|
||||
width: 205%;//calc(50% - $colsgap / 2);
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
|
||||
>h2.node-title{
|
||||
position: relative;
|
||||
font-size: 12em;
|
||||
margin: 0;
|
||||
&.leshed-svg-export-target{
|
||||
pointer-events: painted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field_artiste_s_invite_s{
|
||||
font-size: 1.8em;
|
||||
font-weight: 300;
|
||||
}
|
||||
.field_invite_accompagne_curate_p,
|
||||
.field_partenaire_s{
|
||||
margin-top: 1em;
|
||||
font-weight: 400;
|
||||
.field-label{
|
||||
font-weight: $default_fwght;
|
||||
}
|
||||
// >div{
|
||||
// display: inline-block;
|
||||
// }
|
||||
}
|
||||
.field_dates{
|
||||
margin-top: 1em;
|
||||
time{
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
>div.spacer{
|
||||
display: block;
|
||||
height: 5em;
|
||||
}
|
||||
}
|
||||
&.right{
|
||||
// Étire .field_images sur toute la hauteur de la colonne (= colonne la
|
||||
// plus haute, via le stretch de .cols) : le contexte de collage sticky
|
||||
// couvre alors tout le scroll, donc les cartes restent figées tant que
|
||||
// la colonne gauche défile encore (cf. point 6).
|
||||
display: flex;
|
||||
.field_images{
|
||||
flex: 1;
|
||||
// .field-items{
|
||||
&:after{
|
||||
display: block;
|
||||
position: relative;
|
||||
content: "";
|
||||
// border: 1px solid red;
|
||||
width: 100%;
|
||||
// Étend le contexte sticky au-delà de la dernière image pour
|
||||
// couvrir le scroll restant de la colonne gauche. Hauteur calculée
|
||||
// en JS (voir main.js, adjustStickyContext) via --sticky-extent.
|
||||
height: var(--sticky-extent, 100vh);
|
||||
}
|
||||
// }
|
||||
.field-item{
|
||||
position: relative;
|
||||
// Empilement "cartes" : chaque image se fige au même endroit (haut) et
|
||||
// est recouverte par la suivante (l'ordre du DOM fait que la dernière
|
||||
// passe au-dessus). La 1re image ne bouge pas. Desktop uniquement.
|
||||
@media (min-width: 768px){
|
||||
position: sticky;
|
||||
top: 0;
|
||||
// &:last-child:after{
|
||||
// content: "";
|
||||
// // position: relative;
|
||||
// display:block;
|
||||
// // blockquote.image-field-caption{
|
||||
// height: 100vh;
|
||||
// width:100%;
|
||||
// border: 1px solid red;
|
||||
// // }
|
||||
// }
|
||||
}
|
||||
figure{
|
||||
margin: 0;
|
||||
a{
|
||||
display: block;
|
||||
img{
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
figcaption.image-field-caption{
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
bottom: 0; left: 0;
|
||||
height: 5em;
|
||||
width: 100%;
|
||||
overflow: visible;
|
||||
display: block;
|
||||
// border: 1px solid red;
|
||||
blockquote{
|
||||
position: absolute;
|
||||
bottom: 0; left: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background-color: rgba(0,0,0,0.65);
|
||||
color: #fff;
|
||||
pointer-events: none;
|
||||
p{
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
font-weight: 300;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
&:hover{
|
||||
// z-index:200;
|
||||
blockquote{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover{
|
||||
z-index:200;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
// _ _ _ ___ _ _ _
|
||||
// | \ | | ___ __| | ___ / _ \ _ __ | | (_)___| |_ ___
|
||||
// | \| |/ _ \ / _` |/ _ \ | | | | '_ \ | | | / __| __/ _ \
|
||||
// | |\ | (_) | (_| | __/ | |_| | | | | | |___| \__ \ || __/
|
||||
// |_| \_|\___/ \__,_|\___| \___/|_| |_| |_____|_|___/\__\___|
|
||||
|
||||
@use "variables" as *;
|
||||
|
||||
@mixin nodeOnListe{
|
||||
>header{
|
||||
|
||||
>h2{
|
||||
font-size: 5em;
|
||||
}
|
||||
}
|
||||
.field_artiste_s_invite_s{
|
||||
font-size: 1.8em;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.field_type_d_evenement,
|
||||
.field_type_de_projet{
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&.has-image{
|
||||
>header{
|
||||
>h2{
|
||||
position: relative;
|
||||
max-height: 1em;
|
||||
overflow: visible;
|
||||
z-index: 10;
|
||||
// text-shadow: 0 0 10px #fff;
|
||||
// box-shadow: 0 0 15px #f00;
|
||||
// filter: drop-shadow(0 0 5px #fff);
|
||||
|
||||
// Si le titre déborde de N lignes sous l'image, on remet N lignes
|
||||
// supplémentaires dans le flux avant l'image pour absorber le débordement.
|
||||
@for $i from 1 through 10 {
|
||||
&[data-overflow-lines="#{$i}"] {
|
||||
max-height: #{$i}em;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.field_images{
|
||||
position:relative;
|
||||
// width: 100%;
|
||||
z-index: 5;
|
||||
a{
|
||||
display:block;
|
||||
img{
|
||||
width:100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin projetOnListe{
|
||||
@include nodeOnListe();
|
||||
|
||||
div.field_artiste_s_invite_s.field-items.multiple{
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
.field-item{
|
||||
display: inline-block;
|
||||
&:not(:last-of-type):after{
|
||||
content: ", ";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin evenementOnListe{
|
||||
@include nodeOnListe();
|
||||
>header{
|
||||
.field_dates{
|
||||
font-size: 4em;
|
||||
line-height: 1;
|
||||
time{
|
||||
span.date-part:not(:last-child){
|
||||
&:after{
|
||||
content:".";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
// $bleu_site: #1642bc;
|
||||
// $bleu_typo: #0b1e52;
|
||||
// $rose: #f661e2;
|
||||
@@ -0,0 +1,21 @@
|
||||
// ____
|
||||
// | __ ) __ _ ___ ___
|
||||
// | _ \ / _` / __|/ _ \
|
||||
// | |_) | (_| \__ \ __/
|
||||
// |____/ \__,_|___/\___|
|
||||
|
||||
@use "../abstracts/variables" as *;
|
||||
|
||||
|
||||
a, a:visited{
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: color 0.15s ease-out;
|
||||
}
|
||||
|
||||
body{
|
||||
margin: 0;
|
||||
// background-color: green;
|
||||
font-weight: $default_fwght;
|
||||
line-height: 1.5;
|
||||
}
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
@use "../../fonts/epilogue/stylesheet" with ($font-path: "../fonts/epilogue");
|
||||
@use "../../../fonts/epilogue/stylesheet" with ($font-path: "../fonts/epilogue");
|
||||
|
||||
body{
|
||||
font-family: 'Epilogue';
|
||||
@@ -0,0 +1,141 @@
|
||||
// _ _ _
|
||||
// | | | | | |
|
||||
// | |_| | ___ __ _ __| | ___ _ __
|
||||
// | _ |/ _ \/ _` |/ _` |/ _ \ '__|
|
||||
// | | | | __/ (_| | (_| | __/ |
|
||||
// \_| |_/\___|\__,_|\__,_|\___|_|
|
||||
|
||||
@use "../abstracts/variables" as *;
|
||||
|
||||
|
||||
header[role="banner"]{
|
||||
background-color: #fff;
|
||||
// box-shadow: 0 -5px 15px #000;
|
||||
|
||||
.header-middle{
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
align-items: center;
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
|
||||
#block-leshed-identitedusite{
|
||||
a{
|
||||
// color: ;
|
||||
text-decoration: none;
|
||||
font-size: 2em;
|
||||
font-weight: 500;
|
||||
margin-right: 0.5em;
|
||||
// &:hover{
|
||||
// color: $rose;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.header-right{
|
||||
// position: relative;
|
||||
height:20px; width:20px;
|
||||
cursor: pointer;
|
||||
// background-color: green;
|
||||
|
||||
>div#burger-btn{
|
||||
position:relative;
|
||||
transition-duration: 0.5s;
|
||||
transition-property: transform;
|
||||
top: 8.5px;
|
||||
&, &::before, &::after{
|
||||
// position: absolute;
|
||||
width:20px; height:3px;
|
||||
background-color: #000;
|
||||
|
||||
}
|
||||
&:hover{
|
||||
&, &::before, &::after{
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
&::before, &::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
// background-color: red;
|
||||
}
|
||||
&::before{
|
||||
top:6px;
|
||||
}
|
||||
&::after{
|
||||
bottom: 6px;
|
||||
}
|
||||
&[opened]{
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&>div.wrapper{
|
||||
// fixed (et non absolute) pour échapper à l'overflow:hidden de
|
||||
// .layout-container : sinon le débord pleine largeur (et donc le
|
||||
// backdrop-filter) est rogné aux bords du conteneur centré.
|
||||
position:fixed;
|
||||
top:$header_height;
|
||||
left: 0;
|
||||
width:100vw;
|
||||
padding: 0 calc((100vw - $layout_width) / 2) 0 calc((100vw - $layout_width) / 2);
|
||||
|
||||
background-color: rgba(255,255,255,0.3);
|
||||
backdrop-filter: blur(7px);
|
||||
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition-duration: 0.5s;
|
||||
&[opened]{
|
||||
height: calc(100vh - $header_height);
|
||||
}
|
||||
nav#block-leshed-navigationprincipale{
|
||||
// width: $layout_width;
|
||||
// margin: 0 auto;
|
||||
padding-top: 10px;
|
||||
// background-color: #fff;
|
||||
>ul{
|
||||
margin: 0;
|
||||
padding:0;
|
||||
li{
|
||||
list-style: none;
|
||||
a{
|
||||
font-size: 4em;
|
||||
font-weight: 200;
|
||||
filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #fff);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div#block-leshed-selecteurdelangue{
|
||||
ul{
|
||||
margin:0;
|
||||
padding:0;
|
||||
li{
|
||||
list-style: none;
|
||||
padding:0;
|
||||
display: inline-block;
|
||||
font-size: 2em;
|
||||
&:first-child{
|
||||
&:after{
|
||||
content: " /";
|
||||
font-weight: 200;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
padding-left: 0.3em;
|
||||
|
||||
}
|
||||
&.is-active{
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
} // end of header[role="banner"]{
|
||||
@@ -0,0 +1,45 @@
|
||||
// _ _
|
||||
// | | | |
|
||||
// | | __ _ _ _ ___ _ _| |_
|
||||
// | | / _` | | | |/ _ \| | | | __|
|
||||
// | |___| (_| | |_| | (_) | |_| | |_
|
||||
// \_____/\__,_|\__, |\___/ \__,_|\__|
|
||||
// __/ |
|
||||
// |___/
|
||||
|
||||
@use "../abstracts/variables" as *;
|
||||
|
||||
|
||||
div.layout-container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
max-width:$layout_width;
|
||||
margin: 0 auto;
|
||||
header[role="banner"]{
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 0.5em 0;
|
||||
flex: 1 1 $header_height;
|
||||
z-index: 100;
|
||||
// position: fixed;
|
||||
// top:0;
|
||||
// width: 100%;
|
||||
height: $header_height;
|
||||
min-height: $header_height;
|
||||
}
|
||||
main[role="main"]{
|
||||
flex: 1 1 auto;
|
||||
// padding:5em 0;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
// footer[role="contentinfo"]{
|
||||
// // flex: 0 1 content;
|
||||
// z-index: 100;
|
||||
// position: fixed;
|
||||
// bottom: 0;
|
||||
// width: 100%;
|
||||
// }
|
||||
}
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
// __ __ _ _ _ _ _ _ _
|
||||
// \ \ / /_ _ _ __(_) __ _| |__ | | ___ | |_(_) |_| | ___
|
||||
// \ \ / / _` | '__| |/ _` | '_ \| |/ _ \ | __| | __| |/ _ \
|
||||
// \ V / (_| | | | | (_| | |_) | | __/ | |_| | |_| | __/
|
||||
// \_/ \__,_|_| |_|\__,_|_.__/|_|\___| \__|_|\__|_|\___|
|
||||
|
||||
|
||||
@use "../abstracts/variables" as *;
|
||||
|
||||
|
||||
// Splitting met .word ET .char en inline-block :
|
||||
// - inline-block sur .char crée une opportunité de coupure entre CHAQUE lettre ;
|
||||
// - inline-block sur .word (dimensionné en max-content) empêche tout retour à la
|
||||
// ligne interne, donc les soft hyphens ne peuvent jamais couper le mot.
|
||||
// On repasse les deux en inline : le mot redevient un flux de texte qui ne coupe
|
||||
// qu'aux césures logicielles (U+00AD) insérées par le JS.
|
||||
// Spécificité (0,2,1) pour battre `.splitting .word/.char` de Splitting.
|
||||
.splitting span.word,
|
||||
.splitting span.char{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.variable-title{
|
||||
margin: 0;
|
||||
font-weight: 200;
|
||||
text-transform:lowercase;
|
||||
line-height: 1;
|
||||
// margin-left: -0.04em;
|
||||
filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #fff);
|
||||
span.word{
|
||||
span.char{
|
||||
letter-spacing:-0.1em;
|
||||
}
|
||||
}
|
||||
// span.whitespace{
|
||||
// letter-spacing: 0.5em;
|
||||
// }
|
||||
}
|
||||
|
||||
// Titres traités par assets/js/titles.js : garder identique à TITLE_SELECTORS.
|
||||
$variable-title-selectors: (
|
||||
'#block-leshed-identitedusite>a',
|
||||
'article.node-type-projet>header>h2',
|
||||
'article.node-type-projet>.cols>.left>h2',
|
||||
'article.node-type-projet.view-mode-full h2.node-title',
|
||||
'article.node-type-evenement>header>h2',
|
||||
'article.node-type-evenement>header>.field_dates>time',
|
||||
'article.node-type-evenement.view-mode-full h2.node-title',
|
||||
'article.node-type-evenement.view-mode-full .field_dates.digit-dates span.date-part',
|
||||
);
|
||||
|
||||
// Avant le split : même métrique qu'après, pour éviter un saut de mise en page.
|
||||
:where(#{$variable-title-selectors}):not(.splitting){
|
||||
margin: 0;
|
||||
font-weight: 200;
|
||||
text-transform: lowercase;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.1em;
|
||||
}
|
||||
|
||||
// Masqués (place conservée) jusqu'au split ; réaffichés après 3 s si le JS échoue.
|
||||
@media (scripting: enabled){
|
||||
:where(#{$variable-title-selectors}):not(.is-ready){
|
||||
visibility: hidden;
|
||||
animation: leshed-title-failsafe 0s 3s forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes leshed-title-failsafe{
|
||||
to{ visibility: visible; }
|
||||
}
|
||||
|
||||
|
||||
div#block-leshed-titredelapage h1{
|
||||
font-size: 1em;
|
||||
font-weight: $default_fwght;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -1,71 +0,0 @@
|
||||
@use "colors" as *;
|
||||
|
||||
@mixin menu-contenus{
|
||||
ul,li{
|
||||
padding: 0;
|
||||
margin:0;
|
||||
list-style: none;
|
||||
}
|
||||
.wrapper{
|
||||
position: relative;
|
||||
}
|
||||
label{
|
||||
color:$bleu_site;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
font-size: 0.756em;
|
||||
padding:0 0 0.25em 0;
|
||||
transition: color 0.25s ease-out;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
&:has(+ a:hover){
|
||||
color: $rose;
|
||||
}
|
||||
}
|
||||
a{
|
||||
font-size: 1.13em;
|
||||
transition: color 0.15s ease-out;
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-top: 1em;
|
||||
&:hover{
|
||||
color: $bleu_site;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@mixin card{
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
padding:2em;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.25);
|
||||
max-width: 50em;
|
||||
box-sizing: content-box;
|
||||
margin: 30vh auto 0;
|
||||
&[role="home-presentation"]{
|
||||
margin-top: 10vh;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin arrow{
|
||||
display: block;
|
||||
width:30px; height:30px;
|
||||
border-radius: 15px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: contain;
|
||||
text-indent: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@mixin arrow-white{
|
||||
@include arrow();
|
||||
background-image: url('/themes/custom/mathallo/assets/img/arrow-white.svg');
|
||||
}
|
||||
|
||||
@mixin arrow-blue{
|
||||
@include arrow();
|
||||
background-image: url('/themes/custom/mathallo/assets/img/arrow-blue.svg');
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
// _____ _
|
||||
// | ____|_ _____ _ __ ___ _ __ ___ ___ _ __ | |_
|
||||
// | _| \ \ / / _ \ '_ \ / _ \ '_ ` _ \ / _ \ '_ \| __|
|
||||
// | |___ \ V / __/ | | | __/ | | | | | __/ | | | |_
|
||||
// |_____| \_/ \___|_| |_|\___|_| |_| |_|\___|_| |_|\__|
|
||||
|
||||
@use "../abstracts/variables" as *;
|
||||
@use "../abstracts/node-full" as *;
|
||||
@use "../abstracts/nodes-on-liste" as *;
|
||||
@use "../abstracts/event-date-time" as *;
|
||||
|
||||
|
||||
article.node-type-evenement.view-mode-full{
|
||||
@include nodefull();
|
||||
|
||||
.field_dates.digit-dates{
|
||||
transform-origin: 0 0;
|
||||
@include event-date-time();
|
||||
}
|
||||
|
||||
div.field_projet_s_lie_s{
|
||||
margin-top: 2em;
|
||||
.field-label{
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
article.node-type-projet.view-mode-tableau_liste{
|
||||
@include projetOnListe();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
// _ _
|
||||
// | | | | ___ _ __ ___ ___
|
||||
// | |_| |/ _ \| '_ ` _ \ / _ \
|
||||
// | _ | (_) | | | | | | __/
|
||||
// |_| |_|\___/|_| |_| |_|\___|
|
||||
|
||||
@use "../abstracts/variables" as *;
|
||||
@use "../abstracts/nodes-on-liste" as *;
|
||||
|
||||
|
||||
div.layout.layout--twocol-section--50-50{
|
||||
flex-wrap: nowrap;
|
||||
// Sans ça, `align-items: stretch` (défaut flex) étire les deux colonnes à la
|
||||
// même hauteur : la synchro de scroll ne verrait aucune différence de hauteur.
|
||||
// flex-start = chaque colonne prend la hauteur de son contenu.
|
||||
align-items: flex-start;
|
||||
|
||||
column-gap: $colsgap;
|
||||
div.layout__region{
|
||||
max-width: calc(50% - $colsgap / 2);
|
||||
flex: 1 0 calc(50% - $colsgap / 2);
|
||||
.views-row{
|
||||
// border: 1px solid red;
|
||||
// box-sizing: border-box;
|
||||
margin-bottom: 2em;
|
||||
max-width: 100%;
|
||||
article.node-type-projet{
|
||||
@include projetOnListe();
|
||||
}
|
||||
article.node-type-evenement{
|
||||
@include evenementOnListe();
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
// ____ _ _
|
||||
// | _ \ _ __ ___ (_) ___| |_
|
||||
// | |_) | '__/ _ \| |/ _ \ __|
|
||||
// | __/| | | (_) | | __/ |_
|
||||
// |_| |_| \___// |\___|\__|
|
||||
// |__/
|
||||
@use "../abstracts/variables" as *;
|
||||
@use "../abstracts/node-full" as *;
|
||||
|
||||
article.node-type-projet.view-mode-full{
|
||||
@include nodefull();
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
// __ ___ _ _ _ _____ _
|
||||
// \ \ / (_) _____ _____ / \ _ __ ___| |__ (_)_ _____ ___ | ____|_ _____ _ __ ___ _ __ ___ ___ _ __ | |_ ___
|
||||
// \ \ / /| |/ _ \ \ /\ / / __| / _ \ | '__/ __| '_ \| \ \ / / _ \/ __| | _| \ \ / / _ \ '_ \ / _ \ '_ ` _ \ / _ \ '_ \| __/ __|
|
||||
// \ V / | | __/\ V V /\__ \ / ___ \| | | (__| | | | |\ V / __/\__ \ | |___ \ V / __/ | | | __/ | | | | | __/ | | | |_\__ \
|
||||
// \_/ |_|\___| \_/\_/ |___/ /_/ \_\_| \___|_| |_|_| \_/ \___||___/ |_____| \_/ \___|_| |_|\___|_| |_| |_|\___|_| |_|\__|___/
|
||||
|
||||
@use "../abstracts/variables" as *;
|
||||
@use "../abstracts/event-date-time" as *;
|
||||
|
||||
div.views-archives-evenements {
|
||||
|
||||
& > h3{
|
||||
border-bottom: 1px solid #999;
|
||||
}
|
||||
|
||||
article.node-type-evenement.view-mode-calendrier{
|
||||
// @include evenementListe();
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1em;
|
||||
header{
|
||||
flex:0 1 auto;
|
||||
// width: 5em;
|
||||
padding:0 1em 0 0;
|
||||
|
||||
.field_dates{
|
||||
@include event-date-time(5em);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.6em;
|
||||
span.date-sep{
|
||||
display: block;
|
||||
width: 1em;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
transform-origin: center;
|
||||
transform: rotate(90deg) translateX(0.1em);
|
||||
line-height: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.content{
|
||||
flex:0 1 auto;
|
||||
h2.node-title{
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
section.last-cel{
|
||||
flex:0 1 auto;
|
||||
.field_images{
|
||||
a{
|
||||
display: block;
|
||||
width: 12em;
|
||||
height: 12em;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit:contain;
|
||||
object-position: top left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
// __ ___ _ _ _ ____ _ _
|
||||
// \ \ / (_) _____ _____ / \ _ __ ___| |__ (_)_ _____ ___ | _ \ _ __ ___ (_) ___| |_
|
||||
// \ \ / /| |/ _ \ \ /\ / / __| / _ \ | '__/ __| '_ \| \ \ / / _ \/ __| | |_) | '__/ _ \| |/ _ \ __|
|
||||
// \ V / | | __/\ V V /\__ \ / ___ \| | | (__| | | | |\ V / __/\__ \ | __/| | | (_) | | __/ |_
|
||||
// \_/ |_|\___| \_/\_/ |___/ /_/ \_\_| \___|_| |_|_| \_/ \___||___/ |_| |_| \___// |\___|\__|
|
||||
// |__/
|
||||
|
||||
@use "../abstracts/variables" as *;
|
||||
@use "../abstracts/nodes-on-liste" as *;
|
||||
|
||||
|
||||
div.views-archives-projets{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 2em;
|
||||
gap: $colsgap;
|
||||
div.views-row{
|
||||
flex: 1 0 calc(25% - $colsgap);
|
||||
width: calc(25% - $colsgap);
|
||||
}
|
||||
|
||||
article.node-type-projet.view-mode-tableau_liste{
|
||||
|
||||
@include projetOnListe();
|
||||
>header{
|
||||
>h2{
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
form#views-exposed-form-archives-page-1{
|
||||
div.bef-links{
|
||||
ul{
|
||||
margin:0; padding:0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
li{
|
||||
list-style: none;
|
||||
flex: 0 1 auto;
|
||||
padding: 0.2em 0.5em;
|
||||
font-size: 0.756em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user