Connect · Two Rows

Summary

A horizontal version of the DEPO Connect page, styled as a newsstand late at night. The banner is a lit shop window with the night's cover and the headline "The newsstand never closes." PARTNERS is a two-row shelf holding every partner issue, grouped by magazine. The first cover of each magazine carries a gold hairline and a small name plate (name, city, issue count). FREE is two rows of compact cards, each a thumbnail with the title beside it. People is one row of portraits. With the cursor over a row, the mouse wheel moves that row and not the page, and at the row's end the wheel goes back to the page. The row controls sit inside each row: soft glass edge zones with a chevron, and a hairline progress line with "Column 03–09 / 15".

Prompt

The brief this page was built from.

Build one page of the DEPO demo album: a horizontal presentation of the DEPO Connect page
(dev0.dphub.net/connect, front/templates/connect/) — page banner, PARTNERS (premium magazines),
FREE (basic magazines), People, in that order, each block a row that scrolls sideways.

Content and function:
- Render everything from js/connect-data.js (window.CONNECT: 56 partners, 77 free magazines,
  84 people, 220 partner issue covers); "view all" links go to dev0.dphub.net/premium, /basic,
  /locals; cards link to their href; Paid / Free / Creator badges from the data.
- Rows use the shared rail engine (js/rail.js + css/rail.css): with the cursor over a row the
  wheel scrolls that row (eased), and at either end it scrolls the page again; mouse drag,
  keyboard (arrows, Home / End), native swipe on touch. No separate prev / next buttons above
  the rows: the controls live inside the row — semi-transparent edge zones with a chevron and
  a thin progress line with the visible columns ("Column 03–09 / 15").
- Keep the real DEPO header and footer, the dark #18171a site and the shared animated background
  (/demo20/js/shared.js with data-demo, .ellipses first in body; no opaque fill over it).
- 375–1920 px with no horizontal page scroll, visible focus, alt texts, lazy images after the
  first screen with fixed aspect ratios, prefers-reduced-motion respected.

Design — "Two Rows", a dense, premium newsstand at night, still calm:
- Banner: headline "The newsstand never closes." (Bodoni Moda, italic second line in DEPO
  yellow), a short line on how the rows work, three counts linking to the rows; on the right a
  lit shop window — a framed panel with a warm light from the top, one big cover and two
  smaller ones, caption "In the window tonight".
- PARTNERS: a two-row rail (data-rail-rows="2") of all 220 issue covers grouped by magazine; the
  first cover of each magazine gets a gold hairline and a small glass name plate (name, city,
  issue count); hover shows the issue number and the Paid badge.
- FREE: also two rows, smaller compact cards — a 3:4 thumbnail with the Free badge, serif name
  and city beside it, in a hairline frame.
- People: one row of 2:3 portraits with serif names, role and city, Creator badge.
- Each block: a kicker with its number, a large Bodoni title, one line of text and a pill
  "View all", over a hairline; a faint warm lamp light above each shelf.

Look

• Type: Bodoni Moda 500/600 and italic 500 for the headline, section titles, name plates, names and counts. Lato (site copy) for text, kickers, badges and the progress label.
• Palette: ground #18171a with the shared green background; cream #f4efe6 for text, the same at 64 % for secondary text and 12 % for hairlines; DEPO yellow #ffb500 for accents (headline italic, group hairlines, plates, progress thumb, focus), and a lamp light rgb(255 181 0 / .07) above each shelf; #8ee09f for the Creator badge.
• Layout: banner in two columns (text | shop window). Each section has a header row, then a full-bleed rail padded to the page gutter. Partner covers are 150–212 px wide in two rows, FREE cards 250–300 px in two rows, portraits 200–270 px in one row.
• Motion: the rail engine eases wheel and button movement. Hover zooms an image a little and fades in the issue number or badge. Edge zones rest at 22 % opacity and come up on hover. Reduced motion turns transitions and easing off.

Built with

Borrowed

Nothing borrowed. The header, footer and background are the album's copy of the DEPO site chrome.

Config

None — static page.

Notes

• 2026-10-23: seven times the content — 56 partners (the original eight, Depo Magazine and 47 more) with 220 issues, 77 free titles, 84 people (js/connect-data.js, the same file in every Connect demo). The album has ~30 covers and 24 portraits, so the new entries reuse them as close-up crops in /_img/photos/crops/ (logos cropped away; mag1–4.jpg are the Depo Magazine covers from front/public/images/depo-magazine/), spread so the same photo never sits next to itself.
• css/rail.css resets .rail (display block, no padding or overflow) because the site's site.css has its own .rail flex scroller, which otherwise lays the track, the edge zones and the progress bar side by side.
• js/rail.js gives the wheel 8 px of slack at each end, so a track that x-proximity snap parks a few pixels short of its end hands the wheel back to the page at once.
• A magazine group can start in the top or the bottom row (the groups have 2–6 issues); the gold hairline and the plate mark where each one starts.