big improvement over projets, evenement, links, calendar, and mobile display
This commit is contained in:
@@ -0,0 +1,79 @@
|
||||
|
||||
@use "../abstracts/variables" as *;
|
||||
@use "fluid" as *;
|
||||
@use "../abstracts/event-date-time" as *;
|
||||
|
||||
@mixin event_calendar(){
|
||||
// @include evenementListe();
|
||||
border-top: 1px solid #ccc;
|
||||
padding: 2em 0 1em 0;
|
||||
|
||||
|
||||
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:1 1 auto;
|
||||
h2.node-title{
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
div.field_artiste_s_invite_s{
|
||||
font-size: fluid-clamp(1.8rem, $min: 1.134rem);
|
||||
.field-item{
|
||||
display: inline-block;
|
||||
&:not(:last-child)::after{
|
||||
content: ", ";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.field_type_d_evenement{
|
||||
.field-item{
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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 right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -46,3 +46,8 @@ $layout-anchor: 1112px;
|
||||
@function fluid-clamp($size, $at: $layout-anchor, $min: 0px) {
|
||||
@return clamp(#{px($min)}, #{vw-at($size, $at)}, #{px($size)});
|
||||
}
|
||||
|
||||
// Tokens dérivés : tailles de référence passées en fluide. Le plancher est
|
||||
// un choix de design — 70px à l'ancrage et au-dessus (desktop inchangé),
|
||||
// 56px au plus bas (téléphone).
|
||||
$header-height-fluid: fluid-clamp($header_height, $min: 40px);
|
||||
|
||||
@@ -6,6 +6,8 @@
|
||||
|
||||
@use "variables" as *;
|
||||
@use "fluid" as *;
|
||||
@use "../abstracts/nodes-on-liste" as *;
|
||||
@use "../abstracts/event-calendrier" as *;
|
||||
|
||||
@mixin nodefull{
|
||||
|
||||
@@ -25,7 +27,7 @@
|
||||
>h2.node-title{
|
||||
position: relative;
|
||||
// font-size: 12em;
|
||||
font-size: fluid-clamp(12rem, $min: 8rem);
|
||||
// font-size: fluid-clamp(12rem, $min: 8rem);
|
||||
margin: 0;
|
||||
&.leshed-svg-export-target{
|
||||
pointer-events: painted;
|
||||
@@ -33,13 +35,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
.field{
|
||||
margin-bottom: 1rem;
|
||||
.field-item{
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.field_artiste_s_invite_s{
|
||||
font-size: 1.8em;
|
||||
font-weight: 300;
|
||||
// font-size: 1.8em;
|
||||
font-size: fluid-clamp(1.8rem, $min: 1.134rem);
|
||||
.field-item{
|
||||
font-weight: 300;
|
||||
display: inline-block;
|
||||
&:not(:last-child):after{
|
||||
content:", ";
|
||||
}
|
||||
}
|
||||
}
|
||||
.field_invite_accompagne_curate_p,
|
||||
.field_partenaire_s{
|
||||
margin-top: 1em;
|
||||
// margin-top: 1em;
|
||||
font-weight: 400;
|
||||
.field-label{
|
||||
font-weight: $default_fwght;
|
||||
@@ -48,13 +63,67 @@
|
||||
// display: inline-block;
|
||||
// }
|
||||
}
|
||||
|
||||
// Pas de marge basse sur le type de projet s'il est immédiatement
|
||||
// suivi des dates : l'écart de 16px mesuré venait d'ici.
|
||||
// NB : :has(+ …) — la marge appartient au PRÉCÉDENT, le combinateur
|
||||
// seul (field_type + field_dates) ne pourrait cibler que le suivant.
|
||||
div.field_type_de_projet:has(+ div.field_dates){
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.field_dates{
|
||||
margin-top: 1em;
|
||||
time{
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
div.field_projet_s_lie_s{
|
||||
// margin-top: 2em;
|
||||
// .field-label{
|
||||
// margin-bottom: 1em;
|
||||
// }
|
||||
>.field-items.multiple{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: $colsgap;
|
||||
>.field-item{
|
||||
flex: 1 0 calc(50% - $colsgap / 2);
|
||||
max-width: calc(50% - $colsgap / 2);
|
||||
>article{
|
||||
@include projetOnListe();
|
||||
>header{
|
||||
>h2{
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
.field_artiste_s_invite_s{
|
||||
font-size: 1.134em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.field_evenement_s_lie_s{
|
||||
article.node-type-evenement.view-mode-calendrier{
|
||||
@include event_calendar();
|
||||
>section.content{
|
||||
>h2.node-title{
|
||||
font-size: 2.68em;
|
||||
}
|
||||
div.field{
|
||||
margin:0;
|
||||
p{ margin:0;}
|
||||
}
|
||||
}
|
||||
>section.last-cel{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>div.spacer{
|
||||
display: block;
|
||||
height: 5em;
|
||||
@@ -127,7 +196,16 @@
|
||||
width: 205%;//calc(50% - $colsgap / 2);
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
|
||||
>h2.node-title{
|
||||
font-size: fluid-clamp(12rem, $min: 8rem);
|
||||
}
|
||||
}
|
||||
// .field_artiste_s_invite_s{
|
||||
// // font-size: 1.8em;
|
||||
// font-size: fluid-clamp(1.8rem, $min: 1rem);
|
||||
// font-weight: 300;
|
||||
// }
|
||||
}
|
||||
|
||||
&.right{
|
||||
@@ -212,9 +290,41 @@
|
||||
div.col.right .field_images .field-item:not(:first-child){
|
||||
order: 5;
|
||||
}
|
||||
div.col.left > .spacer{
|
||||
display: none;
|
||||
div.col.left > div.field_fichiers{
|
||||
order: 6;
|
||||
}
|
||||
div.col.left > div.field_partenaire_s{
|
||||
order:7;
|
||||
}
|
||||
div.col.left > div.field_projet_s_lie_s{
|
||||
order: 8;
|
||||
}
|
||||
// NB : div.spacer (et pas .spacer) — la règle de base `>div.spacer{display:block}`
|
||||
// a une spécificité de (0,4,5) : `.spacer` seul (0,4,4) perdait le cascade
|
||||
// malgré l'ordre. Égaler la spécificité, laisser la cascade trancher.
|
||||
div.col.left > div.spacer{
|
||||
order:20;
|
||||
}
|
||||
|
||||
div.col{
|
||||
&.left{
|
||||
>header{
|
||||
>h2.node-title{
|
||||
font-size: 5em;
|
||||
// font-size: fluid-clamp(12rem, $min: 8rem);
|
||||
}
|
||||
}
|
||||
// .field_artiste_s_invite_s{
|
||||
// .field-item{
|
||||
// display: inline-block;
|
||||
// &:not(:last-child):after{
|
||||
// content:", ";
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user