A Home for Lossless Presentations, Up and Running

Why Care?

The Lossless Group gives a lot of talks, pitches, and explainers. Until now they lived wherever they happened to be made: a deck here, a Keynote file there, a slide section buried in another site. This site is where they come together, as pages you can open in a browser, share with a link, and eventually embed anywhere.

It starts small on purpose. Today it's a landing page with the Lossless look and an empty gallery waiting for its first decks. But the foundation is the part that's hard to change later, and that's what shipped: the framework, the design system, and a development environment anyone can reproduce with one command.

What's New?

• A landing page with the Lossless brand: the dark ground, the cyan-to-orange gradient, Inter, and the Lossless mark.

• A presentations gallery, empty for now, styled after the newest listing pages on mpstaton.com.

• The three ways decks get made here: Markdown decks, Astro component decks, and decks you can embed in other pages.

• Astro 7.3.2 with Tailwind 4.3.3, Svelte 5.57.0, and the Vercel adapter, every dependency on its latest release.

• A reproducible dev environment. nix develop (or direnv allow) gives you the exact Node, pnpm, bun, and Deno the rest of the Lossless tree uses.

The Story

This site is a replica of a replica. lossless.group came first; Michael's personal site, mpstaton-site, took its look and kept refining it; and this site takes mpstaton-site's version, because that's where the newest thinking lives.

So we started from mpstaton-site's Astro config, its three stylesheets, and its public brand assets, and trimmed what only that site needs: a file watcher for gated investment memos, analytics tied to Michael's accounts, and investment deck screenshots that belong to other companies. The header, layout, and SEO defaults were rewritten for The Lossless Group.

Then we looked at it. A headless browser screenshot showed the card titles on the landing page rendering at plain body size, even though they asked for large text. The cause was a subtle one, inherited from the copied stylesheet:

/* globals.css, as copied: unlayered */
p { font-size: 1rem; }

Tailwind v4 puts its utility classes inside a CSS cascade layer, and any rule outside a layer beats every rule inside one. So p { font-size: 1rem } silently overrode text-2xl on every paragraph. Moving the element typography into @layer base keeps the same defaults while letting utilities win again. The same bug still exists on mpstaton-site's proposal cards.

How It Works

lossless-slides-site/
├── flake.nix              # devshell: imports lossless-monorepo's `js` aspect
├── astro.config.mjs       # server output, Vercel adapter, Svelte, sitemap, Tailwind
├── tsconfig.json          # @components, @layouts, @styles, @brand … import aliases
├── src/
│   ├── pages/index.astro  # landing page
│   ├── layouts/BaseLayout.astro
│   ├── components/basics/Header.astro
│   ├── styles/            # globals.css, tokens.css, prose.css
│   └── brand/lossless.ts  # name, colors, logo, favicon
└── public/                # favicon, trademarks, icons

Running it locally:

nix develop        # or: direnv allow
pnpm install
pnpm dev           # Astro 7 starts the server in the background
pnpm astro dev status   # …and `stop` / `logs`

Astro 7 detaches its dev server from the terminal that started it, so pnpm dev returns right away while the site keeps serving at http://localhost:4321.

What's Next

• The gallery itself. Port hypernova-site's slides system: deck registries, Markdown decks, preview cards, and the Reveal.js presentation wrapper, restyled to match these cards.

• The first decks, so the empty state can go.

• A real domain and a Vercel deployment. The site URL is a placeholder until then.

• Brand kit and design system pages, which every Astro Knots site is meant to carry.

Related

• [[Slides-System-for-Astro-and-Markdown]]

• [[Maintain-Embeddable-Slides]]

• [[Styles-Architecture-Blueprint]]

• lossless-slides-site on GitHub