maverick-wave 5.24.0 → 5.26.0

package/src/scss/components/_button-bar.scss

@@ -3,7 +3,8 @@
 @layer mw.components {
   .mw-button-bar {
     display: flex;
-    gap: spacing('3');
+    flex-direction: column;
+    gap: spacing('2');
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
@@ -11,17 +12,20 @@
     border-radius: radius('md');
     padding: spacing('2');
 
+    .mw-btn {
+      width: 100%;
+    }
+
     &:hover {
       border-color: var(--mw-border-accent);
     }
 
-    @include media-down('sm') {
-      flex-direction: column;
-      gap: spacing('2');
+    @include media-up('sm') {
+      flex-direction: row;
+      gap: spacing('3');
 
       .mw-btn {
-        width: 100%;
-        min-width: 0;
+        width: auto;
       }
     }
   }

package/src/scss/components/_code.scss

@@ -42,15 +42,15 @@
       white-space: pre-wrap;
       display: block;
       line-height: 1.5;
+      font-size: font-size('3xs');
 
-      @include media-down('sm') {
+      @include media-up('xs') {
         font-size: font-size('2xs');
-        white-space: pre-wrap;
-        word-break: break-word;
       }
 
-      @include media-down('xs') {
-        font-size: font-size('3xs');
+      // Back to the shared `code, pre` size
+      @include media-up('sm') {
+        font-size: font-size('xs');
       }
     }
   }
@@ -80,10 +80,13 @@
     &-filename {
       font-weight: font-weight('medium');
       margin-right: spacing('2');
+      font-size: font-size('2xs');
+      // The header wraps at this width, so the language chip needs its own line
+      margin-bottom: spacing('1');
 
-      @include media-down('sm') {
-        font-size: font-size('2xs');
-        margin-bottom: spacing('1');
+      @include media-up('sm') {
+        font-size: font-size('xs');
+        margin-bottom: spacing('0');
       }
     }
 
@@ -102,19 +105,16 @@
       border: none;
       max-width: 100%;
       overflow-x: auto;
+      font-size: font-size('3xs');
+      padding: spacing('1');
 
-      @include media-down('sm') {
+      @include media-up('xs') {
         font-size: font-size('2xs');
-        padding: spacing('1');
-
-        code {
-          white-space: pre-wrap;
-          word-break: break-word;
-        }
       }
 
-      @include media-down('xs') {
-        font-size: font-size('3xs');
+      @include media-up('sm') {
+        font-size: font-size('xs');
+        padding: spacing('4');
       }
     }
   }
@@ -213,18 +213,6 @@
     overflow-x: auto;
     position: relative;
 
-    // Add horizontal scrolling indicator for small screens
-    @include media-down('sm') {
-      background-position:
-        left center,
-        right center;
-      background-repeat: no-repeat;
-      background-size:
-        20px 100%,
-        20px 100%;
-      background-attachment: local, local;
-    }
-
     & > * {
       max-width: 100%;
     }
@@ -234,14 +222,15 @@
       width: 100%;
 
       pre {
-        white-space: pre;
+        white-space: pre-wrap;
+        word-break: break-word;
         width: 100%;
         overflow-x: auto;
 
-        // For very small screens, allow wrapping
-        @include media-down('xs') {
-          white-space: pre-wrap;
-          word-break: break-word;
+        // From here the box can scroll a long line instead of splitting it
+        @include media-up('xs') {
+          white-space: pre;
+          word-break: normal;
         }
       }
 

package/src/scss/components/_info.scss

@@ -63,7 +63,9 @@
       align-items: flex-start;
       width: 100%;
       max-width: 68ch;
-      margin-inline: auto;
+      // Left, like everything else that carries running text. It used to centre
+      // itself, which only ever matched a page whose headings were centred too.
+      margin-inline: 0;
       padding: spacing('6') spacing('7');
       font-weight: font-weight('normal');
       line-height: 1.7;
@@ -78,6 +80,11 @@
         transform: none;
       }
 
+      // For the page that does centre its blocks
+      &-center {
+        margin-inline: auto;
+      }
+
       strong {
         margin-bottom: spacing('2');
       }

package/src/scss/components/_kanban.scss

@@ -67,15 +67,15 @@
       auto-fit,
       minmax(min(#{$_mw-kanban-lane-min}, 100%), 1fr)
     );
-    gap: spacing('4');
-    padding: spacing('4');
+    // Frame only - how tight the board sits on a phone is a viewport call
+    gap: spacing('3');
+    padding: spacing('3');
     background: var(--mw-kanban-background);
     border-radius: radius('md');
 
-    // Frame only - how tight the board sits on a phone is a viewport call
-    @include media-down('sm') {
-      gap: spacing('3');
-      padding: spacing('3');
+    @include media-up('sm') {
+      gap: spacing('4');
+      padding: spacing('4');
     }
   }
 

package/src/scss/components/_meta-info.scss

@@ -9,13 +9,14 @@
       display: flex;
       flex-wrap: wrap;
       align-items: center;
-      justify-content: flex-end;
-      row-gap: spacing('1');
+      justify-content: flex-start;
+      column-gap: spacing('6');
+      row-gap: spacing('2');
 
-      @include media-down('sm') {
-        justify-content: flex-start;
-        column-gap: spacing('6');
-        row-gap: spacing('2');
+      @include media-up('sm') {
+        justify-content: flex-end;
+        column-gap: normal;
+        row-gap: spacing('1');
       }
     }
 

package/src/scss/components/_tables.scss

@@ -10,7 +10,8 @@
 
     th,
     td {
-      padding: spacing('3') spacing('4');
+      padding: spacing('2') spacing('3');
+      font-size: font-size('xs');
       text-align: left;
       border: 1px solid var(--mw-border);
       color: var(--mw-text-muted-color);
@@ -40,11 +41,12 @@
       }
     }
 
-    @include media-down('sm') {
+    @include media-up('sm') {
       th,
       td {
-        padding: spacing('2') spacing('3');
-        font-size: font-size('xs');
+        padding: spacing('3') spacing('4');
+        // Back to whatever the table is set in - the base size is the phone step
+        font-size: inherit;
       }
     }
   }

package/src/scss/components/_tiles.scss

@@ -20,9 +20,12 @@
       grid-template-columns: repeat(3, 1fr);
     }
 
+    // The page gutter is the container's job, a second inset only narrows the tile
     &-4col {
-      width: 85%;
-      grid-template-columns: repeat(2, 1fr);
+      @include media-up('sm') {
+        width: 85%;
+        grid-template-columns: repeat(2, 1fr);
+      }
 
       @include media-up('md') {
         grid-template-columns: repeat(3, 1fr);
@@ -31,28 +34,12 @@
       @include media-up('lg') {
         grid-template-columns: repeat(4, 1fr);
       }
-
-      @include media-down('sm') {
-        grid-template-columns: 1fr;
-        // Full width from here on - the page gutter is the container's job,
-        // a second inset only narrows the tile
-        width: 100%;
-        padding: spacing('0');
-        gap: spacing('4');
-      }
     }
 
     &-2col {
-      width: 75%;
-      grid-template-columns: repeat(2, 1fr);
-
-      @include media-down('sm') {
-        grid-template-columns: 1fr;
-        // Full width from here on - the page gutter is the container's job,
-        // a second inset only narrows the tile
-        width: 100%;
-        padding: spacing('0');
-        gap: spacing('4');
+      @include media-up('sm') {
+        width: 75%;
+        grid-template-columns: repeat(2, 1fr);
       }
     }
   }
@@ -75,7 +62,7 @@
     container: mw-tile / inline-size;
     background: var(--mw-card-background);
     @include surface;
-    padding: spacing('5');
+    padding: spacing('4');
     box-shadow: var(--mw-elevation-2);
     transition: var(--mw-transition);
     border: 1px solid var(--mw-border);
@@ -84,6 +71,11 @@
     flex-direction: column;
     cursor: pointer;
 
+    // Ahead of the size modifiers below, which take over from 'sm'
+    @include media-up('sm') {
+      padding: spacing('5');
+    }
+
     // Same hover as a card, arc included - a tile is the larger clickable
     // relative of one, and a pair that looks alike has to react alike.
     &::after {
@@ -169,7 +161,9 @@
     }
 
     &-sm {
-      padding: spacing('4');
+      @include media-up('sm') {
+        padding: spacing('4');
+      }
 
       .mw-tile-img {
         width: 80px;
@@ -197,7 +191,9 @@
     }
 
     &-lg {
-      padding: spacing('6');
+      @include media-up('sm') {
+        padding: spacing('6');
+      }
 
       .mw-tile-img {
         width: 120px;
@@ -249,10 +245,4 @@
       margin: spacing('0') auto spacing('2');
     }
   }
-
-  @include media-down('sm') {
-    .mw-tile {
-      padding: spacing('4');
-    }
-  }
 }

package/src/scss/layout/_grid.scss

@@ -51,6 +51,10 @@ $_column-steps-lg: (
   ),
 );
 
+// The breakpoints a grid can be pushed to. Outside the layer blocks for the
+// same reason as the steps above: both read it.
+$_grid-from: ('sm', 'md', 'lg', 'xl');
+
 @layer mw.layout {
   %grid-base {
     display: grid;
@@ -290,6 +294,19 @@ $_column-steps-lg: (
     }
   }
 
+  // Every ramp above turns two-column at `sm`, and 576px is generous for a
+  // column of running text next to a picture. This pushes the whole ramp up:
+  // single column until the breakpoint named, the grid's own steps from there.
+  // A modifier, so it works on all of them - and it has to come after them,
+  // because it carries the same specificity and wins on order alone.
+  @each $breakpoint in $_grid-from {
+    .mw-grid-from-#{$breakpoint} {
+      @include media-down($breakpoint) {
+        @include _single-column;
+      }
+    }
+  }
+
   // A feature card grows outwards - its frame and its label bar reach into the
   // gap, and two rows of them would touch. The card asks for the room, but the
   // grid has to hand it over: written next to the card it would sit in
@@ -350,4 +367,15 @@ $_column-steps-lg: (
       @include _reveal-ramp($steps);
     }
   }
+
+  // Below its breakpoint the grid is one column, so the stagger has to count in
+  // one too - otherwise two cards standing above each other rise on different
+  // beats. Last, so it beats the ramp it corrects at equal specificity.
+  @each $breakpoint in $_grid-from {
+    .mw-grid-from-#{$breakpoint} {
+      @include media-down($breakpoint) {
+        @include _reveal-stagger(1);
+      }
+    }
+  }
 }

package/src/scss/layout/_header.scss

@@ -529,16 +529,19 @@
     }
   }
 
-  // Profile button - avatar plus the signed-in name
+  // Profile button - a round avatar until there is room for the signed-in name
+  // beside it
   .mw-profile-btn {
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     gap: spacing('3');
     height: 40px;
-    padding: spacing('0') spacing('4') spacing('0') spacing('1');
+    width: 40px;
+    padding: spacing('0');
     background: transparent;
     border: 1px solid var(--mw-header-border);
-    border-radius: radius('2xl');
+    border-radius: radius('full');
     color: var(--mw-header-text-color);
     cursor: pointer;
     transition: var(--mw-transition);
@@ -583,14 +586,18 @@
       font-size: font-size('xl');
     }
 
-    @include media-down('md') {
-      padding: spacing('0');
-      width: 40px;
-      justify-content: center;
-      border-radius: radius('full');
+    .mw-profile-btn-name {
+      display: none;
+    }
+
+    @include media-up('md') {
+      width: auto;
+      justify-content: normal;
+      padding: spacing('0') spacing('4') spacing('0') spacing('1');
+      border-radius: radius('2xl');
 
       .mw-profile-btn-name {
-        display: none;
+        display: inline;
       }
     }
   }

package/src/scss/layout/_home.scss

@@ -5,11 +5,17 @@
     justify-items: center;
     align-items: center;
     text-align: center;
+    // The hero container runs the full width of the screen (see _main.scss), so
+    // the content has to produce the container width itself - otherwise it
+    // starts at a different edge than the header and every section below it.
+    // The gutter is already inside the token, hence no inline padding here.
+    width: var(--mw-container-width);
+    margin-inline: auto;
 
     &-content {
-      padding: spacing('9') spacing('4');
+      padding: spacing('9') spacing('0');
       @include media-up('sm') {
-        padding: spacing('6');
+        padding-block: spacing('6');
       }
 
       &-fade {
@@ -28,6 +34,19 @@
     }
   }
 
+  // A hero that points somewhere instead of sitting in the middle: the signet,
+  // the headline and the buttons all start at the edge the rest of the page
+  // starts at. Centred is still the default - a hero is short enough for it,
+  // which is exactly what a section head is not.
+  .mw-home-start {
+    justify-items: start;
+    text-align: left;
+
+    .mw-home-text {
+      margin-inline: 0;
+    }
+  }
+
   @keyframes fadeIn {
     from {
       opacity: 0;

package/src/scss/layout/_main.scss

@@ -13,19 +13,19 @@
     counter-reset: mw-section-head;
   }
 
-  // Set in from the container it sits in, and giving that back a step at a time
-  // as the screen shrinks. For a column of full-width cards, which at 1200px
-  // leaves more empty card than content.
+  // 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.
   .mw-container-narrow {
-    width: 80%;
+    width: 100%;
     margin-inline: auto;
 
-    @include media-down('lg') {
+    @include media-up('md') {
       width: 90%;
     }
 
-    @include media-down('md') {
-      width: 100%;
+    @include media-up('lg') {
+      width: 80%;
     }
   }
 

package/src/scss/layout/_page-header.scss

@@ -34,11 +34,11 @@
       flex-wrap: wrap;
       align-items: center;
       gap: spacing('3');
-      margin-left: auto;
+      width: 100%;
 
-      @include media-down('sm') {
-        width: 100%;
-        margin-left: spacing('0');
+      @include media-up('sm') {
+        width: auto;
+        margin-left: auto;
       }
     }
 

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,11 +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');
-    // 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.
-    margin: spacing('8') 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 {
@@ -132,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 {
@@ -201,11 +222,13 @@
     }
   }
 
-  @include media-down('sm') {
-    // The section boundary steps down to 56px on a phone, so the component
-    // boundary steps with it or the two stop being distinguishable
+  @include media-up('sm') {
+    // 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('6');
+      margin-top: calc(var(--mw-section-head-step) * 1.49);
     }
   }
 

package/src/scss/main-lean.scss

@@ -0,0 +1,16 @@
+// 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:
+//
+//   @use 'maverick-wave/src/scss/main-lean' with ($primary-color: #1b1b1d);
+//   @use 'maverick-wave/src/scss/components/buttons';
+//   @use 'maverick-wave/src/scss/components/cards';
+//
+// The configuration goes on this file, not on the component imports - they
+// read the tokens it forwards. A landing page that uses eight components lands
+// around a third of the full build; the components carry the rest.
+@forward 'abstracts/variables';
+
+@use 'base';
+@use 'layout';
+@use 'utilities';

package/src/scss/utilities/_index.scss

@@ -4,6 +4,7 @@
 @forward 'display';
 @forward 'elevation';
 @forward 'flex';
+@forward 'print';
 @forward 'reveal';
 @forward 'spacing';
 @forward 'text';