maverick-wave 5.21.0 → 5.23.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "maverick-wave",
-  "version": "5.21.0",
+  "version": "5.23.0",
   "config": {
-    "version_short": "5.21"
+    "version_short": "5.23"
   },
   "description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
   "main": "src/js/main.js",
@@ -15,6 +15,7 @@
     "start": "gulp",
     "build": "gulp clean && gulp build",
     "verify": "node scripts/verify.js",
+    "verify:release": "node scripts/verify.js --release",
     "prepack": "gulp release"
   },
   "repository": {

package/release.sh

@@ -11,6 +11,12 @@ echo "## point the README CDN snippets at this version"
 sed -i '' -E "s|maverick-wave@[0-9]+\.[0-9]+\.[0-9]+|maverick-wave@${VERSION}|g" README.md
 echo "## make a new release"
 npm run build && npm run prepack
+echo "## verify the release state - bundles and CDN pin, which only exist here"
+if ! npm run verify:release; then
+  echo "## verify failed - nothing pushed, nothing published"
+  git checkout main
+  exit 1
+fi
 echo "## add all changes and push it"
 git add --all
 git commit -m "release: ${VERSION}"

package/scripts/verify.js

@@ -6,14 +6,20 @@
  *   1. every var(--mw-*) has a definition
  *   2. every --mw-* definition is used somewhere
  *   3. every mw-* class in the markup exists in the built CSS
- *   4. the committed root release files match a fresh build
- *   5. the CDN version pinned in the docs matches package.json
+ *   4. the committed root release files match a fresh build   (--release)
+ *   5. the CDN version pinned in the docs matches package.json (--release)
  *   6. no `animation:` shorthand in a file that uses a scroll timeline
  *
+ * 4 and 5 describe the release state, which release.sh produces on the release
+ * branch - on main they are stale by construction and would fail every CI run.
+ * They run under `--release`, which release.sh calls after prepack.
+ *
  * Sources are scanned rather than hard-coded so a new partial is covered
  * automatically. Exits 1 on any error; warnings never fail the build.
  */
 
+const RELEASE = process.argv.includes('--release');
+
 const fs = require('fs');
 const path = require('path');
 
@@ -133,9 +139,11 @@ for (const [c, where] of [...classesInMarkup].sort()) {
 // --- 4: root release files -------------------------------------------------
 // These are committed and consumed via jsDelivr and the GitHub release page.
 // 4.22.0 shipped without them after `gulp clean` deleted them and the deletion
-// got committed - this check makes CI fail instead.
+// got committed - this check stops the release instead.
 
-for (const f of ['maverick-wave.min.css', 'maverick-wave.min.js']) {
+for (const f of RELEASE
+  ? ['maverick-wave.min.css', 'maverick-wave.min.js']
+  : []) {
   const p = path.join(ROOT, f);
   if (!fs.existsSync(p) || fs.statSync(p).size === 0) {
     errors.push(
@@ -166,7 +174,10 @@ for (const f of ['maverick-wave.min.css', 'maverick-wave.min.js']) {
 const { version } = require(path.join(ROOT, 'package.json'));
 const EXACT_PIN = /maverick-wave@([0-9]+\.[0-9]+\.[0-9]+)/g;
 
-const readme = read(path.join(ROOT, 'README.md'));
+// Only the README half is release state - release.sh rewrites that pin. The
+// skills are installed outside this repo, never get the rewrite, and carry a
+// major range, so an exact pin there is wrong on every branch.
+const readme = RELEASE ? read(path.join(ROOT, 'README.md')) : null;
 if (readme) {
   for (const v of new Set(
     all(readme, EXACT_PIN).filter((v) => v !== version)

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>