Connect · Masthead Index

Summary

A vertical, editorial take on the Connect page, read like the contents page of a magazine. The banner is a title page: "Connect, an index of the magazines & people of DEPO" in light Cormorant Garamond, a short lede, three counts and a Palisade cover with a portrait overlapping it. PARTNERS is the index itself — No. / Title / City / Genre / Since / Issues — each magazine name set very large. On a desktop, hovering a row dims the other rows, sets the name in italic, opens the magazine's one-line description and floats its latest cover next to the cursor. On touch screens every row carries a small inline cover instead. FREE is a quiet four-column grid of small cards (thumbnail beside the name) ending in an "Every free title →" tile; People is a four-column portrait grid with name, role and city captions. No horizontal scrolling anywhere.

Prompt

The brief this page was built from.

Build one page of the DEPO demo album: the DEPO Connect page (dev0.dphub.net/connect — page
banner, PARTNERS = premium magazines, FREE = basic magazines, People) as a vertical page with
no horizontal scrollers. Name: "Connect · Masthead Index".

Content and function:
- The real DEPO site header and footer (Connect active); the shared album background
  (/demo20/js/shared.js) shows through; the page content stays transparent.
- Render everything from the shared data file js/connect-data.js (56 partners with name, city,
  since, genre, one-line description, cover and issues; 77 free magazines; 84 people with photo,
  role, city). Cards link to their href; "view all" links go to /premium, /basic and /locals on
  dev0.dphub.net; paid partners, free magazines and paid creators carry small badges.
- Banner: an editorial title page — headline, lede, counts of partners / free titles / people,
  one cover photo with a portrait overlapping it and a caption.
- PARTNERS as a huge typographic index: one ruled row per magazine — number, the name set very
  large in a refined light display serif (self-hosted), then city, genre, since-year and issue
  count in small caps, aligned as table columns under a small-caps legend.
- Desktop (hover + fine pointer): hovering a row dims the other rows, turns that name italic,
  reveals the magazine's one-line description and shows its cover floating near the cursor
  (eased with requestAnimationFrame, kept inside the viewport, a slight tilt with the movement).
  Keyboard focus on a row dims the others too.
- Touch: no floating cover; each row shows an inline cover thumbnail. Phones: thumbnail + name,
  with city / since / issues as one small-caps line under it.
- FREE: a compact, calm four-column grid of small cards (thumbnail beside name, city, badge) and
  a closing "every free title" tile. People: a four-column portrait grid (4:5) with name, role
  and city captions.
- Responsive to 375 px with no horizontal overflow; prefers-reduced-motion turns off the easing,
  tilt and transitions; images lazy below the first screen with width/height; visible focus.

Design: editorial, generous whitespace, hairline rules, dark site ground (#18171a) with warm
off-white type; Cormorant Garamond for names and headings, Lato small caps for metadata, the
site yellow only for numbers, badges and the active row. Vanilla JS, no libraries.

Look

• Type: Cormorant Garamond (light and italic, self-hosted woff2) for the headline, magazine names, section titles, people names and descriptions; Lato bold small caps (letter-spacing 0.18em) for every piece of metadata; Lazurski (the site's face) only for numerals — never for names, its accented Latin letters are mapped wrong. Poppins / Lato in the site header and footer.
• Palette: #18171a site ground, #f3efe7 warm ink, the same at 62 % / 42 % for secondary text, hairlines at 14 % / 32 %, #ffb500 site yellow (numbers, partner badges, active row), #53b167 green for creator badges; the shared green background behind.
• Layout: banner as a two-column title page (headline + facts | cover with an overlapping portrait); three numbered sections (I. Partners, II. Free, III. People) with ruled heads (title, note in small caps, "View all"); the partner index as a six-column table of rows; FREE and People as four-column grids (three under 1100 px, two under 720 px).
• Motion: the floating cover follows the cursor with an eased rAF loop and tilts with the speed, fades and scales in; rows dim and the active name slides 18 px and turns italic; the description line opens under it; images zoom gently on hover. All off under reduced motion.

Built with

Borrowed

Cormorant Garamond by Christian Thalmann (SIL Open Font License), downloaded from Google Fonts. The header, footer and site CSS are the DEPO site's own (shared Connect kit). Nothing else borrowed.

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.
• The floating cover is desktop-only ((hover: hover) and (pointer: fine)); scrolling hides it, the next mouse move brings it back.