From abd37391684be9b0e6cc6765d7ae334fe7f5552d Mon Sep 17 00:00:00 2001 From: "claude@clouddev1" Date: Thu, 11 Jun 2026 18:50:07 +0000 Subject: [PATCH] =?UTF-8?q?feat(website):=20brand=20layer=20=E2=80=94=20te?= =?UTF-8?q?al=20palette,=20table=20logo,=20wordmark,=20footer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Anchor the site to the product's identity (Phase B branding): - Accent palette mapped to the app's in-TUI teal (--sl-color-accent-*, light + dark); trim the splash hero's oversized desktop bottom padding. - Header logo: a database-table glyph with a teal primary-key cell (light/dark variants); favicon redrawn to match. - Landing wordmark 'RELational PLAYground': teal picks out REL+PLAY ('relplay', the domain) and R/D/B/M/S (spelling out RDBMS). Sizes locked in em off one master scale so the lockup zooms as a rigid unit. - Footer override: default footer + an understated company (Lazy Evaluation Ltd) and source/issues line. No engine names or 'DSL' in user-facing copy. --- website/astro.config.mjs | 17 ++++- website/public/favicon.svg | 2 +- website/src/assets/relplay-logo-dark.svg | 7 ++ website/src/assets/relplay-logo-light.svg | 7 ++ website/src/components/Footer.astro | 44 +++++++++++++ website/src/components/Wordmark.astro | 78 +++++++++++++++++++++++ website/src/content/docs/index.mdx | 3 + website/src/styles/global.css | 31 +++++++++ 8 files changed, 185 insertions(+), 4 deletions(-) create mode 100644 website/src/assets/relplay-logo-dark.svg create mode 100644 website/src/assets/relplay-logo-light.svg create mode 100644 website/src/components/Footer.astro create mode 100644 website/src/components/Wordmark.astro diff --git a/website/astro.config.mjs b/website/astro.config.mjs index d6a6a4f..890f4f5 100644 --- a/website/astro.config.mjs +++ b/website/astro.config.mjs @@ -25,9 +25,20 @@ export default defineConfig({ starlight({ title: 'RDBMS Playground', tagline: 'Learn relational databases by doing.', - // TODO(Phase B): point at the real repository once it moves to its - // public home. Omitted for now rather than linking the wrong repo. - // social: [{ icon: 'github', label: 'GitHub', href: '…' }], + // Header logo: a database-table glyph with a teal primary-key cell. + // Separate light/dark files so the outline adapts to the theme; + // `replacesTitle: false` keeps the "RDBMS Playground" wordmark beside it. + logo: { + light: './src/assets/relplay-logo-light.svg', + dark: './src/assets/relplay-logo-dark.svg', + replacesTitle: false, + }, + // Footer override: Starlight's default footer + a small company/source line. + components: { + Footer: './src/components/Footer.astro', + }, + // TODO(Phase B): a header social link to the repo is deliberately omitted + // — the source/issues link lives understated in the footer instead. customCss: ['./src/styles/global.css'], // Register the simple-mode command grammar with Expressive Code (Shiki). expressiveCode: { shiki: { langs: [rdbmsLang, rdbmsSyntax] } }, diff --git a/website/public/favicon.svg b/website/public/favicon.svg index cba5ac1..0714453 100644 --- a/website/public/favicon.svg +++ b/website/public/favicon.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/website/src/assets/relplay-logo-dark.svg b/website/src/assets/relplay-logo-dark.svg new file mode 100644 index 0000000..b51dccb --- /dev/null +++ b/website/src/assets/relplay-logo-dark.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/website/src/assets/relplay-logo-light.svg b/website/src/assets/relplay-logo-light.svg new file mode 100644 index 0000000..8bb197f --- /dev/null +++ b/website/src/assets/relplay-logo-light.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/website/src/components/Footer.astro b/website/src/components/Footer.astro new file mode 100644 index 0000000..526d5a3 --- /dev/null +++ b/website/src/components/Footer.astro @@ -0,0 +1,44 @@ +--- +/** + * Footer override: render Starlight's default footer (pagination, last-updated, + * "Built with Starlight"), then append a small, understated brand line — the + * company (linked to its disclosures) and an unobtrusive source/issues link + * (true to "people can join in, but don't advertise it loudly"). + */ +import Default from '@astrojs/starlight/components/Footer.astro'; +--- + + + +
+

+ Made by Lazy Evaluation Ltd + · + Source & issues +

+
+ + diff --git a/website/src/components/Wordmark.astro b/website/src/components/Wordmark.astro new file mode 100644 index 0000000..da3796d --- /dev/null +++ b/website/src/components/Wordmark.astro @@ -0,0 +1,78 @@ +--- +/** + * Brand lockup — "RELational PLAYground" doing double duty: + * + * RELational ┐ + * DataBase Management Sys │ PLAYground (PLAYground large, spanning both rows) + * + * Two hidden readings, both drawn out in teal: + * • the domain brand → REL + PLAY = "relplay" + * • the acronym → R(elational) D(ataBase) M(anagement) S(ystem) = RDBMS, + * so a learner who doesn't know what RDBMS stands for sees it spelled out. + * + * Decorative; the product name stays "RDBMS Playground". The DOM order reads + * naturally to screen readers: "RELational DataBase Management System PLAYground". + */ +--- + +

+ + + RELational + DataBase Management System + + PLAYground + +

+ + diff --git a/website/src/content/docs/index.mdx b/website/src/content/docs/index.mdx index dd4d7f4..2bcbf9d 100644 --- a/website/src/content/docs/index.mdx +++ b/website/src/content/docs/index.mdx @@ -15,6 +15,9 @@ hero: import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components'; import Demo from '../../components/Demo.astro'; +import Wordmark from '../../components/Wordmark.astro'; + + RDBMS Playground is a cross-platform terminal app that gives you a safe sandbox for exploring relational database concepts: tables, columns, diff --git a/website/src/styles/global.css b/website/src/styles/global.css index 9be8784..5811720 100644 --- a/website/src/styles/global.css +++ b/website/src/styles/global.css @@ -3,6 +3,37 @@ @import 'tailwindcss/theme.css' layer(theme); @import 'tailwindcss/utilities.css' layer(utilities); +/* ── Brand accent ──────────────────────────────────────────────────────── + Anchor the site accent to the product's in-TUI "identifier" teal, so the + docs and the app read as one product rather than a generic docs theme. + Starlight derives link / active-nav / focus colours from these three + accent shades: `-low` = subtle background, base = mid, `-high` = strong / + high-contrast (link text). Dark theme is `:root`; light overrides under + `[data-theme='light']`. These are unlayered, so they win over Starlight's + layered defaults. Tweakable — eyeball on the dev server. */ +:root { + --sl-color-accent-low: #0e343b; + --sl-color-accent: #2f8f9e; + --sl-color-accent-high: #7ed6e3; +} +:root[data-theme='light'] { + --sl-color-accent-low: #cfe9ec; + --sl-color-accent: #0f6b76; + --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; + } +} + /* 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