feat: rebuild as a modern archive with then vs now demos

[felipefialho]

Summary

Pure CSS Components (2014) was decaying:

• the carousel images came from a dead service
• code highlighting loaded from rawgit, which shut down in 2019
• the install instructions pointed to Bower
• the Grunt + Stylus toolchain had 39 audit vulnerabilities (1 critical, 26 high)

This rebuilds the site as an archive: the six original components are kept working as they were written, each shown next to how HTML and CSS build it natively today.

Component	2014	Native
Collapse	hidden checkbox / radios	<details name>, ::details-content
Tab	hidden radios	exclusive <details> laid out as tabs
Modal	hidden checkbox	<dialog> + invoker commands, @starting-style
Dropdown	checkbox / :hover	Popover API + anchor positioning, interestfor
Tooltip	:hover + ::after	popover="hint" + interestfor + anchor positioning
Carousel	radios + labels	scroll-snap + ::scroll-button / ::scroll-marker

Each native feature lists its real support status. Features that aren't Baseline sit behind @supports, so they still work where support is missing.

Born native (new)

A new section with 10 components that have no 2014 version, built with HTML and CSS only, no JavaScript. Each one lists where it works today:

Component	Native features
Custom select	appearance: base-select, ::picker(select), <selectedcontent>
Switch + segmented control	<input switch>, :has()
Smarter forms	field-sizing: content, :user-invalid
File tree	nested <details>, ::details-content
Filters drawer	<dialog closedby> + invoker commands, @starting-style
Sticky header	@container scroll-state(stuck / scrolled)
Scroll-spy table of contents	scroll-target-group, :target-current
Reading progress	animation-timeline: scroll() / view()
Radial menu	sibling-index(), sibling-count(), cos()/sin()
Gallery	cross-document view transitions, 4 photo pages

Also in this PR:

• The six native demos were redesigned with realistic content and a shared UI style.
• Menus and headings are now lowercase.
• New 🧩 favicon.

What changed

• Astro 7, pnpm, zero client JavaScript. The "Lights" theme toggle is a hidden checkbox + :has(), the 2014 trick.
• Each demo's HTML and CSS live in one file under src/exhibits/<name>/. The same file is rendered and shown as highlighted code, and @scope isolates each demo. This replaces the hand-escaped duplicate snippets.
• The 2014 CSS was compiled from the Stylus source into plain CSS, with the same selectors and technique. The dead images are replaced with local SVGs.
• New Why page (/why/, old /story/ redirects) in English, opening with the 2012 pure-CSS Cartman, with links to the originals in Portuguese.
• The design follows an editorial archive style: museum wall labels (title, year, medium), light and dark modes, self-hosted fonts.
• Zip downloads are retired. The originals are attached to the v2.0.0 release, and the old /build/*.zip URLs 301 there. /build/<name>/<name>.css is still served for hotlinks.
• Added ESLint, Stylelint, CI, CodeQL v4, dependabot, netlify.toml and basic security headers. No CSP, because it would block the AdSense snippet Netlify injects.

Verification

• pnpm lint, pnpm build (astro check included): clean. pnpm audit: 0 vulnerabilities.
• Chromium, on the built site:
  • All 12 demos work with mouse and keyboard, and each 2014 demo matches the original's behavior (carousel wrap-around, accordion, click and hover dropdowns, modal close paths, tabs, 4 tooltip positions).
  • Native demos: focus handling, Esc, light dismiss, and anchored placement all work.
  • The Lights toggle works by keyboard. No console errors.
  • Light and dark modes checked at 1440px and 390px.
• Not tested in Firefox or Safari. The native demos' fallback paths are untested there.

Before merge

• Felipe: review the wording of the why page (src/pages/why.md). It's written in your voice from the 2014 post.

After merge

• Publish the production deploy and unlock auto-publishing: production is locked on a 2023 deploy, the same as piano was.
• Close dependabot PR Bump cookie and socket.io #65.

🤖 Generated with Claude Code

[github-advanced-security]

You are seeing this message because GitHub Code Scanning has recently been set up for this repository, or this pull request contains the workflow file for the Code Scanning tool.

What Enabling Code Scanning Means:

• The 'Security' tab will display more code scanning analysis results (e.g., for the default branch).
• Depending on your configuration and choice of analysis tool, future pull requests will be annotated with code scanning analysis results.
• You will be able to see the analysis results for the pull request's branch on this overview once the scans have completed and the checks have passed.

For more information about GitHub Code Scanning, check out the documentation.