maverick-wave 5.22.0 → 5.23.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "maverick-wave",
-  "version": "5.22.0",
+  "version": "5.23.0",
   "config": {
-    "version_short": "5.22"
+    "version_short": "5.23"
   },
   "description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
   "main": "src/js/main.js",

package/src/partials/contact-container.html

@@ -0,0 +1,85 @@
+<h3 class="mw-section-subtitle">Contact</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  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
+  keeps the values under each other. The hours are a <code>&lt;dl&gt;</code> of
+  <code>mw-leader-row</code>, because a day and its times with a line between
+  them is the row that component already is.
+</p>
+
+<div class="mw-grid-auto-md">
+  <article class="mw-card">
+    <div class="mw-card-body">
+      <h4 class="mw-card-title">
+        <span class="mw-card-title-icon">
+          <i class="fas fa-clock" aria-hidden="true"></i>
+        </span>
+        Opening hours
+      </h4>
+      <hr class="mw-card-title-divider" />
+
+      <dl class="mw-item-list">
+        <div class="mw-leader-row">
+          <dt class="mw-leader-row-label">Monday to Friday</dt>
+          <dd class="mw-leader-row-value">11.30 - 14.00</dd>
+          <dd class="mw-leader-row-value">17.00 - 23.00</dd>
+        </div>
+        <div class="mw-leader-row">
+          <dt class="mw-leader-row-label">Saturday</dt>
+          <dd class="mw-leader-row-value">17.00 - 23.00</dd>
+        </div>
+        <div class="mw-leader-row">
+          <dt class="mw-leader-row-label">Sunday</dt>
+          <dd class="mw-leader-row-value">11.30 - 20.00</dd>
+        </div>
+      </dl>
+
+      <p class="mw-text-sm mw-text-muted mw-mt-6 mw-mb-0">
+        Hot food all day on Sunday. Otherwise the kitchen closes an hour before
+        the house does.
+      </p>
+    </div>
+  </article>
+
+  <article class="mw-card mw-card-addon-secondary">
+    <div class="mw-card-body">
+      <h4 class="mw-card-title">
+        <span class="mw-card-title-icon">
+          <i class="fas fa-location-dot" aria-hidden="true"></i>
+        </span>
+        How to reach us
+      </h4>
+      <hr class="mw-card-title-divider" />
+
+      <address class="mw-contact mw-mb-6">
+        <p class="mw-text-bold">Gasthaus Lamm</p>
+        <p>
+          Marktplatz 3<br />
+          72622 Musterhausen
+        </p>
+        <p class="mw-contact-row">
+          <span class="mw-contact-label">Phone</span>
+          <a class="mw-link" href="tel:+497123456789">07123 456789</a>
+        </p>
+        <p class="mw-contact-row">
+          <span class="mw-contact-label">Email</span>
+          <a class="mw-link" href="mailto:info@gasthaus-lamm.de"
+            >info@gasthaus-lamm.de</a
+          >
+        </p>
+      </address>
+
+      <div class="mw-button-bar mw-button-bar-left">
+        <a class="mw-btn mw-btn-primary" href="tel:+497123456789">
+          <i class="fas fa-phone" aria-hidden="true"></i>
+          Call us
+        </a>
+        <a class="mw-btn mw-btn-outline" href="mailto:info@gasthaus-lamm.de">
+          <i class="fas fa-envelope" aria-hidden="true"></i>
+          Write us
+        </a>
+      </div>
+    </div>
+  </article>
+</div>

package/src/partials/documentation-container.html

@@ -59,6 +59,7 @@
       </li>
       <li>
         <a href="#item-lists">Item Lists</a>
+        <a href="#leader-row">Leader Row</a>
       </li>
       <li>
         <a href="#stepper">Stepper</a>
@@ -164,6 +165,8 @@
       </li>
       <li>
         <a href="#calendar">Calendar</a>
+        <a href="#lunch-menu">Lunch Menu</a>
+        <a href="#contact">Contact</a>
       </li>
       <li>
         <a href="#pagination">Pagination</a>

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

@@ -0,0 +1,139 @@
+<h3 class="mw-section-subtitle">Leader row</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  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">
+  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
+  element over the plain <code>&lt;p&gt;</code>. Put
+  <code>mw-leader-row</code> on that <code>&lt;div&gt;</code> and the two
+  classes on the <code>&lt;dt&gt;</code> and <code>&lt;dd&gt;</code>. Use it
+  where the pair <em>is</em> the content; where every row also carries a
+  description, a <code>&lt;p&gt;</code> stays simpler.
+</p>
+
+<div class="mw-grid-2 mw-gap-6">
+  <div>
+    <h3 class="mw-card-title mw-mb-4">On a menu</h3>
+    <div class="mw-card mw-card-simple">
+      <div class="mw-item-list">
+        <div>
+          <p class="mw-leader-row">
+            <span class="mw-leader-row-label mw-text-bold">Flatbread soup</span>
+            <span class="mw-leader-row-value mw-text-bold mw-text-primary"
+              >5.80</span
+            >
+          </p>
+          <p class="mw-text-sm mw-text-muted mw-mb-0">
+            Beef broth with pancake strips and chives
+          </p>
+        </div>
+        <div>
+          <p class="mw-leader-row">
+            <span class="mw-leader-row-label mw-text-bold"
+              >Roast pork with dumpling and red cabbage</span
+            >
+            <span class="mw-leader-row-value mw-text-bold mw-text-primary"
+              >17.50</span
+            >
+          </p>
+          <p class="mw-text-sm mw-text-muted mw-mb-0">
+            A long label wraps and the leader stays beside its last line
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <h3 class="mw-card-title mw-mb-4 mw-mt-6">Value on the first line</h3>
+    <div class="mw-card mw-card-simple">
+      <p class="mw-text-muted mw-text-sm mw-mb-5">
+        <code>mw-leader-row-top</code> keeps the value beside the
+        <em>first</em> line of a wrapping label instead of the last. On a menu
+        that is where the price belongs - next to the dish, not somewhere down
+        in its description.
+      </p>
+      <p class="mw-leader-row mw-leader-row-top">
+        <span class="mw-leader-row-label mw-text-bold"
+          >Roast pork with dumpling and red cabbage</span
+        >
+        <span class="mw-leader-row-value mw-text-bold mw-text-primary"
+          >17.50</span
+        >
+      </p>
+    </div>
+
+    <h3 class="mw-card-title mw-mb-4 mw-mt-6">Semantic markup</h3>
+    <div class="mw-card mw-card-simple">
+      <p class="mw-text-muted mw-text-sm mw-mb-5">
+        The same row as a <code>&lt;dl&gt;</code>: the group
+        <code>&lt;div&gt;</code> carries <code>mw-leader-row</code>, the
+        <code>&lt;dt&gt;</code> and <code>&lt;dd&gt;</code> carry the other two
+        classes. No extra element over the <code>&lt;p&gt;</code> version.
+      </p>
+      <dl class="mw-item-list">
+        <div class="mw-leader-row">
+          <dt class="mw-leader-row-label">Potato soup with marjoram</dt>
+          <dd class="mw-leader-row-value">4.90</dd>
+        </div>
+        <div class="mw-leader-row">
+          <dt class="mw-leader-row-label">Mixed leaf salad</dt>
+          <dd class="mw-leader-row-value">3.80</dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="mw-card-title mw-mb-4">Line styles</h3>
+    <div class="mw-card mw-card-simple mw-grid-1 mw-gap-6">
+      <div>
+        <h4 class="mw-text-medium mw-mb-2">Dotted (default)</h4>
+        <p class="mw-leader-row">
+          <span class="mw-leader-row-label">Introduction</span>
+          <span class="mw-leader-row-value">7</span>
+        </p>
+      </div>
+      <div>
+        <h4 class="mw-text-medium mw-mb-2">Dashed</h4>
+        <p class="mw-leader-row mw-leader-row-dashed">
+          <span class="mw-leader-row-label">Second movement</span>
+          <span class="mw-leader-row-value">24</span>
+        </p>
+      </div>
+      <div>
+        <h4 class="mw-text-medium mw-mb-2">Solid</h4>
+        <p class="mw-leader-row mw-leader-row-solid">
+          <span class="mw-leader-row-label">Appendix</span>
+          <span class="mw-leader-row-value">128</span>
+        </p>
+      </div>
+      <div>
+        <h4 class="mw-text-medium mw-mb-2">Retuned per row</h4>
+        <p
+          class="mw-leader-row"
+          style="--mw-leader-row-color: var(--mw-primary-color)"
+        >
+          <span class="mw-leader-row-label">Total</span>
+          <span class="mw-leader-row-value mw-text-bold">1 284.00</span>
+        </p>
+      </div>
+    </div>
+
+    <h3 class="mw-card-title mw-mb-4 mw-mt-6">Two values</h3>
+    <div class="mw-card mw-card-simple">
+      <p class="mw-text-muted mw-text-sm mw-mb-5">
+        A second <code>mw-leader-row-value</code> needs no extra class - both
+        sit after the leader, and a mark in the leader's colour goes between
+        them so the pair does not read as one long range.
+      </p>
+      <p class="mw-leader-row">
+        <span class="mw-leader-row-label">Wiener schnitzel with fries</span>
+        <span class="mw-leader-row-value mw-text-muted">11.50</span>
+        <span class="mw-leader-row-value mw-text-bold">15.90</span>
+      </p>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,341 @@
+<h3 class="mw-section-subtitle">Lunch menu</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  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
+  would squeeze a dish name into a fifth of the page, and a wrapping grid would
+  orphan the fifth card into a row of its own. <code>mw-grid-even</code> gives
+  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">
+  <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
+  list is - the same markup becomes the column on the left. Because the width it
+  switches at is the card's, a stamp behaves the same whichever grid it is
+  dropped into. <code>mw-date-stamp-today</code> fills that column instead of
+  recolouring it: the price is already primary, and two blues compete where one
+  would point.
+</p>
+
+<div class="mw-container-narrow">
+  <div class="mw-grid-1 mw-grid-even">
+    <article class="mw-card mw-offer">
+      <div class="mw-card-body">
+        <p class="mw-date-stamp">
+          <span class="mw-date-stamp-day">Mon</span>
+          <span class="mw-date-stamp-date">14.09.</span>
+        </p>
+        <div class="mw-date-stamp-body">
+          <h4 class="mw-text-base mw-text-bold mw-mb-2">
+            Lentils with spaetzle
+          </h4>
+          <p class="mw-text-sm mw-text-muted mw-mb-0">
+            Two sausages, a splash of vinegar, and bread on the side.
+          </p>
+        </div>
+        <p class="mw-price mw-price-xs">
+          <span class="mw-price-amount">10.90</span>
+          <span class="mw-price-currency">Euro</span>
+        </p>
+      </div>
+    </article>
+
+    <article class="mw-card mw-offer">
+      <div class="mw-card-body">
+        <p class="mw-date-stamp">
+          <span class="mw-date-stamp-day">Tue</span>
+          <span class="mw-date-stamp-date">15.09.</span>
+        </p>
+        <div class="mw-date-stamp-body">
+          <h4 class="mw-text-base mw-text-bold mw-mb-2">Roast pork</h4>
+          <p class="mw-text-sm mw-text-muted mw-mb-0">
+            Bread dumpling, red cabbage and a dark gravy.
+          </p>
+        </div>
+        <p class="mw-price mw-price-xs">
+          <span class="mw-price-amount">11.90</span>
+          <span class="mw-price-currency">Euro</span>
+        </p>
+      </div>
+    </article>
+
+    <article class="mw-card mw-offer">
+      <div class="mw-card-body">
+        <p class="mw-date-stamp">
+          <span class="mw-date-stamp-day">Wed</span>
+          <span class="mw-date-stamp-date">16.09.</span>
+        </p>
+        <div class="mw-date-stamp-body">
+          <h4 class="mw-text-base mw-text-bold mw-mb-2">Cheese spaetzle</h4>
+          <p class="mw-text-sm mw-text-muted mw-mb-0">
+            Hand-scraped, mountain cheese, roasted onions, leaf salad.
+          </p>
+          <p class="mw-tags">
+            <span class="mw-tag mw-tag-success">veggie</span>
+          </p>
+        </div>
+        <p class="mw-price mw-price-xs">
+          <span class="mw-price-amount">10.50</span>
+          <span class="mw-price-currency">Euro</span>
+        </p>
+      </div>
+    </article>
+
+    <article class="mw-card mw-offer">
+      <div class="mw-card-body">
+        <p class="mw-date-stamp">
+          <span class="mw-date-stamp-day">Thu</span>
+          <span class="mw-date-stamp-date">17.09.</span>
+        </p>
+        <div class="mw-date-stamp-body">
+          <h4 class="mw-text-base mw-text-bold mw-mb-2">
+            Schnitzel in cream sauce
+          </h4>
+          <p class="mw-text-sm mw-text-muted mw-mb-0">
+            Pork, with spaetzle and a small salad.
+          </p>
+        </div>
+        <p class="mw-price mw-price-xs">
+          <span class="mw-price-amount">12.90</span>
+          <span class="mw-price-currency">Euro</span>
+        </p>
+      </div>
+    </article>
+
+    <article class="mw-card mw-offer">
+      <div class="mw-card-body">
+        <p class="mw-date-stamp mw-date-stamp-today">
+          <span class="mw-sr-only">Today,</span>
+          <span class="mw-date-stamp-day">Fri</span>
+          <span class="mw-date-stamp-date">18.09.</span>
+        </p>
+        <div class="mw-date-stamp-body">
+          <h4 class="mw-text-base mw-text-bold mw-mb-2">Baked fish fillet</h4>
+          <p class="mw-text-sm mw-text-muted mw-mb-0">
+            In beer batter, with warm potato salad and remoulade.
+          </p>
+        </div>
+        <p class="mw-price mw-price-xs">
+          <span class="mw-price-amount">11.90</span>
+          <span class="mw-price-currency">Euro</span>
+        </p>
+      </div>
+    </article>
+  </div>
+</div>
+
+<h3 class="mw-card-title mw-mb-4 mw-mt-10">Two dishes a day</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  The day is the card, so a second dish is another row inside it rather than a
+  second card. With a price per dish there is nothing left for a price column to
+  hold, so it goes instead where a printed menu puts it - on a
+  <code>mw-leader-row</code>, at the end of the line it prices. The stamp does
+  not change at all: it still centres against whatever the card holds beside it,
+  two rows or ten.
+</p>
+
+<div class="mw-container-narrow">
+  <div class="mw-grid-1 mw-grid-even">
+    <article class="mw-card">
+      <div class="mw-card-body">
+        <p class="mw-date-stamp">
+          <span class="mw-date-stamp-day">Mon</span>
+          <span class="mw-date-stamp-date">14.09.</span>
+        </p>
+        <div class="mw-date-stamp-body">
+          <div class="mw-item-list">
+            <div>
+              <p class="mw-leader-row mw-leader-row-top">
+                <span class="mw-leader-row-label mw-text-bold">
+                  Lentils with spaetzle
+                </span>
+                <span class="mw-leader-row-value mw-text-bold mw-text-primary">
+                  10.90 &euro;
+                </span>
+              </p>
+              <p class="mw-text-sm mw-text-muted mw-mb-0">
+                Two sausages and a splash of vinegar.
+              </p>
+            </div>
+            <div>
+              <p class="mw-leader-row mw-leader-row-top">
+                <span class="mw-leader-row-label mw-text-bold">
+                  Potato soup with marjoram
+                  <span class="mw-tag mw-tag-success">veggie</span>
+                </span>
+                <span class="mw-leader-row-value mw-text-bold mw-text-primary">
+                  6.50 &euro;
+                </span>
+              </p>
+              <p class="mw-text-sm mw-text-muted mw-mb-0">
+                With a slice of farmhouse bread.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+    <article class="mw-card">
+      <div class="mw-card-body">
+        <p class="mw-date-stamp">
+          <span class="mw-date-stamp-day">Tue</span>
+          <span class="mw-date-stamp-date">15.09.</span>
+        </p>
+        <div class="mw-date-stamp-body">
+          <div class="mw-item-list">
+            <div>
+              <p class="mw-leader-row mw-leader-row-top">
+                <span class="mw-leader-row-label mw-text-bold">
+                  Roast pork
+                </span>
+                <span class="mw-leader-row-value mw-text-bold mw-text-primary">
+                  11.90 &euro;
+                </span>
+              </p>
+              <p class="mw-text-sm mw-text-muted mw-mb-0">
+                Bread dumpling, red cabbage, dark gravy.
+              </p>
+            </div>
+            <div>
+              <p class="mw-leader-row mw-leader-row-top">
+                <span class="mw-leader-row-label mw-text-bold">
+                  Cheese spaetzle
+                  <span class="mw-tag mw-tag-success">veggie</span>
+                </span>
+                <span class="mw-leader-row-value mw-text-bold mw-text-primary">
+                  10.50 &euro;
+                </span>
+              </p>
+              <p class="mw-text-sm mw-text-muted mw-mb-0">
+                Mountain cheese, roasted onions, leaf salad.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+    <article class="mw-card">
+      <div class="mw-card-body">
+        <p class="mw-date-stamp">
+          <span class="mw-date-stamp-day">Wed</span>
+          <span class="mw-date-stamp-date">16.09.</span>
+        </p>
+        <div class="mw-date-stamp-body">
+          <div class="mw-item-list">
+            <div>
+              <p class="mw-leader-row mw-leader-row-top">
+                <span class="mw-leader-row-label mw-text-bold">
+                  Barley stew
+                  <span class="mw-tag mw-tag-success">veggie</span>
+                </span>
+                <span class="mw-leader-row-value mw-text-bold mw-text-primary">
+                  9.50 &euro;
+                </span>
+              </p>
+              <p class="mw-text-sm mw-text-muted mw-mb-0">
+                Root vegetables, simmered since morning.
+              </p>
+            </div>
+            <div>
+              <p class="mw-leader-row mw-leader-row-top">
+                <span class="mw-leader-row-label mw-text-bold">
+                  Beef roulade
+                </span>
+                <span class="mw-leader-row-value mw-text-bold mw-text-primary">
+                  13.50 &euro;
+                </span>
+              </p>
+              <p class="mw-text-sm mw-text-muted mw-mb-0">
+                Mashed potato and green beans.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+    <article class="mw-card">
+      <div class="mw-card-body">
+        <p class="mw-date-stamp">
+          <span class="mw-date-stamp-day">Thu</span>
+          <span class="mw-date-stamp-date">17.09.</span>
+        </p>
+        <div class="mw-date-stamp-body">
+          <div class="mw-item-list">
+            <div>
+              <p class="mw-leader-row mw-leader-row-top">
+                <span class="mw-leader-row-label mw-text-bold">
+                  Schnitzel in cream sauce
+                </span>
+                <span class="mw-leader-row-value mw-text-bold mw-text-primary">
+                  12.90 &euro;
+                </span>
+              </p>
+              <p class="mw-text-sm mw-text-muted mw-mb-0">
+                Pork, with spaetzle and a small salad.
+              </p>
+            </div>
+            <div>
+              <p class="mw-leader-row mw-leader-row-top">
+                <span class="mw-leader-row-label mw-text-bold">
+                  Mushroom ragout
+                  <span class="mw-tag mw-tag-success">veggie</span>
+                </span>
+                <span class="mw-leader-row-value mw-text-bold mw-text-primary">
+                  10.90 &euro;
+                </span>
+              </p>
+              <p class="mw-text-sm mw-text-muted mw-mb-0">
+                With a bread dumpling.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+    <article class="mw-card">
+      <div class="mw-card-body">
+        <p class="mw-date-stamp mw-date-stamp-today">
+          <span class="mw-sr-only">Today,</span>
+          <span class="mw-date-stamp-day">Fri</span>
+          <span class="mw-date-stamp-date">18.09.</span>
+        </p>
+        <div class="mw-date-stamp-body">
+          <div class="mw-item-list">
+            <div>
+              <p class="mw-leader-row mw-leader-row-top">
+                <span class="mw-leader-row-label mw-text-bold">
+                  Baked fish fillet
+                </span>
+                <span class="mw-leader-row-value mw-text-bold mw-text-primary">
+                  11.90 &euro;
+                </span>
+              </p>
+              <p class="mw-text-sm mw-text-muted mw-mb-0">
+                Beer batter, warm potato salad, remoulade.
+              </p>
+            </div>
+            <div>
+              <p class="mw-leader-row mw-leader-row-top">
+                <span class="mw-leader-row-label mw-text-bold">
+                  Pancake soup
+                </span>
+                <span class="mw-leader-row-value mw-text-bold mw-text-primary">
+                  5.80 &euro;
+                </span>
+              </p>
+              <p class="mw-text-sm mw-text-muted mw-mb-0">
+                Beef broth with chives.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+  </div>
+</div>
+
+<p class="mw-text-muted mw-text-sm mw-mt-6">
+  The menu changes every week. No reservation, while the pot lasts.
+</p>

package/src/scss/abstracts/_functions.scss

@@ -23,17 +23,48 @@
 // Only the slope is in vw: a size in vw alone ignores the reader's font size and
 // stops responding to zoom, the rem term is what keeps that alive.
 @function fluid($min, $max, $from: 'xs', $to: 'md') {
-  $min-rem: _to-rem($min, 'min');
-  $max-rem: _to-rem($max, 'max');
-  $vw-from: math.div(map.get(v.$breakpoints, $from), 16px);
-  $vw-to: math.div(map.get(v.$breakpoints, $to), 16px);
+  @return _ramp(
+    _to-rem($min, 'min'),
+    _to-rem($max, 'max'),
+    math.div(map.get(v.$breakpoints, $from), 16px),
+    math.div(map.get(v.$breakpoints, $to), 16px),
+    vw
+  );
+}
+
+// The same ramp against the container instead of the viewport. For anything
+// inside a `@container` block: sizing there off vw means a 440px card on a
+// 1400px screen takes the width a 900px card was measured for, which is the
+// mismatch container queries exist to remove. The endpoints are container
+// widths rather than breakpoint names, because a container has no breakpoints.
+@function fluid-container($min, $max, $from, $to) {
+  $from-rem: _to-rem($from, 'from');
+  $to-rem: _to-rem($to, 'to');
+
+  @if $from-rem == $to-rem {
+    @error "fluid-container(): $from and $to must differ, both are #{$from}.";
+  }
+
+  @return _ramp(
+    _to-rem($min, 'min'),
+    _to-rem($max, 'max'),
+    $from-rem,
+    $to-rem,
+    cqi
+  );
+}
 
-  $slope: math.div($max-rem - $min-rem, $vw-to - $vw-from);
-  $intercept: $min-rem - $slope * $vw-from;
+// Both of the above draw the same line through (from, min) and (to, max) and
+// disagree only on what measures the axis. Shared so a change to the rem term -
+// the part that keeps the size responding to zoom - cannot reach one and miss
+// the other.
+@function _ramp($min-rem, $max-rem, $from-rem, $to-rem, $unit) {
+  $slope: math.div($max-rem - $min-rem, $to-rem - $from-rem);
+  $intercept: $min-rem - $slope * $from-rem;
 
   @return clamp(
     #{$min-rem}rem,
-    #{_round4($intercept)}rem + #{_round4($slope * 100)}vw,
+    #{_round4($intercept)}rem + #{_round4($slope * 100)}#{$unit},
     #{$max-rem}rem
   );
 }