maverick-wave 5.25.0 → 5.26.0

package/src/scss/base/_base.scss

@@ -152,17 +152,33 @@
       calc(100% - 2 * var(--mw-container-gutter))
     );
     --mw-section-padding-block: #{spacing('10')};
-    // The third regime beside the stepped default and the two flat presets:
+    // The two presets, as tokens rather than the values themselves: a preset is
+    // picked by pointing `--mw-section-padding-block` at one, and that lands
+    // inline on the element, where a media query cannot reach it. Named here,
+    // the phone steps below apply to a preset as much as to the default - a
+    // compact page stays the tightest of the three at every width.
+    --mw-section-padding-compact: #{spacing('8')};
+    --mw-section-padding-airy: #{spacing('12')};
+    // The third regime beside the stepped default and the two stepped presets:
     // spacing that grows with the screen. It starts at the value a phone already
     // gets below `sm` and reaches the airy preset at `xl`, so a desktop pushes
     // less content past per wheel notch while the phone carries none of that air.
-    // Point `--mw-section-padding-block` at it to switch a page over - a choice
-    // like the presets are, not the default.
+    // Needs no steps of its own - the ramp is the steps.
     --mw-section-padding-fluid: #{fluid(spacing('7'), spacing('12'), $to: 'xl')};
     // The section head: the gap it leaves to the content below, the space
     // between its rule and the title, and the mark sitting on that rule.
-    --mw-section-head-gap: #{spacing('10')};
-    --mw-section-head-pad: #{spacing('6')};
+    //
+    // One step, and every measure in a head is a multiple of it. It follows the
+    // section rhythm, so the spacing switch moves the heads with it and the
+    // fluid preset needs no ramp of its own - at a fraction of the swing,
+    // because a head is a boundary inside the page and would otherwise grow
+    // past the section it opens. The multipliers land on today's values at the
+    // default rhythm.
+    --mw-section-head-step: calc(
+      #{spacing('4')} + var(--mw-section-padding-block) * 0.18
+    );
+    --mw-section-head-gap: calc(var(--mw-section-head-step) * 1.86);
+    --mw-section-head-pad: var(--mw-section-head-step);
     --mw-section-head-mark-width: 80px;
     --mw-section-head-mark-color: var(--mw-primary-color);
     --mw-scroll-hint-offset: #{spacing('9')};

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 {
@@ -200,12 +223,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')};
     }
   }