fluid type: fluid-clamp helper (viewport-derived from $layout_width) + nodeOnListe h2

2026-09-28 17:50:59 +02:00
parent 74399a3823
commit 8077bf9022
3 changed files with 40 additions and 2 deletions
@@ -0,0 +1,37 @@
+//   ______ _           _ _
+//  |  ____| |         | | |
+//  | |    | | ___  ___| | |
+//  | |    | |/ _ \/ _ \ | |
+//  | |____| |  __/  __/ | |
+//  |_____/_|\___|\___|_|_|
+//
+// 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.
+
+@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).
+@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}";
+}
+
+// La valeur vw qui vaut exactement $size quand le viewport fait $at.
+@function vw-at($size, $at: $layout_width) {
+  @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) {
+  @return clamp(#{px($min)}, #{vw-at($size, $at)}, #{px($size)});
+}
@@ -5,12 +5,13 @@
 //  |_| \_|\___/ \__,_|\___|  \___/|_| |_| |_____|_|___/\__\___|

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

@mixin nodeOnListe{
  >header{

    >h2{
-      font-size: 5em;
+      font-size: fluid-clamp(5rem, $min: 1.75rem);
    }
  }
  .field_artiste_s_invite_s{