started using fluid-clamp for titles and date

2026-09-29 09:46:34 +02:00
parent 0ef60b1ec9
commit 094e9964ec
8 changed files with 72 additions and 20 deletions
@@ -1,3 +1,7 @@
+
+@use "sass:math";
+@use "fluid" as *;
+
@mixin event-date-time($ref: 10em){
  display: flex;
  position: relative;
@@ -5,18 +9,25 @@
  // des titres variables (supprimé) — elles vivent ici maintenant.
  line-height: 1;
  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{
    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-columns: var(--ref) calc(var(--ref) * 7 / 18);
+    grid-template-rows: calc(var(--ref) / 2.3) calc(var(--ref) / 2.3);
    grid-template-areas:
      "day month"
      "day year";

    span.date-day{
      grid-area: day;
-      font-size: $ref;
+      font-size: var(--ref);
      font-weight: 100;
      font-style: italic;
    }
@@ -32,11 +43,11 @@
    }
    span.date-month,
    span.date-year{
-      font-size: calc($ref / 2.45);
+      font-size: calc(var(--ref) / 2.45);
    }
  }
  span.date-sep{
-    font-size: calc($ref / 2);
+    font-size: calc(var(--ref) / 2);
    padding:0 0.2em;
  }
 }
@@ -8,30 +8,41 @@
 // Aucun CSS émis. Outils de typo fluide.
 //
 // Usage : font-size: fluid-clamp(5rem, $min: 1.75rem);
-//   → la taille vaut 5rem tant que le viewport tient $layout_width,
-//     suit la largeur du viewport en dessous, plancher $min.
-//   Le point de passage est dérivé de $layout_width : recalage
-//   automatique si le plafond du layout change.
+//   → la taille vaut 5rem tant que le viewport tient le layout complet
+//     (contenu + padding latéral), suit la largeur du viewport en dessous,
+//     plancher $min.
+//   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 "variables" as *;

 $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) {
  @if $size == 0 { @return 0px; }
  @if math.unit($size) == "px" { @return $size; }
  @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.
-@function vw-at($size, $at: $layout_width) {
+@function vw-at($size, $at: $layout-anchor) {
  @return math.div(px($size), $at) * 100 * 1vw;
 }

 // $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)});
 }
@@ -5,6 +5,7 @@
 //  |_| \_|\___/ \__,_|\___|_|   \__,_|_|_|

@use "variables" as *;
+@use "fluid" as *;

@mixin nodefull{
  div.cols{
@@ -28,7 +29,8 @@

          >h2.node-title{
            position: relative;
-            font-size: 12em;
+            // font-size: 12em;
+            font-size: fluid-clamp(12rem, $min: 8rem);
            margin: 0;
            &.leshed-svg-export-target{
              pointer-events: painted;
@@ -11,11 +11,12 @@
  >header{

    >h2{
-      font-size: fluid-clamp(5rem, $min: 1.75rem);
+      font-size: fluid-clamp(5rem, $min: 3.780rem);
    }
  }
  .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;
  }

@@ -78,7 +79,8 @@
  @include nodeOnListe();
  >header{
    .field_dates{
-      font-size: 4em;
+      // font-size: 4em;
+      font-size: fluid-clamp(3rem, $min: 1.512rem);
      line-height: 1;
      // Avant fourni par le bloc de masquage des titres variables.
      letter-spacing: -0.1em;
@@ -88,6 +90,15 @@
            content:".";
          }
        }
+        span.date-day{
+          font-weight: 100;
+        }
+        span.date-month{
+          font-weight: 300;
+        }
+        span.date-year{
+          font-weight: 500;
+        }
      }
    }
  }
@@ -1,4 +1,10 @@
 $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;
 $header_height: 70px;
-$colsgap: 2em;
+$colsgap: clamp(1.5rem, 2.8777vw, 2rem);
@@ -17,6 +17,7 @@ div.layout-container{
  overflow: hidden;
  max-width:$layout_width;
  margin: 0 auto;
+  padding: 0 $layout_padding;
  header[role="banner"]{
    display: block;
    position: relative;
@@ -8,7 +8,7 @@
@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;
  // 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.
@@ -33,4 +33,14 @@ div.layout.layout--twocol-section--50-50{

    }
  }
+
+  @media (max-width:431px) {
+    &{
+      display:block;
+      div.layout__region{
+        max-width: 100%;
+      }
+    }
+
+  }
 }