scss refactor: main.scss split into abstracts/global/pages partials, kebab-case (compiled css unchanged)
This commit is contained in:
@@ -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:".";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
$layout_width: 1080px;
|
||||
$default_fwght: 200;
|
||||
$header_height: 70px;
|
||||
$colsgap: 2em;
|
||||
Reference in New Issue
Block a user