Sapora

What it is

A complete restaurant site, on a single page: hero, intro, a filterable menu of eight dishes, cooking method, atmosphere, customer reviews in a marquee, two addresses, a social marquee and a footer. One HTML file, one stylesheet.

The design follows that of a commercial template, of which only the photos have been kept. All the code has been rewritten: the original came to 175 kB of minified CSS, jQuery, three bundles from the editor, a proprietary animation engine and an e-commerce basket that calls a non-existent API as soon as you leave the tool. Unreadable, and therefore useless for learning from.

That's the whole point: this template isn't here to be admired, it's here to be read, broken and rebuilt.

What you change first

The colours — seven lines

Right at the top of assets/css/style.css:

--noir:         #0c0407;  /* text, solid buttons, footer */
--fond:         #f0f0f0;  /* soft buttons, tabs */
--fond-doux:    #f7f7f7;  /* review and method cards */
--accent:       #c0421f;  /* hovers, links, focus */
--accent-fonce: #93300f;  /* the same, one notch darker */
--accent-clair: #f0906b;  /* the same, lightened for text over photos */
--etoile:       #ffa600;  /* the ratings */

One thing to grasp before touching anything else: there are three terracottas, not one. The solid accent passes AA contrast on white (5.20:1) and on the grey background (4.56:1), but it would vanish over a dark photo — that's what the lightened version is for (8.60:1 on black). The dark one is for hovers (7.86:1). If you change the accent, change all three: the template's test bench recomputes the seven ratios for you.

The name

Search for “Sapora” in index.html. No CSS class carries the brand name: a find-and-replace can't break anything. The logo is simply a word in the template's own font, so it follows by itself.

The menu

Each dish carries its services in an attribute: <li class="plat" data-cours="signature soir">. Adding a tab means one <input type="radio">, un <label> and one line in the selector list in part 7 of the stylesheet.

The sizes

The type scale is declared once, then redeclared at every breakpoint. So a heading never gets its own media query: you change --titre-1 and the whole page follows.

The fourteen effects, and how they're built

All taken from the data of the original's animation engine — 161 events and 38 action lists, pulled out of the JavaScript store then measured in the browser, not by eye. The editor creates one event per collection item: after deduplication there remain fourteen distinct effects, eleven of which are reproduced here.

What you should know

• No external requests. 41 requests on load, 45 after scrolling all the way down, all of them local. The original loaded jQuery and three bundles from two domains.
• Scroll reveals can't hide the content. The hidden state only exists once the JavaScript has run. Checked by removing the <script>: 25 headings out of 25 stay visible, no block is hidden, all eight dish cards open. The original, meanwhile, set style="opacity:0" on every animated block.
• Zero inline styles, zero inline scripts. The reveal order goes through a data-reveal-rang attribute and attribute selectors, precisely because a style="" would be blocked by the site's strict security policy.
• The trigger sits 15% up from the bottom of the screen, not at the first pixel as in the original: a block visibly enters instead of having finished before it was seen. The threshold is measured against the screen and not against the element — otherwise a block taller than the screen would stay invisible for ever.
• The active menu tab is marked. In the original all six tabs looked the same: you couldn't tell which one you were looking at. Here it inverts to black.
• Accessibility: skip link, menu states announced, filter result announced through role="status", row copies marked aria-hidden et inert, a single visible focus style, animations switched off if the system asks — delays included.
• Responsive checked at 390, 1440 and 2560 px, on load and after scrolling all the way down, with no horizontal overflow. The page is 7,220 px tall against 7,305 px for the original, a difference of 1.2%.

What isn't perfect

Better said here than left for you to find out.