MCP/mcnoaa-tides
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix splash page CSS: use correct Starlight attribute selector

Browse Source 
Starlight doesn't emit data-page-template="splash" — it uses
data-has-hero on <html>. All splash-scoped selectors were dead code.

Also remove .card-grid a rules that collided with Starlight's
<CardGrid> component (same class name), causing "See how it works"
links to render as bordered boxes instead of inline text.
This commit is contained in:
Ryan Malloy 2026-02-24 11:31:46 -07:00
parent de95271f53
commit f58be224fe
1 changed files with 9 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
docs/src/styles/custom.css
View File

@ -123,40 +123,7 @@ nav.sidebar .top-level > li > a {
font-size: 0.7rem; font-size: 0.7rem;
} }
/* ── Card grid for landing page ── */ /* ── Card grid — Starlight's <CardGrid> handles its own layout ── */
.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);
}
/* ── Splash page ── */ /* ── Splash page ── */
.hero-wave { .hero-wave {
@ -166,13 +133,13 @@ nav.sidebar .top-level > li > a {
} }
/* Splash page sections — spacing and centering */ /* 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; max-width: 64rem;
margin: 3rem auto; margin: 3rem auto;
padding: 0 1rem; 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; text-align: center;
border-bottom: none; border-bottom: none;
padding-bottom: 0; padding-bottom: 0;
@ -180,7 +147,7 @@ nav.sidebar .top-level > li > a {
} }
/* Use-case cards: italic prompts stand out */ /* 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); color: var(--sl-color-accent-high);
font-style: italic; font-style: italic;
display: block; display: block;
@ -203,7 +170,7 @@ nav.sidebar .top-level > li > a {
} }
/* Card "see how" links — override Starlight's card link box styling */ /* 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; display: inline-block !important;
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0 !important; padding: 0 !important;
@ -215,17 +182,17 @@ nav.sidebar .top-level > li > a {
transition: color 0.15s ease; 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; color: var(--sl-color-accent-high) !important;
} }
/* Install section: center the install block */ /* 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; text-align: center;
} }
[data-page-template="splash"] .sl-markdown-content .splash-section:last-child .expressive-code, [data-has-hero] .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 .link-card {
text-align: left; text-align: left;
max-width: 40rem; max-width: 40rem;
margin-left: auto; margin-left: auto;