392 lines
9.3 KiB
SCSS
392 lines
9.3 KiB
SCSS
@import "partials/variables";
|
|
@import "partials/colors";
|
|
@import "partials/fonts";
|
|
@import "partials/mixins";
|
|
|
|
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:1080px;
|
|
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{
|
|
position:absolute;
|
|
top:$header_height; left:0;
|
|
// z-index: 99;
|
|
background-color: rgba(0,0,0,0.75);
|
|
|
|
width:100vw;
|
|
height: 0;
|
|
overflow: hidden;
|
|
transition-duration: 0.5s;
|
|
&[opened]{
|
|
height: calc(100vh - $header_height);
|
|
}
|
|
&>nav{
|
|
padding-top: 10px;
|
|
background-color: #fff;
|
|
>ul{
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
nav#block-mathallo-navigationprincipale{
|
|
padding: 2em 1em;
|
|
ul{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
list-style: none;
|
|
li{
|
|
margin-right: 1em;
|
|
// background-color: $bleu_site;
|
|
color: #fff;
|
|
padding:0.5em 1em;
|
|
&:not(:last-child){
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
} // 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;
|
|
// }
|
|
}
|
|
|
|
// _____ _____ __ ____ ___ _ ____
|
|
// |_ _/ _ \ \ / / / ___/ _ \| | / ___|
|
|
// | || | | \ \ /\ / / | | | | | | | \___ \
|
|
// | || |_| |\ V V / | |__| |_| | |___ ___) |
|
|
// |_| \___/ \_/\_/ \____\___/|_____|____/
|
|
|
|
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{
|
|
>header{
|
|
>h2{
|
|
font-size: 5em;
|
|
}
|
|
}
|
|
>div{
|
|
// margin-top: 3em;
|
|
}
|
|
// only with images, title overlap the image
|
|
&.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);
|
|
}
|
|
div.field_images{
|
|
position:relative;
|
|
// width: 100%;
|
|
z-index: 5;
|
|
a{
|
|
display:block;
|
|
img{
|
|
width:100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
// ____ _ _
|
|
// | _ \ _ __ ___ (_) ___| |_
|
|
// | |_) | '__/ _ \| |/ _ \ __|
|
|
// | __/| | | (_) | | __/ |_
|
|
// |_| |_| \___// |\___|\__|
|
|
// |__/
|
|
article.node-type-projet.view-mode-full{
|
|
div.cols{
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: $colsgap;
|
|
// column-gap: 2em;
|
|
div.col{
|
|
flex:0 0 calc(50% - $colsgap / 2);
|
|
max-width: calc(50% - $colsgap / 2);
|
|
|
|
&.left{
|
|
>h2.node-title{
|
|
position: relative;
|
|
font-size: 12em;
|
|
margin: 0;
|
|
z-index: 100;
|
|
width: 205%;//calc(50% - $colsgap / 2);
|
|
pointer-events: none;
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
.field_artiste_s_invite_s{
|
|
font-size: 1.8em;
|
|
font-weight: 300;
|
|
}
|
|
.field_invite_accompagne_curate_p{
|
|
font-weight: 400;
|
|
.field-label{
|
|
font-weight: $default_fwght;
|
|
}
|
|
>div{
|
|
display: inline-block;
|
|
}
|
|
}
|
|
.field_dates{
|
|
time{
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
&.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%;
|
|
height: 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;
|
|
// // }
|
|
// }
|
|
}
|
|
|
|
img{
|
|
width: 100%;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
blockquote.image-field-caption{
|
|
margin: 0;
|
|
position: absolute;
|
|
bottom: 0; left: 0;
|
|
width: 100%;
|
|
background-color: rgba(0,0,0,0.65);
|
|
color: #fff;
|
|
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.image-field-caption{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|