maverick-wave 5.31.0 → 5.33.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "maverick-wave",
-  "version": "5.31.0",
+  "version": "5.33.0",
   "config": {
-    "version_short": "5.31"
+    "version_short": "5.33"
   },
   "description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
   "main": "src/js/main.js",

package/src/scss/abstracts/_variables.scss

@@ -60,6 +60,8 @@ $hover-shift: 15% !default;
 // light one - and 0.58 is as low as that end goes without moving three colors.
 $ink-lightness-dark: 0.52 !default;
 $ink-lightness-light: 0.58 !default;
+// On the hero photo 0.52 measured 1.2-2.7:1, 0.72 clears 3:1 and keeps the hue
+$hero-ink-lightness: 0.72 !default;
 // How much primary the muted gray picks up, so it belongs to the palette. 0% is true gray.
 $muted-tint: 23% !default;
 

package/src/scss/components/_testimonial.scss

@@ -24,6 +24,8 @@
     // surface - inside it the quote keeps only the edge and the quotation marks
     // as its sign.
     blockquote {
+      // Grows with the card, or a short quote's tint stops halfway down it
+      flex-grow: 1;
       background: color-mix(in srgb, var(--mw-secondary-color) 6%, transparent);
       border-left-color: color-mix(
         in srgb,

package/src/scss/layout/_home.scss

@@ -31,6 +31,15 @@
       width: 85%;
       position: relative;
       margin: spacing('0') auto spacing('4');
+
+      // The hero is dark in both themes, the light theme's inks sink into it
+      @each $name, $value in $semantic-colors {
+        --mw-#{$name}-text-color: #{ink-on-dark(
+            '#{$name}-color',
+            $hero-ink-lightness
+          )};
+      }
+
       @include media-up('sm') {
         width: min(75%, 700px);
       }
@@ -45,9 +54,46 @@
     justify-items: start;
     text-align: left;
 
+    // 85% of a phone leaves a ragged strip right of left-aligned text
     .mw-home-text {
+      width: min(100%, 42rem);
       margin-inline: 0;
     }
+
+    .mw-home-actions {
+      margin-inline: 0;
+
+      @include media-up('sm') {
+        justify-content: flex-start;
+      }
+    }
+  }
+
+  // Two buttons that wrap onto two lines at their own widths read as a
+  // staircase, so a phone stacks them at one width instead
+  .mw-home-actions {
+    display: flex;
+    flex-direction: column;
+    gap: spacing('4');
+    width: min(100%, 20rem);
+    margin-inline: auto;
+
+    @include media-up('sm') {
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: spacing('5');
+      width: auto;
+    }
+  }
+
+  // The rem floor matters: a pure vh band gives the least on a flat screen
+  .mw-home-bottom {
+    padding-block: spacing('6') spacing('4');
+
+    @include media-up('md') {
+      padding-block: spacing('9') clamp(5.5rem, 12vh, 9rem);
+    }
   }
 
   @keyframes mw-home-fade {

package/src/scss/layout/_main.scss

@@ -12,6 +12,24 @@
     counter-reset: mw-section-head;
   }
 
+  // The fixed header and the ribbon under it take no room in the flow. A page
+  // that opens with a hero lets them lie over the picture; every other page
+  // keeps the room free where it starts - a section or the content wrapper -
+  // on top of the space that one has anyway. The same tokens as
+  // scroll-padding-top, so a ribbon that is not there costs nothing.
+  body:has(.mw-header) .mw-main > .mw-section:first-child:not(:has(.mw-hero)) {
+    padding-top: calc(
+      var(--mw-header-height) + var(--mw-announcement-offset) +
+        var(--mw-section-padding-block)
+    );
+  }
+
+  body:has(.mw-header) .mw-main > .mw-content:first-child:not(:has(.mw-hero)) {
+    padding-top: calc(
+      var(--mw-header-height) + var(--mw-announcement-offset) + #{spacing('7')}
+    );
+  }
+
   // Takes the full container on a phone and steps inwards as the screen grows.
   // For a column of full-width cards, which at 1200px leaves more empty card
   // than content.
@@ -66,6 +84,11 @@
         z-index: z-index('card');
       }
 
+      // .mw-home sizes itself in % of this flex item, which must not shrink
+      > .mw-hero {
+        width: 100%;
+      }
+
       // Add `mw-parallax` here and a `.mw-parallax-media` child and the picture
       // becomes its own layer, free to drift or to stay pinned. It reads the
       // same token, so the image is still configured in one place - and a
@@ -159,6 +182,21 @@
           );
         }
       }
+
+      // Bottom text shares the lower edge with the cue below lg, phones too
+      &:has(.mw-home-bottom) {
+        align-items: flex-end;
+
+        @include media-down('lg') {
+          &:has(> .mw-scroll-hint) {
+            --mw-scroll-hint-reserve: #{spacing('10')};
+
+            padding-bottom: calc(
+              var(--mw-scroll-hint-offset) + var(--mw-scroll-hint-reserve)
+            );
+          }
+        }
+      }
     }
   }
 

package/src/scss/layout/_parallax.scss

@@ -158,8 +158,8 @@
     :is(.mw-parallax-sticky, .mw-parallax-slow) + *:not(.mw-parallax-sticky)
   ) {
     box-shadow:
-      0 -6px 12px rgb(0 0 0 / 45%),
-      0 -20px 44px rgb(0 0 0 / 26%);
+      0 -8px 18px rgb(0 0 0 / 55%),
+      0 -28px 60px rgb(0 0 0 / 38%);
   }
 
   // Ink on a photograph, the same pair the hero uses: the picture goes down, the

package/src/scss/main-lean.scss

@@ -1,6 +1,7 @@
-// The same framework without the 48 components: tokens, reset, typography,
-// grid, container, section, header, footer and every utility. Add the
-// components the page actually uses next to it, each one its own file:
+// The same framework without the components, bar the two at the end: tokens,
+// reset, typography, grid, container, section, header, footer and every
+// utility. Add the components the page actually uses next to it, each one its
+// own file:
 //
 //   @use 'maverick-wave/src/scss/main-lean' with ($primary-color: #1b1b1d);
 //   @use 'maverick-wave/src/scss/components/buttons';
@@ -14,3 +15,7 @@
 @use 'base';
 @use 'layout';
 @use 'utilities';
+
+// The layout uses these two: data-tooltip in the footer, the badge in the hero
+@use 'components/tooltip';
+@use 'components/hero-badge';