Salt & Fire Meat Co.
A restaurant runs on thin margins and no spare time. Its website has to work the same way.
Salt & Fire Meat Co. is a smokehouse in the clubhouse at Oak Knoll Golf Course in Ashland, Oregon. Real wood smoke, sausage ground and stuffed in-house every week, and a chalkboard menu full of sandwiches named after people. The food was already doing its job. Online, the menu lived on those chalkboards and the hours lived on a Google listing.
The kitchen needed online ordering for pickup, a catering lane, weekly ready-to-eat meal pre-orders, and a way to promote live music and comedy on the deck. What it did not need was a monthly software bill or a site nobody on staff could touch. A restaurant has no web team. Whatever shipped had to survive being run by the owner between lunch and dinner service.
So the brief wrote itself. Keep it fast, keep it close to free to operate, point every button at the register, and make the things that change weekly a one-block edit or a phone tap.
No framework, on purpose
This site is plain HTML, CSS, and JavaScript. No build step, no dependencies, nothing to fall out of date. I build Next.js apps when the product calls for one. A seven-page restaurant site calls for files a browser can read as-is. Anyone who touches it later can open a page and see exactly what it does, and hosting is a static file server, which is to say, close to free.
One line wires the money
Every order button on the site, in the nav, the hero, the menu, the special board, reads a single ORDER_URL constant at the top of main.js. Set it once and all of them deep-link straight into Toast online ordering in one tap. The site never touches a card number. Toast owns checkout and the POS owns the menu of record. The website's whole job is getting a hungry person there fast.
The owner runs it from his phone
Shows on the deck come from a public Google Calendar embed. The owner adds a band on his phone and it appears on the site, no deploy. The Today's Special board fills itself in by day of week from one labeled block in main.js, and on days with no special it hides instead of sitting there empty. The home gallery shuffles a photo pool on every load, so the site feels tended even when nobody is tending it.
Never look broken
Restaurant photos arrive on restaurant time. Every food image carries an error fallback that swaps in the brand mark, so a missing shot reads as intentional instead of broken. Any dish opens full-size in a lightbox, and the lightbox knows to skip images currently showing the fallback. A prefers-reduced-motion query kills every animation in one rule. Small site, but the failure states got designed too.
The palette came off the building. Charcoal from the smoker, a burgundy matched to the restaurant wall, ember gold, and a warm cream page ground with a kraft-paper dot texture drawn in pure CSS, no image download. Three typefaces split the work the way real signage does.
Playfair Display carries the headings, Oswald does the BBQ-signage eyebrows and stamps, Karla handles body text. The kraft texture is two offset radial-gradient dot grids on the body element.
| Token | Value | Use |
|---|---|---|
| --charcoal | #1a1513 | Smoker black, header and footer |
| --burgundy | #6d1f2c | Matched to the restaurant wall |
| --ember | #c8892b | Flame gold, eyebrows and CTAs |
| --cream | #f7f1e7 | Kraft-paper page ground |
| --line | #e2d5c2 | Rules and card borders |
Restraint as a feature
This is a restaurant site, not a showreel. Motion stays at the hover level, cards lift, gallery photos ease in scale, buttons acknowledge the tap in 150 milliseconds. Nothing autoplays and nothing loops. The food photography does the selling and the interface stays out of its way.
The lightbox
Click any dish on the menu or in the gallery and it opens full-size over a dimmed page. Escape or a tap closes it. If a photo slot is showing the logo fallback, the lightbox skips it. Nobody needs a zoomed-in placeholder.
Reduced motion, honored completely
One media query drops every animation and transition to a millisecond and turns off smooth scroll for anyone who asked their device for less motion. It costs six lines and it is the difference between respecting a setting and decorating around it.
The menu, transcribed
The menu page is transcribed straight from the in-store chalkboards, named sandwiches and all. The Darcy, the L.F.G. Burger, the Ron White, which is tater salad. Prices include tax and fees, so the number on the board is the number you pay. When the chalkboard changes, one HTML block changes with it.
Three ways to get fed
The home page breaks the offer into three lanes, order online for pickup, catering for events and tournaments, and weekly ready-to-eat meals ordered and paid ahead for a set pickup time. Each lane gets its own page and its own Toast path, so the kitchen sees every order in the same POS it already runs on.
The Today's Special board
A board on the home page fills itself in by weekday, photo and price included, and hides on days with nothing to say. The week I wired it, the special running was The Dion. Smoked pork roast, hatch chiles, pepper jack, chipotle aioli. They named a sandwich after me. I consider it a five-star review.
Before this site, the menu was chalk on a wall and the hours were a Google listing. Everything below only existed if you walked in the door.
Chalkboards in the clubhouse
A transcribed menu page with photos and a lightbox
Walk up and wait
One tap from any page into Toast online ordering
No public calendar
A Google Calendar the owner updates from his phone
Live at salt-fire.com on a static host. No build step, no CMS, no subscriptions on the website side. Toast handles the money, the owner handles the specials, and the site keeps up.
Pages, one shared stylesheet
Wires every order button to Toast
From any page to a live order
Order lanes: pickup, catering, weekly meals
Feeds the owner edits himself: specials + events
Build steps, frameworks, or CMS fees
Design and build end to end. Page design, the CSS design system and kraft texture, the specials board, gallery shuffle, and photo-fallback logic in JavaScript, Toast and Google Calendar wiring, menu transcription from the chalkboards, image optimization, and the Vercel deploy.
Fortris.ai Marketing Site
Want something like this?
Start a conversation→