maverick-wave 5.26.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

@@ -176,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 {
@@ -215,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;