diff --git a/website/src/content/docs/index.mdx b/website/src/content/docs/index.mdx index 2bcbf9d..12e0263 100644 --- a/website/src/content/docs/index.mdx +++ b/website/src/content/docs/index.mdx @@ -31,22 +31,32 @@ SQL. Start in **simple mode** — a friendly, keyword-based command language — and switch to **advanced mode** for standard SQL whenever you are ready. + + Modes → 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. + + Seeing the SQL → Every change can be undone, your work is saved as you go, and you can rebuild the whole database from plain, readable files. + + Undo and history → 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. + + Query plans → The input field completes commands with Tab, highlights syntax, flags mistakes before you run them, and hints what comes next. + + The assistive editor → diff --git a/website/src/styles/global.css b/website/src/styles/global.css index 5811720..f2a4368 100644 --- a/website/src/styles/global.css +++ b/website/src/styles/global.css @@ -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 +
) 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