maverick-wave 5.23.0 → 5.25.0

package/src/partials/tags-container.html

@@ -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/scss/base/_base.scss

@@ -159,7 +159,12 @@
     // Point `--mw-section-padding-block` at it to switch a page over - a choice
     // like the presets are, not the default.
     --mw-section-padding-fluid: #{fluid(spacing('7'), spacing('12'), $to: 'xl')};
-    --mw-section-title-gap: #{spacing('7')};
+    // 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')};
+    --mw-section-head-mark-width: 80px;
+    --mw-section-head-mark-color: var(--mw-primary-color);
     --mw-scroll-hint-offset: #{spacing('9')};
     --mw-scroll-hint-inline: var(--mw-container-gutter);
     --mw-scroll-hint-reserve: #{spacing('10')};

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 {

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

@@ -8,21 +8,24 @@
     min-height: 100dvh;
     display: flex;
     flex-direction: column;
+    // Numbered section heads count per page body, so a second main on the same
+    // document starts at 01 again instead of continuing the first one.
+    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;
       }
     }