maverick-wave 5.24.0 → 5.26.0

package/src/partials/contact-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Contact</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   The practical block at the end of a site - when we are open, how to reach us.
   Only the second half is a component: <code>mw-contact</code> is an
   <code>&lt;address&gt;</code> with its italics undone and a label column that

package/src/partials/divider-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Divider</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A rule between two things - horizontal or vertical, solid or dashed, in a
   brand colour, or with a label sitting in the middle of it.
 </p>

package/src/partials/dropdown-container.html

@@ -1,6 +1,6 @@
 <h3 class="mw-section-subtitle">Dropdown</h3>
 
-<p class="mw-text-muted mw-mb-6 mw-text-measure">
+<p class="mw-text-muted mw-text-measure">
   Built on <code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code> rather
   than a <code>div</code> and a click handler. That buys the whole keyboard
   contract for free: the trigger is focusable, Enter and Space toggle it, the

package/src/partials/empty-state-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Empty State</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   What a list shows when it holds nothing. An icon, a line saying what is
   missing and, ideally, the action that fills it. The parts are
   <code>-icon</code>, <code>-title</code> and <code>-desc</code>.

package/src/partials/form-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Form</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   The layout around the fields: a flex column with a single gap, so no field
   needs a margin of its own. <code>mw-form</code> carries no padding, which is
   what lets it sit straight inside a modal body or a panel.

package/src/partials/form-elements-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Form Elements</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Every control the framework styles. They stay light in both themes on purpose,
   and they share one height per size step - a field, a select and the button
   beside them line up by construction.

package/src/partials/form-field-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Form Field Pattern</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Label, field, hint and error as one unit, so the spacing between them is not
   re-invented per form. Written with Angular reactive forms in mind; the markup
   is plain HTML.

package/src/partials/gallery-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Image Gallery</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A slider for photos: swipe, arrows, dots and a caption read off the slide
   itself. The dots are real buttons, so the fourth picture is reachable without
   a mouse.

package/src/partials/get-started-container.html

@@ -412,17 +412,12 @@ import './assets/maverick-wave.min.css';</code></pre>
   <a href="#documentation" class="mw-btn mw-btn-primary">
     Explore Documentation
   </a>
-  <button
-    type="button"
-    onclick="
-      window.open(
-        'https://github.com/m1well/maverick-wave',
-        '_blank',
-        'noopener'
-      )
-    "
+  <a
+    href="https://github.com/m1well/maverick-wave"
+    target="_blank"
+    rel="noopener noreferrer"
     class="mw-btn mw-btn-outline"
   >
     <i class="fab fa-github"></i> GitHub Repository
-  </button>
+  </a>
 </div>

package/src/partials/grid-container.html

@@ -1,6 +1,6 @@
 <h3 class="mw-section-subtitle">Grid System</h3>
 
-<p class="mw-text-muted mw-mb-4">
+<p class="mw-text-muted">
   MaverickWave CSS framework provides a simple grid system that adapts to
   different screen sizes, making responsive layouts simple to implement. It also
   has an advanced grid system with custom column spans. Perfect for complex

package/src/partials/header-utilities-container.html

@@ -1,12 +1,12 @@
 <h3 class="mw-section-subtitle">Header Utilities</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   The controls that live in the bar itself rather than on the page: the theme
   switch, the language switcher and the login button. All of them are real
   buttons, so they are reachable by keyboard - the theme switch in particular is
   the first thing someone with a light-sensitivity need goes looking for.
 </p>
 
-<div class="mw-mt-6">
+<div>
   <h3 class="mw-mb-2">Color Switcher (on a fake header here)</h3>
   <p class="mw-text-muted">
     This one is not clickable - the real switcher sits in the header at the top

package/src/partials/html-lists-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">HTML Lists</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   The plain <code>ul</code> and <code>ol</code> the framework styles, for prose.
   Anything meant to be used rather than read - selectable rows, menus - belongs
   in the item lists instead.

package/src/partials/info-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Info Badges & Counters</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A small solid marker for a status, a label or a count, down to a mini form
   that fits inside a table cell. A tag names something; this one flags it.
 </p>

package/src/partials/input-group-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Input Group</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A field with something welded to its edge - a unit, an icon, a button. Put the
   size modifier on the group and it reaches the field inside, and the whole
   group takes one focus ring rather than three.
@@ -131,9 +131,7 @@
           <button
             type="button"
             class="mw-btn mw-btn-outline"
-            onclick="
-              navigator.clipboard?.writeText('https://maverick-wave.m1well.com')
-            "
+            data-mw-copy=""
             aria-label="Copy link"
           >
             <i class="fas fa-copy"></i>

package/src/partials/item-lists-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Item Lists</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Rows that are meant to be used, not just read: selectable, clickable, with a
   sliding accent or a checkbox. For a plain bulleted list use the HTML lists
   above.

package/src/partials/kanban-container.html

@@ -1,12 +1,12 @@
 <h3 class="mw-section-subtitle">Kanban</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A board is a <code>mw-kanban</code> with one <code>mw-kanban-column</code> per
   status, a ticket a plain <code>mw-card</code> with
   <code>mw-kanban-card</code> on top. The priority is the regular
   <code>mw-card-ribbon</code> and brings its colour along on its own.
 </p>
 
-<h4 class="mw-mb-2 mw-mt-8">Default Board</h4>
+<h4 class="mw-mb-2">Default Board</h4>
 <div
   class="mw-kanban"
   data-kanban-prefix="MW"

package/src/partials/kbd-container.html

@@ -1,6 +1,6 @@
 <h3 class="mw-section-subtitle">Keyboard Keys</h3>
 
-<p class="mw-text-muted mw-mb-6 mw-text-measure">
+<p class="mw-text-muted mw-text-measure">
   Anything that tells someone which key to press should look like the key.
   <code>&lt;kbd&gt;</code> is styled directly, so a shortcut in prose needs no
   class at all; <code>mw-kbd</code> is there for a <code>span</code> when the

package/src/partials/leader-row-container.html

@@ -1,10 +1,10 @@
 <h3 class="mw-section-subtitle">Leader row</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A label, its value, and a dotted line connecting the two - the row a menu, a
   table of contents and an invoice all draw. The line is generated by the row
   itself, so the markup is two spans.
 </p>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Label and value is what <code>&lt;dl&gt;</code> is for, and since HTML 5.2 a
   <code>&lt;div&gt;</code> may group a <code>&lt;dt&gt;</code> and its
   <code>&lt;dd&gt;</code> inside one - so the semantic version costs no extra

package/src/partials/login-container.html

@@ -1,12 +1,12 @@
 <h3 class="mw-section-subtitle">Login</h3>
 
-<p class="mw-text-muted mw-my-0">
+<p class="mw-text-muted">
   Click "Login" to simulate a failure and see the red border. It will
   automatically clear after 4 seconds.
 </p>
 
 <div class="mw-mb-4">
-  <div class="mw-login mw-my-8">
+  <div class="mw-login mw-mb-8">
     <div class="mw-login-logo">
       <img
         src="https://m1well.com/images/header_logo.svg"

package/src/partials/lunch-menu-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Lunch menu</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Nothing below is a lunch-menu component. It is <code>mw-card</code>,
   <code>mw-price</code>, <code>mw-date-stamp</code> and two grid classes - a
   weekly menu is a composition, not a widget. One day per row: five columns
@@ -8,7 +8,7 @@
   every row the height of the tallest, so a day with a second line of
   description does not make its card taller than the rest of the week.
 </p>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   <code>mw-date-stamp</code> answers to the card, not the viewport. On a narrow
   card it is a muted line above the title; once the card is wide enough that a
   single column would leave its right half empty - as every card in a stacked

package/src/partials/media-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Media</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Self-hosted audio and video. The framework ships no player - the native
   controls are the player, and <code>accent-color</code> already brands them.
   The wrapper makes the element a full-width block; a <code>video</code> also

package/src/partials/meta-info-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Meta Info</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   The line of small facts that sits with a heading - author, date, reading time,
   status. One wrapping row, with the separators drawn by CSS rather than typed
   into the markup.

package/src/partials/modals-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Simple Modals</h3>
-<p class="mw-text-muted mw-mb-6">
+<p class="mw-text-muted">
   A <code>&lt;dialog&gt;</code> carrying the same <code>mw-modal</code> classes.
   Escape, the focus trap, the inert page behind it and the body scroll lock come
   from the element - only opening it needs a line of script. The older

package/src/partials/page-header-container.html

@@ -1,6 +1,6 @@
 <h3 class="mw-section-subtitle">Page Header</h3>
 
-<p class="mw-text-muted mw-mb-6">
+<p class="mw-text-muted">
   The start of a content page: title and subtitle on the left, actions on the
   right, wrapping when it gets tight. The counterpart to
   <code>mw-section-head</code>, which opens a section of a landing page rather

package/src/partials/pagination-container.html

@@ -1,12 +1,12 @@
 <h3 class="mw-section-subtitle">Simple Pagination</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   The same frame as a calendar - an arrow on each side of the title, content
   below - but the body is yours. Not a page-number list; the paging itself is
   your job, <code>mw-pagination-loading</code> dims the body while the next page
   is on its way.
 </p>
 
-<div class="mw-pagination mw-my-6" id="weekPagination">
+<div class="mw-pagination mw-mb-6" id="weekPagination">
   <div class="mw-pagination-header">
     <button
       type="button"

package/src/partials/palette-container.html

@@ -450,9 +450,9 @@
         class="mw-select mw-select-sm"
         data-variant-prop="--mw-section-padding-block"
       >
-        <option value="2rem">Compact</option>
+        <option value="var(--mw-section-padding-compact)">Compact</option>
         <option value="" selected>Default</option>
-        <option value="5.5rem">Airy</option>
+        <option value="var(--mw-section-padding-airy)">Airy</option>
         <option value="var(--mw-section-padding-fluid)">
           Fluid - grows with the screen
         </option>

package/src/partials/panels-container.html

@@ -1,10 +1,10 @@
 <h3 class="mw-section-subtitle">Panels</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A card whose header and footer are part of the frame rather than the content.
   The body scrolls on its own, which is what the max-height variants are for.
 </p>
 
-<div class="mw-grid-1 mw-my-6">
+<div class="mw-grid-1 mw-mb-6">
   <div class="mw-panel">
     <h4 class="mw-panel-header">Default Panel</h4>
     <div class="mw-panel-body">

package/src/partials/parallax-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Parallax</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Two ways to play a picture against the scroll, both on the browser's scroll
   timeline - no listener, and no
   <code>background-attachment: fixed</code>, which iOS ignores. The image lives

package/src/partials/pricing-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Pricing</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Two pieces that are usually needed together: <code>mw-price</code>, the figure
   on its own, and <code>mw-offer</code>, the card it is sold from. The price is
   one baseline row - what it cost before, what it costs now, the unit, a
@@ -7,7 +7,7 @@
   <code>--mw-price-size</code>, so <code>mw-price-sm</code> and
   <code>mw-price-lg</code> move the whole row at once.
 </p>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A struck-through price is a visual convention that a screen reader does not
   pass on - <code>&lt;s&gt;</code> is announced by almost none of them. Where an
   old and a new price stand next to each other, name them with

package/src/partials/progress-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Progress Bars</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A bar with an optional label and scale. The fill runs up from zero when it
   scrolls into view, so the number gets read rather than just seen.
 </p>

package/src/partials/prose-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Prose</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Long-form running text - a legal page, terms, a plain article. One class on
   the container, bare <code>h2</code>/<code>h3</code>/<code>p</code>/<code
     >ul</code

package/src/partials/ratings-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Ratings</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Change the <code>data-rating</code> attribute (0-5) to see how many thumbs-up
   light up. You can also determine the icon flexibly.
 </p>

package/src/partials/section-head-container.html

@@ -1,6 +1,6 @@
 <h3 class="mw-section-subtitle">Section Head</h3>
 
-<p class="mw-text-muted mw-mb-6">
+<p class="mw-text-muted">
   The opening of a section: a hairline rule, a mark sitting on its left end, the
   title, and the line that says what follows. Everything starts at one edge -
   centred body copy moves its own left edge with every line break, so the eye
@@ -37,7 +37,7 @@
         <h2 class="mw-section-head-title">About me</h2>
         <p class="mw-section-head-intro">
           A section head without a lead works the same way - the next one below
-          shows it.
+          shows it, and takes a smaller gap to the content for it.
         </p>
       </div>
 
@@ -55,7 +55,10 @@
       <code>-success</code>, <code>-warning</code>, <code>-danger</code> and
       <code>-info</code>. Its length is
       <code>--mw-section-head-mark-width</code> (80px), the gap to the content
-      below <code>--mw-section-head-gap</code>.
+      below <code>--mw-section-head-gap</code>. That gap and the space above the
+      title are multiples of <code>--mw-section-head-step</code>, which follows
+      <code>--mw-section-padding-block</code> - so the section spacing picker in
+      the palette panel moves the heads along with the page.
     </p>
     <div class="mw-card mw-card-simple">
       <div class="mw-section-head mw-section-head-secondary">

package/src/partials/segmented-container.html

@@ -1,6 +1,6 @@
 <h3 class="mw-section-subtitle">Segmented Control</h3>
 
-<p class="mw-text-muted mw-mb-6">
+<p class="mw-text-muted">
   Two or three positions of <em>one</em> switch - income or expense, offer or
   quote. Deliberately not a <strong>mw-button-bar</strong>: that one stacks
   below 576px and gives every button 96% width, which is right for a row of

package/src/partials/skeleton-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Skeleton Loader</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   The shape of the content before the content arrives. Match it to what is
   actually loading - a skeleton in the wrong shape is worse than a spinner,
   because the page then moves twice.

package/src/partials/spinners-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Loading Spinners</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Three shapes for the same job. Each one needs its shape class:
   <code>mw-spinner-primary</code> on its own renders nothing at all.
 </p>

package/src/partials/stepper-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Stepper</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A process with a known number of steps and a current one. Horizontal where
   there is width for it, vertical where the labels need the room.
 </p>

package/src/partials/tables-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Tables</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Rows for data that has columns. On a phone a wide table either scrolls inside
   its own frame or turns each row into a card -
   <code>mw-table-responsive</code> for the first,

package/src/partials/tabs-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Tabs</h3>
-<p class="mw-text-muted mw-mb-6">
+<p class="mw-text-muted">
   A tab bar scrolls sideways when it runs out of room, and now it says so: a
   shadow appears on whichever side still has tabs behind it, and disappears once
   that end is reached. Four gradients, no scroll listener. The fade colour comes

package/src/partials/tags-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Tags</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A label with a soft surface that names something - a topic, a state, a
   category - and sits in a row of its own kind. For a count or a status marker
   reach for a badge instead.
@@ -98,7 +98,6 @@
             type="button"
             class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
             aria-label="Remove filter: active"
-            onclick="this.closest('.mw-tags-item').remove()"
           >
             <i class="fas fa-times"></i>
           </button>
@@ -141,7 +140,6 @@
             type="button"
             class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
             aria-label="Remove React"
-            onclick="this.closest('.mw-tags-item').remove()"
           >
             <i class="fas fa-times"></i>
           </button>
@@ -152,7 +150,6 @@
             type="button"
             class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
             aria-label="Remove Vue.js"
-            onclick="this.closest('.mw-tags-item').remove()"
           >
             <i class="fas fa-times"></i>
           </button>
@@ -167,7 +164,6 @@
             type="button"
             class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
             aria-label="Remove Online"
-            onclick="this.closest('.mw-tags-item').remove()"
           >
             <i class="fas fa-times"></i>
           </button>
@@ -178,7 +174,6 @@
             type="button"
             class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
             aria-label="Remove Available"
-            onclick="this.closest('.mw-tags-item').remove()"
           >
             <i class="fas fa-times"></i>
           </button>
@@ -193,7 +188,6 @@
             type="button"
             class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
             aria-label="Remove Filter: Architecture"
-            onclick="this.closest('.mw-tags-item').remove()"
           >
             <i class="fas fa-times"></i>
           </button>

package/src/partials/testimonials-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Testimonials</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   A quote card with its source - a <code>figure</code>, because quote and
   attribution belong together. One voice may stand above the grid as
   <code>mw-testimonial-featured</code>; the rest flow in

package/src/partials/tiles-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Tiles</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   Here you can create clickable tiles with header, information and a possible
   image.
 </p>

package/src/partials/typography-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Typography</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   The heading scale, the body text and everything the framework sets on bare
   elements. Headings carry <code>text-wrap: balance</code> and a touch of
   negative tracking, paragraphs <code>text-wrap: pretty</code>.

package/src/partials/utilities-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Utilities</h3>
-<p class="mw-text-muted mw-text-measure mw-mb-6">
+<p class="mw-text-muted mw-text-measure">
   The classes that do exactly one thing: spacing, flex, display, text,
   elevation, aspect ratio. Worth checking before writing a rule of your own -
   most one-off styles in an application turn out to be a utility that already

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/components/_blog-post.scss

@@ -98,17 +98,20 @@
     &-meta {
       display: flex;
       flex-wrap: wrap;
-      align-items: center;
+      flex-direction: column;
+      align-items: start;
+      gap: spacing('2');
+      margin-top: spacing('5');
       margin-bottom: spacing('6');
       font-size: font-size('sm');
       color: var(--mw-text-muted-color);
-      row-gap: spacing('1');
 
-      @include media-down('sm') {
-        flex-direction: column;
-        gap: spacing('2');
-        margin-top: spacing('5');
-        align-items: start;
+      @include media-up('sm') {
+        flex-direction: row;
+        align-items: center;
+        column-gap: normal;
+        row-gap: spacing('1');
+        margin-top: spacing('0');
       }
 
       &-item {
@@ -262,12 +265,14 @@
       padding-top: spacing('4');
       border-top: 1px solid var(--mw-secondary-text-color);
       display: flex;
+      flex-direction: column;
+      gap: spacing('2');
       justify-content: space-between;
       align-items: center;
 
-      @include media-down('sm') {
-        flex-direction: column;
-        gap: spacing('2');
+      @include media-up('sm') {
+        flex-direction: row;
+        gap: normal;
       }
 
       &-button {