Ledger & Loaf — bookshop and café website template

What this template is for

A small shop with a counter, a programme of evenings, and hours that change on Sunday. The three things a visitor wants are the price list, what is on this week, and whether you are open — so those are the first three things on the page, in that order, above anything about the shop’s history.

It suits a café, a bakery, a bookshop, a bike workshop, a record shop: anywhere with a short list of prices and a handful of dated events.

The look, and why it holds up

The style is a 1970s annual report. Warm paper rather than white, oxblood rather than blue, and rules instead of shadows. Three decisions carry it:

• Squared corners everywhere. No border-radius, not once.
• No shadows. Depth comes from a hairline and a tinted panel, which is why the page still reads correctly when printed.
• Three weights of line — a hairline inside blocks, a 1px outline around cards, a 2px rule under every section heading.

Keep those and you can change everything else. Change --brand alone and the logo square, the section numbers, the links, the newsletter band and the 404 numeral all follow.

The dotted leader

The signature row is a label, a run of dots, and a figure — the way a menu or a balance sheet sets its numbers:

<ul class="leaders">
  <li><span>Filter coffee, Kenyan</span><span class="fill"></span><span class="figure">£3.10</span></li>
</ul>

The middle span stretches, so the figures stay in a column however long the labels get. The counter, the opening hours and the ticket tiers on the events page are all the same row.

No images at all

Nothing is loaded except the two fonts. Every photo slot is a striped box carrying a monospace label that names what belongs in it — book cover, loaf photo, map embed — 14 montrose st. That means the template looks finished before you have photographs, and it tells whoever fills it in what to shoot.

Swap in an <img> at the same box when the pictures arrive.

Events that read as a list, not a grid

The programme page puts one event per row: a bordered date chip, the title, one line of detail, and the price with what is left beside it. Anything longer sits in a native <details> — so the page opens short, and nothing needs JavaScript to expand.

Dark mode

Warm brown, not grey — a shop after closing, not a code editor. The switch writes data-theme on <html> and remembers the choice. It is the only JavaScript in the template, eighteen lines; delete it and the site stays in the light palette, which is a fine fallback rather than a broken one.

What you edit

Plain HTML. Open index.html and type. If you would rather keep the header and footer in one place, edit src/pages/ and run node build.mjs — twenty lines, no dependencies, no node_modules.