maverick-wave 5.32.0 → 5.34.0

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.

package/src/scss/layout/_section.scss

@@ -124,7 +124,7 @@
     font-size: fluid('xl', '2xl', $to: 'sm');
     // 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)
+    margin-block: calc(var(--mw-section-head-step) * 1.5)
       calc(var(--mw-section-head-step) * 0.56);
     margin-inline: spacing('0');
     position: relative;
@@ -235,12 +235,12 @@
   }
 
   @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
+    // 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: calc(var(--mw-section-head-step) * 1.5);
+      margin-top: calc(var(--mw-section-head-step) * 2);
     }
   }