Lucid Issues

Summary

Lucid magazine's public DEPO profile (@lucid.mag), for people deciding whether to follow or submit. The idea is the back catalogue as one physical object: a pinned cover turns away to reveal the previous issue as you read. Profile data follows the shape of the site's profile page (front/src/Core/Demo/ProfileDemo.php); the numbers, credits and story text are invented demo content.

Prompt

The brief this page was built from.

Build one page of the DEPO demo album: the public DEPO profile "Lucid Issues".

Goal: Lucid magazine's public DEPO profile (@lucid.mag), for people deciding whether to follow
or submit. The idea is the back catalogue as one physical object: a pinned cover turns away to
reveal the previous issue as you read.

Content, using the fields of a DEPO profile: name, handle, location, role, about, links,
followers, following, photos
and for a magazine also issues, open calls (title, text, deadline, price) and team.

Function: Pinned 3D cover turn driven by IntersectionObserver, page tint per issue, details rows
for open calls, Follow toggle.

Design: Fraunces (wordmark, headings), Schibsted Grotesk (text). Palette: #e8ebe4 ground,
#0f2a1a deep green, #2f7d43 green, tints from each cover. Layout: Giant wordmark; identity,
numbers and a cover overlapping the next section; pinned issues beside steps; open calls;
mosaic; masthead. Motion: CSS 3D rotateY on covers, background-color transition, hover zoom in
the mosaic.
Keep the real DEPO site header and footer. Use only images from the shared set. Plain HTML, CSS
and vanilla JS, working from 360 px to 1920 px, with reduced motion honoured.

Look

• Type: Fraunces (wordmark, headings), Schibsted Grotesk (text) (Google Fonts).
• Palette: #e8ebe4 ground, #0f2a1a deep green, #2f7d43 green, tints from each cover.
• Layout: Giant wordmark; identity, numbers and a cover overlapping the next section; pinned issues beside steps; open calls; mosaic; masthead.
• Motion: CSS 3D rotateY on covers, background-color transition, hover zoom in the mosaic.

Built with

Borrowed

Header, footer and site CSS copied from demo5. Otherwise nothing borrowed.

Config

None — static page.