bachir/drupal-leshed
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

started using fluid-clamp for titles and date

Browse Source
This commit is contained in:
bachir
2026-09-29 09:46:34 +02:00
parent 0ef60b1ec9
commit 094e9964ec
8 changed files with 72 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/leshed/assets/dist/main.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
web/themes/custom/leshed/assets/scss/partials/abstracts/_event-date-time.scss
+16 -5
View File
@@ -1,3 +1,7 @@
@use "sass:math";
@use "fluid" as *;
@mixin event-date-time($ref: 10em){ @mixin event-date-time($ref: 10em){
display: flex; display: flex;
position: relative; position: relative;
@@ -5,18 +9,25 @@
// des titres variables (supprimé) — elles vivent ici maintenant. // des titres variables (supprimé) — elles vivent ici maintenant.
line-height: 1; line-height: 1;
letter-spacing: -0.1em; letter-spacing: -0.1em;
// --ref : taille de référence du bloc, dérivée de $ref mais FLUIDE sous le
// layout (fluid-clamp, point de passage à $layout_width, plancher $ref/n).
// Toutes les dimensions internes — grille, jour, mois, année, séparateur —
// dérivent de --ref : le bloc entier rétrécit en lock-step, sans désaligner
// la grille par rapport à la typo. NB : les em sont convertis via px() sur
// hypothèse d'un contexte de 16px.
--ref: #{fluid-clamp(px($ref), $min: math.div(px($ref), 1.5))};
time{ time{
position: relative; position: relative;
display: grid; display: grid;
grid-template-columns: $ref calc($ref * 7 / 18); grid-template-columns: var(--ref) calc(var(--ref) * 7 / 18);
grid-template-rows: calc($ref / 2.3) calc($ref / 2.3); grid-template-rows: calc(var(--ref) / 2.3) calc(var(--ref) / 2.3);
grid-template-areas: grid-template-areas:
"day month" "day month"
"day year"; "day year";
span.date-day{ span.date-day{
grid-area: day; grid-area: day;
font-size: $ref; font-size: var(--ref);
font-weight: 100; font-weight: 100;
font-style: italic; font-style: italic;
} }
@@ -32,11 +43,11 @@
} }
span.date-month, span.date-month,
span.date-year{ span.date-year{
font-size: calc($ref / 2.45); font-size: calc(var(--ref) / 2.45);
} }
} }
span.date-sep{ span.date-sep{
font-size: calc($ref / 2); font-size: calc(var(--ref) / 2);
padding:0 0.2em; padding:0 0.2em;
} }
} }
web/themes/custom/leshed/assets/scss/partials/abstracts/_fluid.scss
+19 -8
View File
@@ -8,30 +8,41 @@
// Aucun CSS émis. Outils de typo fluide. // Aucun CSS émis. Outils de typo fluide.
// //
// Usage : font-size: fluid-clamp(5rem, $min: 1.75rem); // Usage : font-size: fluid-clamp(5rem, $min: 1.75rem);
// → la taille vaut 5rem tant que le viewport tient $layout_width, // → la taille vaut 5rem tant que le viewport tient le layout complet
// suit la largeur du viewport en dessous, plancher $min. // (contenu + padding latéral), suit la largeur du viewport en dessous,
// Le point de passage est dérivé de $layout_width : recalage // plancher $min.
// automatique si le plafond du layout change. // Le point de passage est dérivé de $layout-anchor : recalage
// automatique si le plafond du layout ou son padding changent.
@use "sass:math"; @use "sass:math";
@use "variables" as *; @use "variables" as *;
$root: 16px; // taille de police de <html> $root: 16px; // taille de police de <html>
// Convertit px ou rem en px réels (Sass ne convertit pas rem seul). // Convertit px, rem ou em en px. Pour rem/em : hypothèse d'un contexte typo
// de base 16px ($root) — suffisante pour calibrer un clamp (le point de
// passage reste exact tant que l'élément vit dans la base typo).
@function px($size) { @function px($size) {
@if $size == 0 { @return 0px; } @if $size == 0 { @return 0px; }
@if math.unit($size) == "px" { @return $size; } @if math.unit($size) == "px" { @return $size; }
@if math.unit($size) == "rem" { @return math.div($size, 1rem) * $root; } @if math.unit($size) == "rem" { @return math.div($size, 1rem) * $root; }
@error "px() : px ou rem attendu, reçu #{$size}"; @if math.unit($size) == "em" { @return math.div($size, 1em) * $root; }
@error "px() : px, rem ou em attendu, reçu #{$size}";
} }
// Largeur d'ancrage des clamps : le viewport auquel le layout est plein —
// 1080px de contenu + 2 × 16px de padding = 1112px.
// Depuis que $layout_padding et $colsgap sont proportionnels (clamp vw),
// le padding vaut exactement 16px à ce point (1.4388vw × 1112). Valeur
// constante : px() ne sait pas parser un clamp() pour la dériver.
$layout-anchor: 1112px;
// La valeur vw qui vaut exactement $size quand le viewport fait $at. // La valeur vw qui vaut exactement $size quand le viewport fait $at.
@function vw-at($size, $at: $layout_width) { @function vw-at($size, $at: $layout-anchor) {
@return math.div(px($size), $at) * 100 * 1vw; @return math.div(px($size), $at) * 100 * 1vw;
} }
// $size au-dessus de $at, fluide en dessous, plancher $min. // $size au-dessus de $at, fluide en dessous, plancher $min.
@function fluid-clamp($size, $at: $layout_width, $min: 0px) { @function fluid-clamp($size, $at: $layout-anchor, $min: 0px) {
@return clamp(#{px($min)}, #{vw-at($size, $at)}, #{px($size)}); @return clamp(#{px($min)}, #{vw-at($size, $at)}, #{px($size)});
} }
web/themes/custom/leshed/assets/scss/partials/abstracts/_node-full.scss
+3 -1
View File
@@ -5,6 +5,7 @@
// |_| \_|\___/ \__,_|\___|_| \__,_|_|_| // |_| \_|\___/ \__,_|\___|_| \__,_|_|_|
@use "variables" as *; @use "variables" as *;
@use "fluid" as *;
@mixin nodefull{ @mixin nodefull{
div.cols{ div.cols{
@@ -28,7 +29,8 @@
>h2.node-title{ >h2.node-title{
position: relative; position: relative;
font-size: 12em; // font-size: 12em;
font-size: fluid-clamp(12rem, $min: 8rem);
margin: 0; margin: 0;
&.leshed-svg-export-target{ &.leshed-svg-export-target{
pointer-events: painted; pointer-events: painted;
web/themes/custom/leshed/assets/scss/partials/abstracts/_nodes-on-liste.scss
+14 -3
View File
@@ -11,11 +11,12 @@
>header{ >header{
>h2{ >h2{
font-size: fluid-clamp(5rem, $min: 1.75rem); font-size: fluid-clamp(5rem, $min: 3.780rem);
} }
} }
.field_artiste_s_invite_s{ .field_artiste_s_invite_s{
font-size: 1.8em; // font-size: 1.8em;
font-size: fluid-clamp(1.8rem, $min: 1.323rem);
font-weight: 300; font-weight: 300;
} }
@@ -78,7 +79,8 @@
@include nodeOnListe(); @include nodeOnListe();
>header{ >header{
.field_dates{ .field_dates{
font-size: 4em; // font-size: 4em;
font-size: fluid-clamp(3rem, $min: 1.512rem);
line-height: 1; line-height: 1;
// Avant fourni par le bloc de masquage des titres variables. // Avant fourni par le bloc de masquage des titres variables.
letter-spacing: -0.1em; letter-spacing: -0.1em;
@@ -88,6 +90,15 @@
content:"."; content:".";
} }
} }
span.date-day{
font-weight: 100;
}
span.date-month{
font-weight: 300;
}
span.date-year{
font-weight: 500;
}
} }
} }
} }
web/themes/custom/leshed/assets/scss/partials/abstracts/_variables.scss
+7 -1
View File
@@ -1,4 +1,10 @@
$layout_width: 1080px; $layout_width: 1080px;
// Padding et gap proportionnels : sous l'ancrage du layout (voir _fluid.scss,
// $layout-anchor), TOUT rétrécit ensemble (typo fluide, gouttières, colonnes) —
// les clamps vw restent exacts à toutes les largeurs. Les vw sont calés pour
// valoir exactement les bornes hautes à l'ancrage (1112px) : au-dessus, le
// design desktop est identique à l'ancien 1em/2em fixe.
$layout_padding: clamp(0.75rem, 1.4388vw, 1rem);
$default_fwght: 200; $default_fwght: 200;
$header_height: 70px; $header_height: 70px;
$colsgap: 2em; $colsgap: clamp(1.5rem, 2.8777vw, 2rem);
web/themes/custom/leshed/assets/scss/partials/global/_layout.scss
+1
View File
@@ -17,6 +17,7 @@ div.layout-container{
overflow: hidden; overflow: hidden;
max-width:$layout_width; max-width:$layout_width;
margin: 0 auto; margin: 0 auto;
padding: 0 $layout_padding;
header[role="banner"]{ header[role="banner"]{
display: block; display: block;
position: relative; position: relative;
web/themes/custom/leshed/assets/scss/partials/pages/_home.scss
+11 -1
View File
@@ -8,7 +8,7 @@
@use "../abstracts/nodes-on-liste" as *; @use "../abstracts/nodes-on-liste" as *;
div.layout.layout--twocol-section--50-50{ div.layout.layout--twocol-section--50-50.layout--twocol-section{
flex-wrap: nowrap; flex-wrap: nowrap;
// Sans ça, `align-items: stretch` (défaut flex) étire les deux colonnes à la // 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. // même hauteur : la synchro de scroll ne verrait aucune différence de hauteur.
@@ -33,4 +33,14 @@ div.layout.layout--twocol-section--50-50{
} }
} }
@media (max-width:431px) {
&{
display:block;
div.layout__region{
max-width: 100%;
}
}
}
} }