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:
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user