A diner menu that survives the QR scan, plus a table card from a print stylesheet

A demo diner site where the mobile menu is the product — and the 4×6 QR table card is just a page of the site with a print stylesheet, no designer required.

Maple & Main is a demo build — a fictional classic diner in Ann Arbor. The starting observation: most restaurant QR codes open a PDF designed for paper, which is the worst possible thing to read on a phone. So the menu page is the product here — 24 items across six categories, high contrast, sticky category navigation, weekly specials — all typed data rendered mobile-first.

Stack: React 19, TypeScript, Vite, Tailwind CSS v4, static deploy on a Cloudflare Worker.

The table card is a web page

The piece I enjoyed most: the printable QR table card isn't a separate design file. It's a route on the site with a print stylesheet that reshapes it into a 4×6 card — the owner opens the page, hits print, and gets table cards.

1@media print {2  @page {3    size: in in;4    margin: 0;5  }6  .no-print {7    display: none !important;8  }9  .print-card {10    width: in !important;11    height: in !important;12    margin: 0 auto !important;13    padding: 0.in !important;14    border: px double #000000 !important;15    page-break-inside: avoid;16    display: flex !important;17    flex-direction: column !important;18    justify-content: space-between !important;19    /* … */20  }21}

@page { size: 4in 6in } does the heavy lifting — the browser's print dialog treats the card as its own paper size instead of centering it on Letter. Everything that isn't the card gets .no-print.

Design that matches the business

The rest of the site keeps the diner register: Playfair Display for the wordmark, a maple-amber accent, cream background. Data — hours, phone, address, menu, specials — is all in one data.ts, so a menu price change is one edit.

What I'd improve

• Menu data in a TS file means the owner needs me (or Git) for edits; a tiny CMS or sheet-backed source would fit this client type better.
• The QR on the card points at the deployed demo; a real deployment would generate it per-table for scan analytics.

One of eight small-business demos on this site. Projects · Get a quote