From f58be224fe035b8300641125f0a1191e1e9dca6a Mon Sep 17 00:00:00 2001 From: Ryan Malloy Date: Tue, 24 Feb 2026 11:31:46 -0700 Subject: [PATCH] Fix splash page CSS: use correct Starlight attribute selector MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Starlight doesn't emit data-page-template="splash" — it uses data-has-hero on . All splash-scoped selectors were dead code. Also remove .card-grid a rules that collided with Starlight's component (same class name), causing "See how it works" links to render as bordered boxes instead of inline text. --- docs/src/styles/custom.css | 51 +++++++------------------------------- 1 file changed, 9 insertions(+), 42 deletions(-) diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css index ec18e2c..7dfd2c9 100644 --- a/docs/src/styles/custom.css +++ b/docs/src/styles/custom.css @@ -123,40 +123,7 @@ nav.sidebar .top-level > li > a { font-size: 0.7rem; } -/* ── Card grid for landing page ── */ -.card-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - gap: 1rem; - margin: 1.5rem 0; -} - -.card-grid a { - display: block; - padding: 1.25rem; - border: 1px solid var(--sl-color-hairline-light); - border-radius: 0.5rem; - text-decoration: none; - color: inherit; - transition: border-color 0.2s ease, background 0.2s ease; -} - -.card-grid a:hover { - border-color: var(--sl-color-accent); - background: var(--sl-color-accent-low); -} - -.card-grid a h3 { - margin: 0 0 0.5rem; - font-size: 1rem; - color: var(--sl-color-accent-high); -} - -.card-grid a p { - margin: 0; - font-size: 0.9rem; - color: var(--sl-color-gray-2); -} +/* ── Card grid — Starlight's handles its own layout ── */ /* ── Splash page ── */ .hero-wave { @@ -166,13 +133,13 @@ nav.sidebar .top-level > li > a { } /* Splash page sections — spacing and centering */ -[data-page-template="splash"] .sl-markdown-content .splash-section { +[data-has-hero] .sl-markdown-content .splash-section { max-width: 64rem; margin: 3rem auto; padding: 0 1rem; } -[data-page-template="splash"] .sl-markdown-content .splash-section h2 { +[data-has-hero] .sl-markdown-content .splash-section h2 { text-align: center; border-bottom: none; padding-bottom: 0; @@ -180,7 +147,7 @@ nav.sidebar .top-level > li > a { } /* Use-case cards: italic prompts stand out */ -[data-page-template="splash"] .sl-markdown-content .card em { +[data-has-hero] .sl-markdown-content .card em { color: var(--sl-color-accent-high); font-style: italic; display: block; @@ -203,7 +170,7 @@ nav.sidebar .top-level > li > a { } /* Card "see how" links — override Starlight's card link box styling */ -[data-page-template="splash"] .sl-markdown-content article.card a[href] { +[data-has-hero] .sl-markdown-content article.card a[href] { display: inline-block !important; margin-top: 0.5rem; padding: 0 !important; @@ -215,17 +182,17 @@ nav.sidebar .top-level > li > a { transition: color 0.15s ease; } -[data-page-template="splash"] .sl-markdown-content article.card a[href]:hover { +[data-has-hero] .sl-markdown-content article.card a[href]:hover { color: var(--sl-color-accent-high) !important; } /* Install section: center the install block */ -[data-page-template="splash"] .sl-markdown-content .splash-section:last-child { +[data-has-hero] .sl-markdown-content .splash-section:last-child { text-align: center; } -[data-page-template="splash"] .sl-markdown-content .splash-section:last-child .expressive-code, -[data-page-template="splash"] .sl-markdown-content .splash-section:last-child .link-card { +[data-has-hero] .sl-markdown-content .splash-section:last-child .expressive-code, +[data-has-hero] .sl-markdown-content .splash-section:last-child .link-card { text-align: left; max-width: 40rem; margin-left: auto;