The Deck, Real Paths

Summary

The second version of the "site as a deck" idea (demo18). The header stays fixed and the page never reloads, but now every page has a real path, and pages are no longer all in one file. A first request to any address gets a whole HTML page from PHP — header, that page's content and footer, with its own title, description and canonical link — which is what a search engine or a shared link sees. Inside the site, moving to another page fetches the same URL with the header X-Depo-Slide: 1 and gets only that page's block, which becomes a new slot in the deck; links are prefetched on hover or focus. Opened pages keep their scroll and form state. A switch at the bottom right compares three transitions: drop (the new page falls out from under the header over the old one), side (it slides in from the right, or from the left when going back) and deck (every page lifts into a card with its name above it and the row glides sideways).

Prompt

The brief this page was built from.

Build the second version of the "site as a deck" prototype (demo18) with real paths and server-
rendered pages.

- Every page has its own address (/demo19/gallery, /demo19/locals, /demo19/contact-us …). A
  first request to any address gets a whole HTML page from PHP — header, that page's content,
  footer, its own title, description and canonical link — so search engines and shared links see
  real pages.
- Inside the site, moving to another page fetches the same URL with the header X-Depo-Slide: 1
  and gets only that page's block, which becomes a new slot in the deck; prefetch links on hover
  or focus; opened pages keep their scroll and form state; History API for Back / Forward.
- Smoother transitions, switchable at the bottom right: drop (the new page falls out from under
  the header), side (slides in from the right, from the left going back) and deck (pages lift
  into labelled cards and the row glides sideways).
- Plain PHP without a framework, the demo18 / home3 look.

Look

• Type: Schibsted Grotesk 400/500/700/900, as demo18.
• Palette: as demo18 / home3 — ground #e8ebe4, paper #f4f6f1, ink #121612, soft ink #4a524b, deep green #0f2a1a, green #2f7d43, brand yellow #ffb500 (the slot number in the card labels, the current page in the deck pill).
• Layout: the fixed deep green header with the menu built from the page list (the current page marked aria-current); the deck below it, a horizontal track of slots. Each slot holds a label ("01 Gallery", shown while cards are moving) and a card (.dp-slide) with its own vertical scroller. Pages: Home, With your eyes, Connect, Locals, Depo Magazine, Awards, Blog, Contact us and a 404 page, each in pages/<key>.php, all ending with partials/footer.php. The opened-pages pill floats bottom centre; the transition switch (Drop / Side / Deck) floats bottom right.
• Motion: drop and side are Web Animations on the arriving and leaving slots (1100 / 1000 ms) with a deep shadow on the arriving card; deck runs in three beats — lift (pages scale to 0.86 into rounded cards, labels fade in, 420 ms), glide (a CSS transition on the track while the contents drift in parallax inside their cards), settle (the target grows back to full size). A new page's heading rises in; list items fade up as they scroll into view. A click during a move retargets (deck) or queues the next move (drop / side). The prototype plays the motion even when the system asks for reduced motion, and says so next to the switch — it exists to compare the transitions; the real site must honour prefers-reduced-motion. The choice is kept in localStorage or set with ?fx=drop|side|deck.

Built with

Borrowed

• The look and the page set come from demo18, which took its look from demo5 (home3).
• The header is a re-built copy of the real DEPO header, not the real site markup; images come from the site-asset snapshot (/demo19/css/, /demo19/js/, /demo19/fonts/, /_img/site/) (front at commit 43a7a8b^) and the shared covers in /_img/photos/.
• No third-party code.

Config

The demo needs a front controller, so it ships config/demo19/nginx.conf (included by the vhost config/nginx/album.conf):

• location = /demo19 answers 301 to /demo19/.
• location ^~ /demo19/ serves real files (css/depo1.css, js/depo1.js) and sends every other path to /demo19/index.php (try_files $uri /demo19/index.php$is_args$args). A nested location ~ \.php$ returns 404, so pages/*.php and partials/*.php are never run or shown on their own.
• location = /demo19/index.php is internal (reachable only through try_files) and passes the request to the front PHP-FPM pool (unix:/run/php/php8.5-fpm-front.sock) with SCRIPT_FILENAME set to public/demo19/index.php.

index.php then routes by path: '' home, gallery, connect, locals, depo-magazine, awards, blog, contact-us; old or short paths (/local, /magazine, /contact) answer 301 to the real path; anything else is a 404 page. A request with X-Depo-Slide: 1 gets only the page's block; every response carries Vary: X-Depo-Slide, so caches keep the full page and the block apart. No special PHP settings. For the local php -S server bin/router.php mirrors this (every unknown path under /demo19/ goes to index.php).

Notes

• The local php -S router serves real files first, so /demo19/pages/home.php runs there as a bare partial (200); behind nginx it is 404 as intended.
• Without JS, or when a block cannot be loaded, links simply open the page's URL as a normal page.
• The depo1.* file names are kept from its time at /html/depo1/.