A fan site that opens albums up. Each album gets one or more small interactive “worlds” built from the album’s own story and imagery, and every song comes with what it’s about.
Live: https://gatefold.craigwickesser.com
Repo: mindscratch/gatefold (private). Pushing to main deploys the docs/ folder through GitHub Pages.
Only docs/ is public. Everything else in the repo, including these instructions, is never served.
Layout
docs/ The published site. Everything in here is public.
index.html Shelf homepage. The ALBUMS registry, COVERS art and ICONS live in its <script>.
<artist-slug>/<album-slug>/ One folder per album (lowercase, hyphenated)
index.html The album's first world
<world>.html Any additional worlds
CNAME Custom domain. Never edit or delete.
.nojekyll Serve files as-is.
AGENTS.md / CLAUDE.md / README.md Private. Not published.
.claude/skills/new-gatefold/ Private. Workflow for adding an album (/new-gatefold).
Never put notes, drafts or research files inside docs/.
Stack
Static site. No build step, no framework, no package.json.
Each page is one self-contained HTML file: inline CSS and JS, art drawn with canvas or inline SVG, no image files.
The only external requests allowed are Google Fonts, always with a real fallback stack. No other CDNs, analytics or trackers.
Preview locally: python3 -m http.server 8000 -d docs, then open http://localhost:8000.
Content rules (non-negotiable)
Never reproduce lyrics, not even one line. Describe what a song is about in our own words.
Never use real album art, band photos or logos. All art is drawn for this site, and covers are marked “FAN SLEEVE”.
Every song meaning carries exactly one source label:
Per the band: interviews, press releases, liner notes, stage banter that was reported.
Per reviews: critics and music writers.
Our read: our interpretation, used only where the band hasn’t explained the song.
Label honestly. Never present an “Our read” as the band’s own words.
Paraphrase sources. No quote longer than a few words. Link every source in the page footer.
Every album page footer says: “Fan-made. Not affiliated with or
Band names may appear in folder paths, never in the domain.
Tracklists, dates and quotes come from research, not memory. Confirm facts with at least two sources.
Design principles
Build each world from the album’s own world: how it was made, the band’s name, places and objects in the songs. Example: Buffalo Traffic Jam is named after bison blocking Yellowstone roads, so one world is a traffic jam. Their album grew out of sorting family photos for a funeral, so the other is a darkroom.
One clear interaction reveals each song: tap a thing, the meaning appears. Keep a readable log of everything revealed so far.
In-world details must make sense to someone who knows nothing about the domain. Lesson learned: darkroom “Dev / Stop / Fix” labels confused people, so they became “Developing… / Fixing… / Hung to dry”.
Give each world its own palette and type. Avoid templated looks: cream with serif and terracotta, purple gradients, emoji as icons, Inter as the default face.
The opening state is already meaningful before any interaction.
Respect prefers-reduced-motion. Work at 390px wide with no horizontal scroll. Keep keyboard focus visible.
Copy is plain and direct: active voice, short sentences, no em-dash asides, no “not X, but Y” constructions.
Page conventions
First element inside <main> on every album page: <a class="back" href="../../">← Gatefold</a>.
Worlds for the same album link to each other in their footers.
Song data inside a world page:
{id,n/* track number */oryear/* non-album single */,title,src:"band"|"reviews"|"read",text}
Adding an album
Use /new-gatefold <Artist> — <Album>. The steps it follows:
Research the tracklist, song meanings with sources, and the album’s story.
Pitch world concepts and wait for a pick.
Build the pages in docs/<artist-slug>/<album-slug>/.
Register the album in docs/index.html: add an ALBUMS entry (next catalog number GF 00N, spine colors from the album’s palette), an original COVERS drawing, and an ICONS entry for any new world icon.
Check everything, then add a row to the table below.
Check before pushing
Serve locally and open every changed page at 390px and at desktop width.
No console errors and no horizontal scroll.
Links work in both directions: homepage → world → back to the shelf, and world ↔ world.