Inspiration
We set out to capture the quiet pleasure of browsing an independent bookstore using only HTML and CSS. The idea was to see how far modern CSS could go in creating tactile, elegant interactions while staying fast and accessible. The palette, typography, and layout draw from bookbinding textures and classic editorial design, aiming for a warm, crafted atmosphere that invites slow exploration without distractions.
What it does
Literary Haven is a no JavaScript microsite that showcases a curated set of books as interactive cards with gentle tilt, depth, and subtle motion. Visitors can skim titles and descriptions, jump between sections with smooth anchor navigation, and browse comfortably on any device. Where supported, CSS View Timelines enhance scroll reveals and the :has selector powers pointer aware tilts, while older browsers see a clean, fully usable static catalog.
How we built it
The site is built with semantic HTML and a single stylesheet organized around CSS custom properties for color, spacing, type scale, shadows, and motion. A responsive grid handles layout across breakpoints, and fluid typography preserves comfortable reading. Book cards use :has with lightweight transform rules to map hover and focus to rotation and elevation, while motion is gated behind @supports and prefers reduced motion so enhancements never block core content.
Challenges we ran into
Delivering meaningful interactivity without JavaScript required careful selector design, transform math, and layered fallbacks so the effect felt natural rather than gimmicky. Ensuring keyboard parity meant mirroring hover behavior on focus and refining focus states for clarity. We also navigated uneven support for :has and View Timelines by designing a graceful baseline that looks intentional when these features are absent.
Accomplishments that we're proud of
We are proud that the experience feels lively and tactile while remaining entirely HTML and CSS. The 3D card interaction is accessible, performant, and resilient, and the design system creates a coherent identity that complements the content. Most importantly, the site remains readable and straightforward to navigate, with enhancements that add delight without compromising usability.
What we learned
This project showed how powerful modern CSS has become for interaction design, especially with :has, custom properties, and View Timelines. We refined our approach to progressive enhancement, motion accessibility, and fallback planning, and we confirmed that a token based stylesheet speeds iteration while keeping visual decisions consistent. The result is a pattern library we can extend with confidence.
What's next for Literary Haven
We plan to grow the catalog, add simple filtering and sorting with progressive enhancement, and ship a print friendly stylesheet for readers who take notes offline. We will refine the card component to support richer metadata, explore an alternate theme and a dark mode variant using the same tokens, and consider a lightweight content pipeline so updating titles is as simple as editing a data file.
Log in or sign up for Devpost to join the conversation.