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

docs(website): landing — Wordmark replaces the plain title heading

Browse Source 
Hide the splash hero's redundant <h1> (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.
This commit is contained in:
claude@clouddev1
2026-06-15 20:59:49 +00:00
parent 96b9581089
commit 93a40970c3
2 changed files with 51 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/content/docs/index.mdx
+15 -9
View File
@@ -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 <h1> in a content panel (which can't be styled per-page). The hero
# <h1> 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';
<Wordmark />
<p class="hero-tagline">Learn relational databases by doing — in your terminal.</p>
<div class="hero-actions">
<LinkButton href="/getting-started/installation/" icon="right-arrow">Get started</LinkButton>
<LinkButton href="/reference/types/" variant="minimal" icon="right-arrow">Browse the reference</LinkButton>
</div>
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
website/src/styles/global.css
+36 -10
View File
@@ -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 <h1> 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