fix(website): landing card links + keep inline code from breaking mid-token

- Add a teal 'more' link pinned to each landing feature card's
  bottom-right, pointing at the relevant doc page (modes, the SQL echo,
  undo & history, query plans, the assistive editor).
- Stop short inline code (flags like --all-rows) from breaking after a
  hyphen: white-space:nowrap on inline code only; block code in <pre>
  is unaffected and still wraps/scrolls.
This commit is contained in:
claude@clouddev1
2026-06-11 19:24:21 +00:00
parent 09b64cbfb7
commit 069f9277d1
2 changed files with 43 additions and 0 deletions
+10
View File
@@ -31,22 +31,32 @@ SQL.
<Card title="Two ways to work" icon="seti:db"> <Card title="Two ways to work" icon="seti:db">
Start in **simple mode** — a friendly, keyword-based command language — Start in **simple mode** — a friendly, keyword-based command language —
and switch to **advanced mode** for standard SQL whenever you are ready. and switch to **advanced mode** for standard SQL whenever you are ready.
<a class="card-more" href="/getting-started/modes/">Modes →</a>
</Card> </Card>
<Card title="Learn the SQL underneath" icon="open-book"> <Card title="Learn the SQL underneath" icon="open-book">
Run a simple-mode command in advanced mode and the playground shows you Run a simple-mode command in advanced mode and the playground shows you
the equivalent SQL, so the bridge from concepts to SQL is always visible. the equivalent SQL, so the bridge from concepts to SQL is always visible.
<a class="card-more" href="/getting-started/modes/#seeing-the-sql-behind-a-command">Seeing the SQL →</a>
</Card> </Card>
<Card title="Safe to experiment" icon="approve-check"> <Card title="Safe to experiment" icon="approve-check">
Every change can be undone, your work is saved as you go, and you can Every change can be undone, your work is saved as you go, and you can
rebuild the whole database from plain, readable files. rebuild the whole database from plain, readable files.
<a class="card-more" href="/using-the-playground/undo-and-history/">Undo and history →</a>
</Card> </Card>
<Card title="See how queries run" icon="rocket"> <Card title="See how queries run" icon="rocket">
Ask the playground to explain any query and it renders the database's Ask the playground to explain any query and it renders the database's
plan as an annotated tree — so indexes and scans stop being a mystery. plan as an annotated tree — so indexes and scans stop being a mystery.
<a class="card-more" href="/reference/querying-and-inspecting/#query-plans">Query plans →</a>
</Card> </Card>
<Card title="Helpful as you type" icon="pencil"> <Card title="Helpful as you type" icon="pencil">
The input field completes commands with <kbd>Tab</kbd>, highlights The input field completes commands with <kbd>Tab</kbd>, highlights
syntax, flags mistakes before you run them, and hints what comes next. syntax, flags mistakes before you run them, and hints what comes next.
<a class="card-more" href="/using-the-playground/the-assistive-editor/">The assistive editor →</a>
</Card> </Card>
</CardGrid> </CardGrid>
+33
View File
@@ -34,6 +34,39 @@
} }
} }
/* Keep short inline code from breaking mid-token. Browsers insert a break
opportunity after a hyphen, which splits flags like `--all-rows` across
lines in a narrow column. `nowrap` keeps the token intact; the inline
element still wraps as a whole unit to the next line if it doesn't fit, so
this only prevents *internal* breaks. Block code (Expressive Code, inside
<pre>) is excluded and wraps/scrolls as before. */
.sl-markdown-content :not(pre) > code {
white-space: nowrap;
}
/* Landing feature cards: a small "more" link pinned to each card's bottom-
right, pointing at the relevant docs. Scoped via :has() so only cards that
carry the link get the flex/grow treatment (other Cards are untouched).
CardGrid stretches cards to equal height, so the links line up across a row. */
.card .body:has(.card-more) {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.card-more {
margin-top: auto;
align-self: flex-end;
padding-top: 0.75rem;
font-size: var(--sl-text-sm);
font-weight: 600;
white-space: nowrap;
color: var(--sl-color-text-accent);
text-decoration: none;
}
.card-more:hover {
text-decoration: underline;
}
/* Command prompt for simple-mode (`rdbms`) code blocks: a decorative "> " /* Command prompt for simple-mode (`rdbms`) code blocks: a decorative "> "
before each command line so consecutive commands read as distinct entered before each command line so consecutive commands read as distinct entered
lines (advanced-mode `sql` blocks are left unprefixed). It is CSS ::before lines (advanced-mode `sql` blocks are left unprefixed). It is CSS ::before