oli/rdbms-playground
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
website/src/content/docs/index.mdx
+10
View File
@@ -31,22 +31,32 @@ SQL.
<Card title="Two ways to work" icon="seti:db">
Start in **simple mode** — a friendly, keyword-based command language —
and switch to **advanced mode** for standard SQL whenever you are ready.
<a class="card-more" href="/getting-started/modes/">Modes →</a>
</Card>
<Card title="Learn the SQL underneath" icon="open-book">
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.
<a class="card-more" href="/getting-started/modes/#seeing-the-sql-behind-a-command">Seeing the SQL →</a>
</Card>
<Card title="Safe to experiment" icon="approve-check">
Every change can be undone, your work is saved as you go, and you can
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 title="See how queries run" icon="rocket">
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.
<a class="card-more" href="/reference/querying-and-inspecting/#query-plans">Query plans →</a>
</Card>
<Card title="Helpful as you type" icon="pencil">
The input field completes commands with <kbd>Tab</kbd>, highlights
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>
</CardGrid>
website/src/styles/global.css
+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 "> "
before each command line so consecutive commands read as distinct entered
lines (advanced-mode `sql` blocks are left unprefixed). It is CSS ::before