diff --git a/website/src/layouts/BaseLayout.astro b/website/src/layouts/BaseLayout.astro index 86763b51..6c90dd1d 100644 --- a/website/src/layouts/BaseLayout.astro +++ b/website/src/layouts/BaseLayout.astro @@ -9,7 +9,7 @@ * All other layouts (LandingLayout, PostLayout, PostListLayout) * and standalone pages (404) should compose on top of this. */ -import '@/styles/global.css'; +import '@/styles/site.css'; import Footer from '@/components/Footer.astro'; import NavBar from '@/components/NavBar.astro'; import Icon from '@/components/ui/Icon.astro'; diff --git a/website/src/styles/global.css b/website/src/styles/global.css index 48f91b6a..58fb8eec 100644 --- a/website/src/styles/global.css +++ b/website/src/styles/global.css @@ -1,9 +1,9 @@ /* - * global.css — Shared stylesheet for landing, blog, AND Starlight docs. + * global.css — Starlight-safe shared theme stylesheet. * * Loaded via: * • Starlight `customCss` (docs pages) - * • BaseLayout `import` (landing & blog pages) + * • `site.css` import (landing & blog pages) * * Structure follows the official Starlight + Tailwind v4 pattern: * https://starlight.astro.build/guides/css-and-tailwind/ @@ -16,8 +16,8 @@ * doesn't conflict with Starlight/EC, and maps --color-accent-* / * --color-gray-* into --sl-color-* tokens automatically. * 3. Import only `tailwindcss/theme.css` and `tailwindcss/utilities.css` - * in their respective layers — NOT the full `@import "tailwindcss"` - * which brings in the complete Preflight reset that breaks EC. + * here. Full Tailwind Preflight must stay in a separate non-Starlight + * entry file or it will reset markdown content styles like list markers. * 4. Keep site-specific resets in @layer base (lowest priority). * 5. Leave Starlight overrides (--sl-font-*) unlayered so they beat * @layer starlight defaults. @@ -41,10 +41,7 @@ /* Starlight ↔ Tailwind v4 bridge */ @import '@astrojs/starlight-tailwind'; -/* Tailwind layers — preflight provides the full CSS reset (link resets, - box-sizing, etc.) that landing page components rely on. It lives in - @layer base so Starlight/EC styles in higher layers always win. */ -@import 'tailwindcss/preflight.css' layer(base); +/* Tailwind layers for the Starlight-compatible entry. */ @import 'tailwindcss/theme.css' layer(theme); @import 'tailwindcss/utilities.css' layer(utilities); diff --git a/website/src/styles/site.css b/website/src/styles/site.css new file mode 100644 index 00000000..dfe1f1be --- /dev/null +++ b/website/src/styles/site.css @@ -0,0 +1,15 @@ +/* + * site.css — Tailwind entry for landing and blog pages. + * + * Starlight docs load `global.css` directly. Per the Starlight docs, full + * Tailwind Preflight should be applied from a separate non-Starlight entry + * so markdown content styles are not reset on documentation pages. + * + * Reference: + * https://starlight.astro.build/guides/css-and-tailwind/#use-multiple-tailwind-configurations + */ + +@layer base, starlight, theme, components, utilities; + +@import 'tailwindcss/preflight.css' layer(base); +@import './global.css';