maverick-wave 5.22.0 → 5.23.0

package/src/scss/components/_contact.scss

@@ -0,0 +1,29 @@
+@use '../abstracts' as *;
+
+@layer mw.components {
+  // The block that says how to reach someone - postal address, phone, mail.
+  // Belongs on an <address>, which is what the one font-style is for: the
+  // element is italic by default, and nobody sets an address in italics.
+  .mw-contact {
+    font-style: normal;
+    display: grid;
+    gap: spacing('3');
+
+    > * {
+      margin: 0;
+    }
+
+    &-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: spacing('1') spacing('4');
+    }
+
+    // Sized rather than auto, so the values line up under each other however
+    // long the words in front of them are
+    &-label {
+      flex: 0 0 5rem;
+      color: var(--mw-text-muted-color);
+    }
+  }
+}

package/src/scss/components/_date-stamp.scss

@@ -0,0 +1,141 @@
+@use '../abstracts' as *;
+
+@layer mw.components {
+  // Every fluid value here runs the same ramp: from the width the two-column
+  // layout starts at to the width a day card stops growing at. Against the
+  // container, not the viewport - the layout switch below is a container query,
+  // and sizing off vw would hand a narrow card in a wide window the
+  // measurements of a wide one.
+  @function _stamp-ramp($min, $max) {
+    @return fluid-container($min, $max, $mw-card-wide, 900px);
+  }
+
+  // Named because the today fill cancels the paddings to reach the card border,
+  // and the price variant repeats the track list - two copies would drift apart.
+  $_mw-date-stamp-pad-top: _stamp-ramp(spacing('4'), spacing('6'));
+  $_mw-date-stamp-pad-bottom: _stamp-ramp(spacing('3'), spacing('5'));
+  $_mw-date-stamp-day-col: _stamp-ramp(4.25rem, 7rem);
+  $_mw-date-stamp-gap: _stamp-ramp(spacing('4'), spacing('7'));
+  $_mw-date-stamp-day-size: _stamp-ramp('xl', '3xl');
+
+  // The date on a dated card - an event, a changelog entry, a day on a menu.
+  // Narrow, it is a line above the title. Wide, it turns into a column beside
+  // the content, which is the only thing that fills the right half of a card
+  // that has a whole row to itself.
+  .mw-date-stamp {
+    display: flex;
+    align-items: baseline;
+    gap: spacing('3');
+    margin-bottom: spacing('4');
+    color: var(--mw-text-muted-color);
+
+    &-day {
+      font-size: font-size('sm');
+      font-weight: font-weight('bold');
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+
+    &-date {
+      font-size: font-size('sm');
+      font-variant-numeric: tabular-nums;
+    }
+
+    // A fill, not a text colour: the price on the same card is already primary,
+    // and two blues compete where one would point. The padding is pulled back
+    // out again so the fill bleeds around the line instead of indenting it.
+    &-today {
+      padding: spacing('2') spacing('3');
+      margin-inline: spacing('-3');
+      margin-block-start: spacing('-2');
+      border-radius: radius('sm') radius('lg') radius('sm') radius('lg');
+      background: var(--mw-primary-color);
+      color: var(--mw-primary-accent-text-color);
+    }
+  }
+
+  // No box of its own until there are two columns to be one of, so the card body
+  // keeps seeing the title, the text and the price as its own children - which
+  // is what mw-offer and mw-card-body's last-child rule both select on
+  .mw-date-stamp-body {
+    display: contents;
+  }
+
+  @container mw-card (width >= #{$mw-card-wide}) {
+    // The rule sits here and not in _cards.scss because the stamp is the guest -
+    // the card body's own single column is right for everything that is not one
+    .mw-card-body:has(> .mw-date-stamp) {
+      display: grid;
+      grid-template-columns: $_mw-date-stamp-day-col minmax(0, 1fr);
+      // On the same curve as the column, so the dish keeps the width the day
+      // and the price give up rather than losing it again to the gutters
+      column-gap: $_mw-date-stamp-gap;
+      padding-block: $_mw-date-stamp-pad-top $_mw-date-stamp-pad-bottom;
+    }
+
+    // A third track, for the one price that covers the whole day - it is what the
+    // right half of a wide card is otherwise spent on. Only when there is a
+    // price: with a dish per row it travels with its dish, and an empty track
+    // would still charge the card a gap.
+    .mw-card-body:has(> .mw-date-stamp):has(> .mw-price) {
+      grid-template-columns: $_mw-date-stamp-day-col minmax(0, 1fr) auto;
+    }
+
+    // The row is left to stretch to the body, so a today fill can span the whole
+    // card - which means each column has to centre its own content instead
+    .mw-date-stamp-body {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    // The card body zeroes its own last child, but the wrapper hides ours from
+    // that rule - without this a trailing tag row adds a paragraph margin
+    .mw-date-stamp-body > *:last-child {
+      margin-bottom: spacing('0');
+    }
+
+    // Beside the dish it prices, not under the description that follows it. The
+    // second selector only exists to outrank mw-offer, which pushes a price to
+    // the bottom of the card and ties with the first on specificity alone.
+    .mw-card-body:has(> .mw-date-stamp) > .mw-price,
+    .mw-offer > .mw-card-body:has(> .mw-date-stamp) > .mw-price {
+      align-self: center;
+      justify-self: end;
+      margin-top: spacing('0');
+      padding-top: spacing('0');
+      text-align: right;
+    }
+
+    .mw-date-stamp {
+      flex-direction: column;
+      align-items: flex-start;
+      // Stretched to the row, so the day and the date centre against the title
+      // and description beside them rather than hanging off the first line
+      justify-content: center;
+      gap: spacing('2');
+      margin-bottom: spacing('0');
+    }
+
+    // Top edge of the card to its bottom one: the body's padding is handed back
+    // so the fill reaches the border. Only the two left corners are rounded, and
+    // to the card's own arc less the 1px it sits inside - the right edge is an
+    // inside edge and a cut is what reads as one.
+    .mw-date-stamp-today {
+      margin-block: calc(-1 * #{$_mw-date-stamp-pad-top})
+        calc(-1 * #{$_mw-date-stamp-pad-bottom});
+      margin-inline: calc(-1 * #{spacing('5')}) 0;
+      padding-block: $_mw-date-stamp-pad-top $_mw-date-stamp-pad-bottom;
+      padding-inline: spacing('5');
+      border-radius: calc(#{radius-sharp()} - 1px) 0 0
+        calc(#{radius('xl')} - 1px);
+    }
+
+    .mw-date-stamp-day {
+      // Tracks the column it sits in, or it would outgrow it on the way down
+      font-size: $_mw-date-stamp-day-size;
+      line-height: 1;
+      letter-spacing: 0.02em;
+    }
+  }
+}

package/src/scss/components/_index.scss

@@ -11,7 +11,9 @@
 @forward 'cards';
 @forward 'code';
 @forward 'coming-soon';
+@forward 'contact';
 @forward 'content-slider';
+@forward 'date-stamp';
 @forward 'divider';
 @forward 'dropdown';
 @forward 'empty-state';
@@ -21,6 +23,7 @@
 @forward 'kanban';
 @forward 'kbd';
 @forward 'lang-switch';
+@forward 'leader-row';
 @forward 'links';
 @forward 'lists';
 @forward 'localhost-indicator';

package/src/scss/components/_leader-row.scss

@@ -0,0 +1,89 @@
+@use '../abstracts' as *;
+
+@layer mw.components {
+  // Dots on the baseline, not under the descenders; em so they follow font-size
+  $_mw-leader-baseline-lift: 0.34em;
+
+  // A label on the left, its value on the right, a dotted line bridging the
+  // gap. The line is the whole point: over a wide row the eye loses track of
+  // which value belongs to which label, which is why every printed menu, index
+  // and invoice draws one.
+  //
+  // The leader is the row's own ::before rather than an element in the markup.
+  // A generated box on a flex container is a flex item, so "order" can place it
+  // between the two spans - and generated content stays out of the
+  // accessibility tree, where a filler element would need aria-hidden.
+  .mw-leader-row {
+    --mw-leader-row-style: dotted;
+    --mw-leader-row-width: 2px;
+    --mw-leader-row-color: var(--mw-border);
+
+    display: flex;
+    // The values never shrink, so without a wrap the label is the only thing
+    // left to give - and it gives until it is one letter per line
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: spacing('3');
+    margin: 0;
+
+    &::before {
+      content: '';
+      order: 1;
+      flex: 1 1 auto;
+      // Keeps a stub of line visible when label and value nearly fill the row
+      min-width: spacing('6');
+      border-bottom: var(--mw-leader-row-width) var(--mw-leader-row-style)
+        var(--mw-leader-row-color);
+      margin-bottom: $_mw-leader-baseline-lift;
+    }
+
+    &-label {
+      order: 0;
+      // No min-width override: the default floor is the longest word, so the
+      // label wraps between words and stops there instead of going to nothing.
+      // Past that floor the row wraps rather than the label shrinking further.
+      //
+      // The row also works as a dl group, and a dd carries 40px of browser margin
+      margin: 0;
+    }
+
+    &-value {
+      order: 2;
+      flex-shrink: 0;
+      margin: 0;
+      // A price or a page number must not break, and a column of them only
+      // lines up with tabular figures.
+      white-space: nowrap;
+      font-variant-numeric: tabular-nums;
+    }
+
+    // Two values in one row read as a single long range with only a gap between
+    // them. The mark takes the leader's colour, so retuning a row moves both.
+    // It hangs off the first of the pair, not the second: once the row wraps, a
+    // trailing mark reads as "continues below" and a leading one as a slip.
+    &-value:has(+ &-value)::after {
+      content: '|';
+      margin-left: spacing('3');
+      color: var(--mw-leader-row-color);
+    }
+
+    &-dashed {
+      --mw-leader-row-style: dashed;
+    }
+
+    &-solid {
+      --mw-leader-row-style: solid;
+      --mw-leader-row-width: 1px;
+    }
+
+    &-top {
+      align-items: flex-start;
+
+      &::before {
+        // flex-start pins the leader to the top edge, so it drops to the first
+        // line's baseline itself instead of being lifted off the last one
+        margin: calc(1lh - #{$_mw-leader-baseline-lift}) 0 0;
+      }
+    }
+  }
+}

package/src/scss/components/_pricing.scss

@@ -91,6 +91,10 @@
   }
 
   // Size. Only the token moves - see the `em` above.
+  .mw-price-xs {
+    --mw-price-size: #{font-size('lg')};
+  }
+
   .mw-price-sm {
     --mw-price-size: #{font-size('xl')};
   }

package/src/scss/layout/_grid.scss

@@ -159,6 +159,12 @@ $_column-steps-lg: (
     grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
   }
 
+  // Every row as tall as the tallest rather than as tall as its own contents.
+  // A modifier, not a grid of its own - it needs one of the above to size.
+  .mw-grid-even {
+    grid-auto-rows: 1fr;
+  }
+
   .mw-grid-lg {
     @extend %grid-base-lg;
   }

package/src/scss/layout/_main.scss

@@ -10,6 +10,22 @@
     flex-direction: column;
   }
 
+  // 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.
+  .mw-container-narrow {
+    width: 80%;
+    margin-inline: auto;
+
+    @include media-down('lg') {
+      width: 90%;
+    }
+
+    @include media-down('md') {
+      width: 100%;
+    }
+  }
+
   .mw-container {
     width: var(--mw-container-width);
     margin: spacing('0') auto;