# Piquant Provisions · Small-Batch Hot Sauce

A Tabbied template, packaged as a plain HTML template. No build step, no
framework — open `index.html` in a browser and it runs.

```
index.html            the page
styles/base.css       global reset
styles/piquant-provisions.cssthis page's stylesheet — edit this one
images/               the photography this page uses
```

## The patterns are live, not images

The blocks of pattern are generated in the browser by
[css-doodle](https://css-doodle.com/) through
[tabbied](https://www.npmjs.com/package/tabbied). Each one is a plain `<div>`
that describes itself in `data-` attributes:

```html
<div data-pattern="karst" data-palette="transparent, #C9C8C1"
     data-fit="grid" data-redraw-interval="5200"></div>
```

Change `data-palette` to recolour it, `data-pattern` to swap the design
(254 to choose from — see https://tabbied.com), `data-seed` to pin a
particular arrangement, or drop `data-redraw-interval` to hold it still.
The script at the bottom of `index.html` is what brings them to life; remove
it and the patterns disappear.

## Fonts

The page links its webfonts from Google Fonts and Adobe Fonts. Self-host them
if you'd rather not depend on a CDN.

## Images

The photography is AI-generated and ships with this template.

## Credits

Patterns by [Tabbied](https://tabbied.com) (tabbied@0.4.0), MIT licensed.
