Connect · Frames per picture

Summary

A style sampler built on demo46's Connect page: same banner, same two partner rows that fit the screen, same rows / grid switch — but every single picture has its own frame or effect, so 100 treatments can be judged side by side on real covers and portraits. Holding the pointer on a picture for three seconds shows its style number in the top-left corner; "use 2, 8 and 23" is enough to choose. Each picture also carries Like and Favourite buttons in its top-right corner.

Prompt

The brief this page was built from.

Rebuild the DEPO Connect page (https://dev0.dphub.net/connect; front/templates/connect/ and
front/public/css/modules/Publish.css) as a demo page with the live header, footer and green
animated background, and keep its measures: the page banner edge to edge under the header (8:3,
at most 480 px, the live slides fading), then PARTNERS, FREE and People. Each section head is
the site's: a small uppercase title on the left; on the right a two-icon view switch, the grey
"VIEW ALL" pill, the position ("1–4 / 110") and the site's long arrows. No extra headings,
ledes or explanations.

- View switch: rows (horizontal scroll) or grid (cards wrap, the page scrolls). One switch for
  the whole page: the icons in every head change all three blocks at once; the choice is
  remembered in the browser (and ?view=grid opens the grid).
- Rows: PARTNERS in two rows that scroll together sideways; FREE in one row; People in one row,
  the same cards as the magazines, a little smaller (no panel or box around them). The wheel over a row scrolls that row and hands back to the
  page at its ends; mouse drag; keyboard; quiet semi-transparent edge zones inside the row.
- Size: the site's 1 : 1.2 cards with 10 px corners, a little smaller than live. The card height
  comes from the screen height, so that the header, the section head and both partner rows fit
  on one screen with at least 10 px left under them; on short or narrow screens the cards shrink
  (on phones at least two side by side).
- Content: at least as many cards as demo42 — every partner issue (220, interleaved so that
  neighbours are different magazines), 77 free magazines, 84 people — from the shared
  js/connect-data.js; captions "<NAME> MAGAZINE" with the site's paid / free badges; people with
  avatar, badge, name, profession and city.

Per picture, not per block: give every image its own frame or effect from a numbered set of
100 (borders, mounts, glows, overlays, filters, shapes, hover motions), dealt out so neighbours
differ; ?fx=<n> shows the whole page in one style. Top-right of each picture: Like and
Favourite (toggles, remembered in the browser). Top-left: after holding the pointer on a
picture for 3 s (a ring fills meanwhile), a circle with that picture's style number.

Look

• Type: Lato (captions, pills, position), the site chrome's Poppins and Lazurski — all from the live site, self-hosted in public/demo49/fonts/.
• Palette: page #18171a with the green background; text #fff, secondary rgb(255 255 255 / 0.7); pills rgb(255 255 255 / 0.2); accent #469a58 (the pressed view icon, hover).
• Layout: header (70 px, sticky) · banner (8:3, ≤ 480 px) · PARTNERS (head 44 px, two rows) · FREE (one row) · People (one row, cards at 86 %) · footer. Card height = (100svh − header − 14 px − head − 18 px row gap − 14 px) / 2, between 120 and 440 px, and at most 44vw × 1.2 on phones; width = height / 1.2; gaps 24 px (the site: 40 px). Grid view: the same card width and gaps as the rows (as many columns as fit), so switching never changes the card size.
• Cards: as the site's Publish_item: picture with 10 px corners, a gradient shade (35 % → 75 % black), caption bottom-left in Lato 600 uppercase with the paid / free badge; people the same card at 86 % with a 40 px avatar, badge, name, profession and city.
• Motion: the banner fades every 6 s; the picture zooms 3 % on hover; rails glide (rail.js).

The 100 styles

Dealt out as style ((k × 7) mod 100) + 1 for the k-th card, so the two partner rows and neighbours never repeat a style. The Gallery block in the site menu (before Log in; in the burger panel on small screens) sets the layout — rows or grid, the same switch as in every section head — and the effects: All effects (every picture its own), No effects, or one of the 100 for every picture; the choice is remembered, ?fx=<n> / ?fx=off open with it. The rules are at the bottom of public/demo49/css/demo49.css (.fx-1 … .fx-100).

Built with

Borrowed

• dev0.dphub.net/connect (2026-10-24): the layout and every measure from front/public/css/modules/Publish.css (1 : 1.2 cards with 10 px corners, the shade gradient, the caption type, the VIEW ALL pill, the arrow), the banner proportion from front/public/css/site.css .page-banner, the three banner slides and the badge / arrow icons from the site.
• js/rail.js, css/rail.css, js/connect-data.js: the shared Connect kit of demo36–45; the page itself is demo46.

Config

None (static page). localStorage: depo-connect-view (rows / grid), depo-connect-likes and depo-connect-favs (per card).

Notes

• The copied site footer overflows at 992–1365 px (its 280 px "Contact us" button and fixed columns); demo49.css makes those columns fluid in that range. The live front has the same bug (docs/backlog.md in the repository).