big improvement over projets, evenement, links, calendar, and mobile display
This commit is contained in:
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
@@ -13,9 +13,9 @@ const TITLE_SELECTORS = '\
|
||||
article.node-type-projet.view-mode-full h2.node-title,\
|
||||
article.node-type-evenement>header>h2,\
|
||||
article.node-type-evenement.view-mode-full h2.node-title,\
|
||||
article.node-type-evenement.view-mode-calendrier h2.node-title,\
|
||||
div.views-archives-evenements > h3 > time\
|
||||
article.node-type-evenement.view-mode-calendrier h2.node-title\
|
||||
';
|
||||
// div.views-archives-evenements > h3 > time\
|
||||
|
||||
// Police Epilogue = axe variable `wght` (100–900) uniquement ; l'italique est
|
||||
// un fichier séparé (font-style).
|
||||
|
||||
@@ -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:", ";
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
// \_| |_/\___|\__,_|\__,_|\___|_|
|
||||
|
||||
@use "../abstracts/variables" as *;
|
||||
@use "../abstracts/fluid" as *;
|
||||
|
||||
|
||||
header[role="banner"]{
|
||||
@@ -77,7 +78,7 @@ header[role="banner"]{
|
||||
// .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;
|
||||
top:$header-height-fluid;
|
||||
left: 0;
|
||||
width:100vw;
|
||||
padding: 0 calc((100vw - $layout_width) / 2) 0 calc((100vw - $layout_width) / 2);
|
||||
@@ -89,7 +90,7 @@ header[role="banner"]{
|
||||
overflow: hidden;
|
||||
transition-duration: 0.5s;
|
||||
&[opened]{
|
||||
height: calc(100vh - $header_height);
|
||||
height: calc(100vh - $header-height-fluid);
|
||||
}
|
||||
nav#block-leshed-navigationprincipale{
|
||||
// width: $layout_width;
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
// |___/
|
||||
|
||||
@use "../abstracts/variables" as *;
|
||||
@use "../abstracts/fluid" as *;
|
||||
|
||||
|
||||
div.layout-container{
|
||||
@@ -22,13 +23,13 @@ div.layout-container{
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 0.5em 0;
|
||||
flex: 1 1 $header_height;
|
||||
flex: 1 1 $header-height-fluid;
|
||||
z-index: 100;
|
||||
// position: fixed;
|
||||
// top:0;
|
||||
// width: 100%;
|
||||
height: $header_height;
|
||||
min-height: $header_height;
|
||||
height: $header-height-fluid;
|
||||
min-height: $header-height-fluid;
|
||||
}
|
||||
main[role="main"]{
|
||||
flex: 1 1 auto;
|
||||
|
||||
@@ -18,16 +18,6 @@ article.node-type-evenement.view-mode-full{
|
||||
@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();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
+12
-55
@@ -4,68 +4,25 @@
|
||||
// \ V / | | __/\ V V /\__ \ / ___ \| | | (__| | | | |\ V / __/\__ \ | |___ \ V / __/ | | | __/ | | | | | __/ | | | |_\__ \
|
||||
// \_/ |_|\___| \_/\_/ |___/ /_/ \_\_| \___|_| |_|_| \_/ \___||___/ |_____| \_/ \___|_| |_|\___|_| |_| |_|\___|_| |_|\__|___/
|
||||
|
||||
@use "../abstracts/variables" as *;
|
||||
@use "../abstracts/event-date-time" as *;
|
||||
@use "../abstracts/event-calendrier" as *;
|
||||
|
||||
div.views-archives-evenements {
|
||||
|
||||
& > h3{
|
||||
border-bottom: 1px solid #999;
|
||||
// border-bottom: 1px solid #999;
|
||||
margin-bottom: 0;
|
||||
font-size: 2em;
|
||||
font-weight: 200;
|
||||
span.month{
|
||||
font-weight: 100;
|
||||
}
|
||||
span.year{
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include event_calendar();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user