Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion website/src/layouts/BaseLayout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
13 changes: 5 additions & 8 deletions website/src/styles/global.css
Original file line number Diff line number Diff line change
@@ -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/
Expand All @@ -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.
Expand All @@ -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);

Expand Down
15 changes: 15 additions & 0 deletions website/src/styles/site.css
Original file line number Diff line number Diff line change
@@ -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';
Loading