AstroLog PIR®
All convention-astro entries

The gallery wall, the album switcher, and the lightbox that hid in plain sight

Highconvention-astro 3 min readBy Christopher W
TL;DR: Round three, same day. The stray "download button" at the page bottom turned out to be the lightbox itself: its CSS was scoped to .pir-conv but the overlay lives outside it, so it rendered as an unstyled stub while silently locking the scroll. Unscoped, it works. The Convention gallery hero became a gallery wall - framed, tilted tiles with a warm spotlight and a live "photos gathered" chip - and clicking a tile now hands you to its album: Choose-an-album is a real switcher (a tab per album, ready for the Convention's many albums; a stage that previews the selected album as thumbnails; thumbnails open the lightbox). About fits one row; anchor jumps stop short of the navbar; the walkthrough's consent note moved beside the reach-out; the main gallery kept "click me 1st" a little longer.
Read the full story →

🕯️ The lightbox was there all along

Christopher reported the lightbox “not rendering, but something is running because page scroll stops” - and a download button sitting weirdly at the bottom of the page. Both were the same bug: the overlay’s CSS said .pir-conv .conv-lb, but the overlay’s div lives outside .pir-conv. The selector never matched, so the overlay rendered as a plain block at the page bottom (its top bar: count, Download, Close - the mystery button), while the JavaScript happily added the .open class and locked body scroll. One unscope fixed both.

The Convention gallery hero now hangs its marquee tiles like framed prints - white mats, alternating tilt, a warm spotlight - and carries a wall-chip that reads the manifest: “1 album gathering - the first photo could be yours”. Clicking a tile hands you to its album below.

🗂️ The album switcher

Choose-an-album is no longer a static grid. It is a tab per album (the Inaugural Convention will have more than one - the design waits for them), a stage that previews the selected album as a thumbnail grid, and thumbnails that open the lightbox. Albums still gathering show their Pixieset and walkthrough paths. A frontmatter-const gotcha (is:inline scripts cannot see MANIFEST) briefly broke the whole thing; the URL is inline in the script now.

🧹 The small repairs

  • Anchor jumps get scroll-padding-top: titles no longer hide under the fixed navbar.
  • The kit footer’s four groups (Explore, Helpers, Get involved, About) fit one row: the 11.5rem grid minimum was wrapping About at wide views.
  • The scroll cue lifts above the bottom dock, and on the gallery hero sits inline above the marquee.
  • Marquee pagination math is honest: pages = floor((track width - viewport)/viewport) + 1, not round(width/viewport).
  • Walkthrough: “See the albums” and “The repository” buttons centered; the photo-consent note now sits directly under “Not sure which path fits?”; the walkthrough button inherits the Convention CTA’s glow, and the Convention button adds a bounce.
  • Main gallery: pills centered, manifest fetch retries once, and the empty state explains itself when viewed locally (file:// cannot fetch the manifest - open the live gallery instead).
  • “Click me 1st” stays on the main gallery pages a little longer while visitors learn the two sites apart; the Convention site keeps “Neighborhood Nav”.

The record of the git dance: Christopher’s gallery commit landed clean but was rejected for push (the remote had moved); the rescue is reset-hard to origin, re-curl the corrected files, commit, push. The convention-astro social-card commit just needs pull –rebase first.