# Redesign the app shell, directory, and every page · PR \#38 · screen/col

[View on GitCafe](https://git.cafe/screen/col/pull/38)

Repository: [screen/col](https://git.cafe/screen/col)

Visibility: public

State: merged

Source repository: Unavailable fork

Source branch: redesign/site-refresh

Target branch: main

Head commit: 75383ff58afaf78bc561cf4c99b8588d3933811f

[Discussion and reviews](https://git.cafe/screen/col/pull/38)

[Commits](https://git.cafe/screen/col/pull/38/commits?format=markdown)

[Files changed](https://git.cafe/screen/col/pull/38/diffs?format=markdown)

## Description

---

## What changed

A redesign of the site shell and every page, split into focused commits so each can be reviewed (and reverted) on its own:

1. **Apply next/font variables on html so the configured fonts load.** The variable classes were on `<body>`, but Tailwind resolves `--font-sans` on `:root`. The reference was invalid there, so every page fell back to the browser's default font.
2. **Use SF Pro Rounded with a Nunito fallback for the UI font.**
3. **Rewrite library descriptions without em dashes or promotional copy.** 10 used em dashes and 7 read as marketing, which goes against the contributing guide's factual-description rule.
4. **Add sidebar and category icons.** These are Iconsax PNGs rendered as CSS masks, so they follow the text colour.
5. **Move every route into a shared app frame.** Every page now shares:
   - one sidebar with the brand, search, navigation, page-specific content, GitHub stars and theme toggle
   - a full-height content card that is the only scrolling area

   The sidebar widens on `/libraries` to hold the filters, and the sidebar search drives the directory directly. Screens below `1024px` get a compact top bar. This commit also adds a token-based dark/light theme with no brand-blue chrome, custom scrollbars, and icons centred on the capital letters of their labels.
6. **Redesign the directory filters, toolbar, and cards.**
   - The category pill slides between options, and the section headers are full-width.
   - Sort and view are segmented controls.
   - Card previews show at their real 1.9:1 ratio instead of being cropped.
   - Result changes animate with FLIP (cards glide to their new positions), without scaling any text.
7. **Redesign the library detail page.**
   - A sticky side card holds the preview, links and details.
   - Install methods sit in a segmented track, with a blur wave when you switch commands.
   - Getting started is a numbered timeline.
   - The copy button cross-fades and resizes to fit its label.
   - The page no longer has a footer.
8. **Rebuild the docs in the new style.**
   - Section navigation with a sliding pill, and an "On this page" list that follows the section being read.
   - Shared docs components replace the per-page markup and teal styling.
   - Pages slide in from the direction you navigate.
9. **Redesign the contributors and sponsors pages.**
   - Contributors are shown as cards, with totals.
   - Sponsors has an honest empty state instead of placeholder tiers.
   - Neither page shows the footer any more.

Each commit type-checks on its own. The shared stylesheet is layered, so the CSS for commits 6–9 lands in commit 5 and their markup follows.

This is a larger design change. The contributing guide asks for an issue first for changes like this; I'm happy to split it into separate PRs or open one if you prefer.

## Type

- [ ] New library
- [x] Library metadata correction
- [ ] New verified components
- [x] Bug fix
- [x] Feature
- [ ] Documentation

## Verification

- [ ] I kept this pull request focused. (It's one redesign across the site, split into focused commits.)
- [x] I ran `npm test` and `npm run build` successfully. (32/32 tests pass.)
- [x] I checked light and dark modes when the interface changed.
- [ ] I checked keyboard access and reduced motion when interaction changed. (Focus rings, arrow-key tab switching and `prefers-reduced-motion` rules are in place, but I haven't done a full keyboard pass.)
- [ ] I added screenshots or a recording for visible changes. (To follow.)

## Related issue

None.

🤖 Generated with [Claude Code](https://claude.com/claude-code)