From 93a40970c372c115aecf36d659ab630521f4dac8 Mon Sep 17 00:00:00 2001 From: "claude@clouddev1" Date: Mon, 15 Jun 2026 20:59:49 +0000 Subject: [PATCH] =?UTF-8?q?docs(website):=20landing=20=E2=80=94=20Wordmark?= =?UTF-8?q?=20replaces=20the=20plain=20title=20heading?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Hide the splash hero's redundant

(kept in the DOM for SEO/a11y, landing-scoped via a title-only hero) and render the Wordmark + tagline + buttons in the body, so the brand lockup sits where the heading was and the content rises above the fold (it was nearly hidden on an iPad). Styles in global.css; doc-page headings are unaffected. --- website/src/content/docs/index.mdx | 24 ++++++++++------ website/src/styles/global.css | 46 +++++++++++++++++++++++------- 2 files changed, 51 insertions(+), 19 deletions(-) diff --git a/website/src/content/docs/index.mdx b/website/src/content/docs/index.mdx index 12e0263..960e60e 100644 --- a/website/src/content/docs/index.mdx +++ b/website/src/content/docs/index.mdx @@ -2,23 +2,29 @@ title: RDBMS Playground description: A terminal playground for learning relational databases — tables, keys, relationships, indexes, queries, and query plans, hands-on. template: splash +# Title-only hero: this keeps Starlight's splash from emitting a second, +# page-title

in a content panel (which can't be styled per-page). The hero +#

lives inside `.hero`, so it can be visually hidden (kept for SEO/a11y) +# while the Wordmark + tagline + buttons below it carry the visible hero — see +# `.hero h1` in global.css. tagline/actions are rendered in the body so they sit +# *below* the wordmark, where the old title used to be. hero: - tagline: Learn relational databases by doing — in your terminal. - actions: - - text: Get started - link: /getting-started/installation/ - icon: right-arrow - - text: Browse the reference - link: /reference/types/ - variant: minimal + title: RDBMS Playground --- -import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components'; +import { Card, CardGrid, LinkCard, LinkButton } from '@astrojs/starlight/components'; import Demo from '../../components/Demo.astro'; import Wordmark from '../../components/Wordmark.astro'; +

Learn relational databases by doing — in your terminal.

+ +
+ Get started + Browse the reference +
+ RDBMS Playground is a cross-platform terminal app that gives you a safe sandbox for exploring relational database concepts: tables, columns, primary and foreign keys, relationships, indexes, queries, and query diff --git a/website/src/styles/global.css b/website/src/styles/global.css index f2a4368..93eec37 100644 --- a/website/src/styles/global.css +++ b/website/src/styles/global.css @@ -22,16 +22,42 @@ --sl-color-accent-high: #063b42; } -/* Landing hero spacing. On wide viewports Starlight pads the splash hero with - up to 10rem block padding (Hero.astro, @media min-width:50rem), which leaves - an outsized gap between the hero actions and the wordmark that follows it. - Trim just the bottom so the wordmark sits closer; the top padding (hero - breathing room below the header) is untouched. Only the landing uses the - splash template, so this is scoped in practice. */ -@media (min-width: 50rem) { - .hero { - padding-block-end: 2.5rem; - } +/* Landing hero. The visible brand is the Wordmark lockup (rendered first in the + body); Starlight's splash still emits an

from the page title, so keep it + in the DOM for the document outline / SEO but hide it visually — otherwise the + name shows three times (header logo, this h1, the wordmark). With only the + hidden h1 left, the hero block is trimmed to near-nothing so the wordmark sits + up near the header (it was almost below the fold on an iPad). Only the landing + uses the splash template, so .hero is scoped to it in practice. */ +.hero h1[data-page-title] { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip-path: inset(50%); + white-space: nowrap; + border: 0; +} +.hero { + padding-block: 1.5rem 0; +} + +/* Tagline + action buttons, rebuilt in the body so they sit just below the + wordmark — where the old hero title used to be. Centred to match the splash. */ +.hero-tagline { + text-align: center; + font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); + color: var(--sl-color-gray-2); + margin: 0 0 1.5rem; +} +.hero-actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1rem; + margin-block-end: 3rem; } /* Keep short inline code from breaking mid-token. Browsers insert a break