Gallery Featured Cards Design

Goal

Improve the visual quality of the /Gallery/ page by adding a photo-led featured album section at the top while preserving the current page introduction and the full year-based album archive.

The page should feel more like a personal travel and life photo gallery, not just a text archive. The improvement must be scoped to the Gallery landing page and should not redesign individual album pages.

User-Confirmed Direction

Use the selected A. Featured Album Cards direction:

• Add large, image-led album cards near the top of the Gallery page.
• Keep the existing introductory text: Here is the photo gallery, and I will record my life here.
• Keep the existing Updated at ... line.
• Do not delete the existing complete year archive. Move it below the featured cards under an All Albums section.
• Preserve the current /Gallery/ permalink and author_profile: true.

Page Structure

The Gallery page should render in this order:

1. Existing page title from the archive layout.
2. Existing introductory sentence.
3. Existing Updated at metadata line.
4. New featured albums area.
5. Existing complete year archive, visually labeled as All Albums.

Featured Albums

The featured area should be generated from the latest published site.talks entries.

Recommended behavior:

• Use the latest 3 albums for the featured grid.
• Make the newest album the largest primary card.
• Show the next two latest albums as smaller stacked cards.
• Each card links to the album page.
• Each card displays:
  • Cover image
  • Album title
  • Date
  • Location when available

Cover images should come from post.header.teaser, matching the existing archive-single-talk.html convention. If an album does not have a teaser, it may fall back to site.teaser, but the implementation should add teaser metadata for existing Gallery albums so the featured cards use real photos.

All Albums Archive

The current year-grouped archive should remain available below the featured cards.

Behavior to preserve:

• Albums remain grouped by year.
• The newest year remains expanded by default.
• Older years remain collapsed by default.
• Clicking a year toggles that year’s album list.
• Existing album links and archive item rendering remain intact.

Visual improvements are allowed as long as the archive remains recognizable and complete:

• Use a clear All Albums heading above the old archive.
• Make year headers look more intentional than plain text rows.
• Improve spacing and hover states.
• Keep the archive compact enough that the featured section remains the top visual focus.

Styling

Add Gallery-specific styles rather than changing global archive behavior.

Preferred styling scope:

• Add classes in _pages/Gallery.html such as .gallery-intro, .gallery-featured, .gallery-featured-card, .gallery-archive, .gallery-year-header, and .gallery-posts.
• Put persistent styling in Sass, preferably _sass/_archive.scss because the page uses layout: archive.
• Avoid large inline <style> blocks in the page once implemented.

Visual tone:

• Quiet, polished, photo-led.
• Use real photos as the primary visual assets.
• Avoid decorative gradients, abstract blobs, or marketing-style hero copy.
• Keep cards to modest radii and restrained shadows.
• Ensure desktop and mobile layouts do not overflow.

Data Updates

Existing Gallery album entries in _talks/ should receive header.teaser front matter where missing.

Do not rewrite album body content as part of this task. Only add teaser metadata needed by the Gallery landing page.

For entries under _talks/to be released/, include them only if they are already part of the published site.talks collection. Do not force unpublished content onto the Gallery landing page.

Accessibility and Interaction

• Featured cards should be normal links with visible hover/focus states.
• Cover images should include useful alt text derived from the album title.
• Year toggle controls should remain keyboard-safe enough for normal browser use; if the implementation uses clickable buttons, prefer <button> over clickable <div>.
• The Gallery should still work when JavaScript is limited: the newest year can be visible by default, and featured cards should remain simple links.

Out of Scope

• Redesigning individual album pages.
• Rewriting slideshow behavior inside _talks posts.
• Changing navigation.
• Removing the existing Gallery introduction.
• Removing or replacing the full year archive.
• Adding a masonry wall as the primary Gallery experience.

Verification

Implementation should verify:

• /Gallery/ front matter remains layout: archive, permalink: /Gallery/, and author_profile: true.
• The intro sentence remains present.
• The updated date line remains present.
• Featured card markup appears before the All Albums archive.
• The original year archive loop remains present.
• The page references real Gallery image teaser paths.
• No unrelated pages or navigation files are changed.