The Deck

Summary

A navigation prototype rather than a home page: what if DEPO never reloaded? The header is fixed and never changes. Everything between the header and the bottom of the screen is a slide — a whole page (Home, With your eyes, Connect, Locals, Depo Magazine, Awards, Blog, Contact us, and a "Not found") built from a <template> in the same file. Opening another menu page keeps the current slide in memory, moves it out to the left and slides the new one in from the right. Opening a page that was already opened glides the deck back to it, with its scroll position, form text and filters kept. A small pill at the bottom lists the opened pages. The address changes to ?p=<page> and the browser's Back / Forward buttons replay the moves. Its improved successor with real paths and server-side pages is demo19.

Prompt

The brief this page was built from.

Build a navigation prototype for the DEPO site in the demo5 (home3) look: what if the site never
reloaded?

- The header is fixed and never changes. Everything between the header and the bottom of the
  screen is a slide — a whole page (Home, With your eyes, Connect, Locals, Depo Magazine,
  Awards, Blog, Contact us, Not found) built from a <template> in the same file.
- Opening a menu page keeps the current slide in memory, moves it out to the left and slides the
  new one in from the right; opening a page already open glides the deck back to it with its
  scroll position, form text and filters kept. A small pill at the bottom lists the opened
  pages.
- The address changes to ?p=<page>; Back / Forward replay the moves.
- Schibsted Grotesk, the home3 palette, vanilla JS, reduced motion respected.

Look

• Type: Schibsted Grotesk 400/500/700/900 for everything: 900 for the hero and page headings, 500 for the menu and the deck pill.
• Palette: the home3 (demo5) look — ground #e8ebe4, paper #f4f6f1, ink #121612, soft ink #4a524b, deep green #0f2a1a (header, deep page heads, deck pill), green #2f7d43 (focus, links), brand yellow #ffb500 (Join button, active menu underline, current page in the pill).
• Layout: a fixed deep green header (DEPO eye logo, "We are in beta", the menu, Log in, Join DEPO; a burger below 960 px). Below it the deck: a full-screen viewport that clips a horizontal track of slides, one per opened page, each slide its own vertical scroller. Pages: Home (hero "Put your work on the cover" with a DEPO cover, this season's covers, roles), With your eyes (a filterable grid), Connect (open calls from the magazines), Locals, Depo Magazine (feature plus a sideways shelf of back issues), Awards (winners), Blog (a lead post plus a list), Contact us (a form that answers "Sent (demo)") and a not-found page. The footer closes every slide. The pill of opened pages floats bottom centre.
• Motion: the track moves with a CSS transform transition (650 ms, cubic-bezier(.76,0,.18,1)); slides out of view step back (opacity: .35; scale: .94; filter: saturate(.4)), so the move reads as one deck sliding under the header. The first time a page arrives its heading rises in. Menu underline grows on hover. history.pushState / popstate keep the address and the deck in step. Reduced motion: no transitions.

Built with

Borrowed

• The look (palette, Schibsted Grotesk, deep green fields, the DEPO cover) is taken from demo5 (home3), the owner's favourite.
• The header is a re-built copy of the real DEPO header (same menu, logo and actions), not the site's own markup; portraits and the logo come from /_img/site/ (front at commit 43a7a8b^) and the shared covers from /_img/photos/.
• No third-party code.

Config

None — static page. Pages are chosen with the query string (?p=gallery), so any static server works.

Notes

• Every page lives in one HTML file. The owner liked the speed but pointed out that search engines then see one page; demo19 answers that with real paths and server-rendered pages.
• On the real site each <template> would be a fetch() of that page's content block.