MARC'S CHROMASCAPE
A custom-coded gallery system built entirely in HTML and CSS for fine artist Marc McClish's Chromascape series on Squarespace. With JavaScript blocked on the free plan, I engineered a pure CSS :target lightbox architecture powering over 100 artworks across four page types: a full-collection thumbnail gallery with a single continuous loop, series pages with sticky sidebar and composable mosaic grid, individual artwork pages with a full-viewport hero and detail crop viewer, and a color-grouped gallery. No libraries. No CDN dependencies. The entire interactive system lives in a Squarespace code block, immune to platform updates, ad blockers, and JS errors.
SQUARESPACE HTML5 CSS3 CSS GRID CSS :TARGET
Visit Website
Project Highlights
Thumbnail Gallery
A dense 6-column responsive grid of all 101 Chromascape works. Every thumbnail opens a full-screen lightbox chained in a single continuous loop from C196 to C001, so visitors can browse the entire collection without ever closing the overlay. Standard works and diptych pairs are handled with separate thumbnail and lightbox classes.
Project Highlights
Series Pages with Mosaic Grid
Each series page pairs a sticky sidebar with a composable mosaic image grid built from six interchangeable block types: right-stack, left-stack, equal, diptych-right, diptych-left, and full-width. Equal-height diptych rows are achieved through pure CSS aspect-ratio math.
Project Highlights
Individual Artwork Pages
Each artwork gets its own page with a full-viewport hero image using a calculated height that fills the screen while keeping the title block visible on first load. Three detail crop images below expand into their own independent lightboxes for close examination of texture and color.
Project Highlights
Pure CSS Lightbox Architecture
Every lightbox, overlay, and navigation chain runs on the browser-native CSS :target selector. Each lightbox is a URL-addressable state, which means the browser back button works naturally and the system is immune to ad blockers, Squarespace script injection, and platform updates.
NEXT
PROJECT
