maverick-wave 5.25.0 → 5.27.0

package/src/scss/components/_tiles.scss

@@ -1,51 +1,8 @@
 @use '../abstracts' as *;
 
 @layer mw.components {
-  .mw-tiles {
-    width: 100%;
-    margin: spacing('0') auto;
-    padding: spacing('0');
-    display: grid;
-    gap: spacing('4');
-    grid-template-columns: 1fr;
-
-    @include media-up('sm') {
-      grid-template-columns: repeat(2, 1fr);
-      width: 80%;
-      padding: spacing('3');
-      gap: spacing('6');
-    }
-
-    @include media-up('lg') {
-      grid-template-columns: repeat(3, 1fr);
-    }
-
-    // The page gutter is the container's job, a second inset only narrows the tile
-    &-4col {
-      @include media-up('sm') {
-        width: 85%;
-        grid-template-columns: repeat(2, 1fr);
-      }
-
-      @include media-up('md') {
-        grid-template-columns: repeat(3, 1fr);
-      }
-
-      @include media-up('lg') {
-        grid-template-columns: repeat(4, 1fr);
-      }
-    }
-
-    &-2col {
-      @include media-up('sm') {
-        width: 75%;
-        grid-template-columns: repeat(2, 1fr);
-      }
-    }
-  }
-
   // The tile sizes its type off its own width, not the window's. In
-  // `.mw-tiles-4col` on a wide desktop a tile is a quarter of 85% of the page -
+  // `.mw-tiles-4col` on a wide desktop a tile is a quarter of the container -
   // narrower than the same tile alone on a phone, where it used to be the one
   // getting the small type.
   //
@@ -69,7 +26,6 @@
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    cursor: pointer;
 
     // Ahead of the size modifiers below, which take over from 'sm'
     @include media-up('sm') {
@@ -90,13 +46,22 @@
 
     @include hover-move {
       transform: translateY(-2px);
+
+      // The whole tile is the target, unlike a card where the image frame
+      // owns its own hover - a tile is one face, not a stack of regions.
+      .mw-tile-img img {
+        transform: scale(1.05);
+      }
     }
 
     // A tile is tapped, so it needs a press of its own - the lift above never
-    // runs on a finger.
-    &:active {
-      transform: scale(0.985);
-      transition-duration: var(--mw-duration-instant);
+    // runs on a finger. Guarded like every other travel in the framework; what
+    // is left without it is the latched hover, which is feedback enough.
+    @media (prefers-reduced-motion: no-preference) {
+      &:active {
+        transform: scale(0.985);
+        transition-duration: var(--mw-duration-instant);
+      }
     }
 
     &-img {
@@ -145,6 +110,13 @@
         font-size: font-size('sm');
         line-height: 1.3;
 
+        // The ramp the header takes: a tile filling a phone is a wide
+        // container and reads at full size, one squeezed into a desktop
+        // column stays small.
+        @container mw-tile (width >= #{$_mw-tile-narrow}) {
+          font-size: font-size('base');
+        }
+
         &:last-child {
           margin-bottom: spacing('0');
         }
@@ -186,6 +158,10 @@
 
         p {
           font-size: font-size('xs');
+
+          @container mw-tile (width >= #{$_mw-tile-narrow}) {
+            font-size: font-size('sm');
+          }
         }
       }
     }
@@ -225,6 +201,24 @@
     }
   }
 
+  // A tile is only a control when the markup makes it one. The look above is a
+  // surface and stays on a div; everything a finger or a keyboard needs sits
+  // here, where the element itself answers for it - a hand cursor on a div
+  // promises a click nothing handles, and a ring on it would never be reached.
+  a.mw-tile,
+  button.mw-tile {
+    cursor: pointer;
+    // A button brings its own font, alignment and colour, and the tile's own
+    // children set none of the three
+    font: inherit;
+    color: inherit;
+    text-align: inherit;
+    text-decoration: none;
+
+    @include focus-ring;
+    @include tappable;
+  }
+
   // A cramped tile reads better ranged left whatever the window is doing - a
   // centred line inside 200px is two words and a gap. Every selector here is a
   // child: a container cannot answer a query about itself, and the tile *is* the

package/src/scss/layout/_grid.scss

@@ -122,6 +122,28 @@ $_grid-from: ('sm', 'md', 'lg', 'xl');
     }
   }
 
+  // The container half of the tile component. Here and not in `_tiles.scss`,
+  // because it is one of the ramps above and a component file cannot reach them.
+  //
+  // The guard is what makes a modifier replace the bare ramp rather than layer
+  // on it: both step at the same breakpoints, so which one holds a given width
+  // would otherwise come down to media query order.
+  .mw-tiles {
+    @extend %grid-base;
+  }
+
+  .mw-tiles:not(.mw-tiles-2col):not(.mw-tiles-4col) {
+    @include _column-grid(map.get($_column-steps, 3));
+  }
+
+  .mw-tiles-2col {
+    @include _column-grid(map.get($_column-steps, 2));
+  }
+
+  .mw-tiles-4col {
+    @include _column-grid(map.get($_column-steps, 4));
+  }
+
   .mw-grid-flex {
     @extend %grid-base;
 

package/src/scss/layout/_header.scss

@@ -518,17 +518,6 @@
     }
   }
 
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(-10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
   // Profile button - a round avatar until there is room for the signed-in name
   // beside it
   .mw-profile-btn {

package/src/scss/layout/_home.scss

@@ -20,7 +20,7 @@
 
       &-fade {
         @extend .mw-home-content;
-        animation: fadeIn var(--mw-duration-slower) var(--mw-ease-out);
+        animation: mw-home-fade var(--mw-duration-slower) var(--mw-ease-out);
       }
     }
 
@@ -47,7 +47,7 @@
     }
   }
 
-  @keyframes fadeIn {
+  @keyframes mw-home-fade {
     from {
       opacity: 0;
       transform: translateX(-8px) translateY(-23px);

package/src/scss/layout/_section.scss

@@ -17,6 +17,12 @@
     // every background the framework paints.
     border-top: 2px solid var(--mw-border);
 
+    // A head without a lead is a rule and one line of type, and the gap sized
+    // to follow a paragraph reads as a hole under it
+    &:not(:has(.mw-section-head-intro)) {
+      --mw-section-head-gap: calc(var(--mw-section-head-step) * 1.3);
+    }
+
     // The rule stays quiet so it reads as a boundary and not as a border, and
     // quiet is still hard to see on a patterned band. Hence the mark:
     // a short, thicker piece of the accent colour sitting on the line at the
@@ -49,7 +55,7 @@
   // is left - four fifths of a phone is a column nothing fits in.
   .mw-section-head-intro {
     max-width: 75ch;
-    margin: spacing('4') spacing('0') spacing('0');
+    margin: calc(var(--mw-section-head-step) * 0.56) spacing('0') spacing('0');
     font-size: font-size('md');
     line-height: 1.6;
     color: var(--mw-text-muted-color);
@@ -113,9 +119,11 @@
   // levels read as a hierarchy rather than as two of the same thing.
   .mw-section-subtitle {
     font-size: fluid('xl', '2xl', $to: 'sm');
-    // The section boundary is 56px on a phone, so the component boundary sits
-    // with it or the two stop being distinguishable
-    margin: spacing('6') spacing('0') spacing('4') spacing('0');
+    // The section boundary steps down on a phone, so the component boundary
+    // sits with it or the two stop being distinguishable
+    margin-block: var(--mw-section-head-step)
+      calc(var(--mw-section-head-step) * 0.56);
+    margin-inline: spacing('0');
     position: relative;
 
     &::after {
@@ -130,6 +138,21 @@
     }
   }
 
+  // The lead under a subtitle is a plain paragraph, so nothing but this gives it
+  // the gap to the content - every page would otherwise spell it out per instance.
+  // Two selectors because a lead sometimes runs to a second paragraph, and the
+  // gap has to sit under the last one.
+  .mw-section-subtitle + p,
+  .mw-section-subtitle + p + p {
+    margin-bottom: var(--mw-section-head-step);
+  }
+
+  // Nothing between the heading and the content: the heading carries the gap the
+  // lead would have carried
+  .mw-section-subtitle:not(:has(+ p)) {
+    margin-bottom: var(--mw-section-head-step);
+  }
+
   // Sticky, because the strip is the only way back: inside a long section the
   // nav at the entrance can be twenty thousand pixels behind the reader
   .mw-section-nav {
@@ -153,11 +176,17 @@
     @include scrollbar;
   }
 
-  // The strip parks under the header, so a jump to a component clears both
+  // The strip parks under the header, so everything scrolled to - an anchor and
+  // a tab stop alike - has to clear both. The reset reserves the header, this
+  // adds the strip on top of it for as long as a page carries one.
+  html:has(.mw-section-nav) {
+    --mw-section-nav-offset: var(--mw-section-nav-height);
+  }
+
+  // The offset above lands a target flush under the strip; this is the air
+  // between the two.
   .mw-container > div:has(> .mw-section-subtitle) {
-    scroll-margin-top: calc(
-      var(--mw-header-height) + var(--mw-section-nav-height) + #{spacing('5')}
-    );
+    scroll-margin-top: spacing('5');
   }
 
   .mw-section-btn {
@@ -192,6 +221,9 @@
 
     @include focus-ring;
     @include tappable;
+    // It sits under the floor on its own, in a strip that scrolls sideways
+    // under the thumb - a near miss here costs a jump, not just a retry
+    @include touch-floor;
 
     &:disabled {
       cursor: not-allowed;
@@ -200,12 +232,12 @@
   }
 
   @include media-up('sm') {
-    // One step above the demo gap of spacing('6'), and that step is the whole
-    // margin the boundary between two components has over the one between two
-    // demos - the heading leans toward what it names, not toward what came
-    // before it.
+    // Half a step more than the gap it leaves below itself, and that difference
+    // is the whole margin the boundary between two components has over the one
+    // between two demos - the heading leans toward what it names, not toward
+    // what came before it.
     .mw-section-subtitle {
-      margin-top: spacing('8');
+      margin-top: calc(var(--mw-section-head-step) * 1.49);
     }
   }
 

package/src/scss/utilities/_touch-targets.scss

@@ -139,12 +139,16 @@
   @include media-down('md') {
     :root {
       --mw-section-padding-block: #{spacing('9')};
+      --mw-section-padding-compact: #{spacing('7')};
+      --mw-section-padding-airy: #{spacing('10')};
     }
   }
 
   @include media-down('sm') {
     :root {
       --mw-section-padding-block: #{spacing('7')};
+      --mw-section-padding-compact: #{spacing('6')};
+      --mw-section-padding-airy: #{spacing('9')};
     }
   }