feat(website): brand layer — teal palette, table logo, wordmark, footer

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.
2026-06-11 18:50:07 +00:00
parent a72d53de51
commit abd3739168
8 changed files with 185 additions and 4 deletions
@@ -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] } },
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill-rule="evenodd" d="M81 36 64 0 47 36l-1 2-9-10a6 6 0 0 0-9 9l10 10h-2L0 64l36 17h2L28 91a6 6 0 1 0 9 9l9-10 1 2 17 36 17-36v-2l9 10a6 6 0 1 0 9-9l-9-9 2-1 36-17-36-17-2-1 9-9a6 6 0 1 0-9-9l-9 10v-2Zm-17 2-2 5c-4 8-11 15-19 19l-5 2 5 2c8 4 15 11 19 19l2 5 2-5c4-8 11-15 19-19l5-2-5-2c-8-4-15-11-19-19l-2-5Z" clip-rule="evenodd"/><path d="M118 19a6 6 0 0 0-9-9l-3 3a6 6 0 1 0 9 9l3-3Zm-96 4c-2 2-6 2-9 0l-3-3a6 6 0 1 1 9-9l3 3c3 2 3 6 0 9Zm0 82c-2-2-6-2-9 0l-3 3a6 6 0 1 0 9 9l3-3c3-2 3-6 0-9Zm96 4a6 6 0 0 1-9 9l-3-3a6 6 0 1 1 9-9l3 3Z"/><style>path{fill:#000}@media (prefers-color-scheme:dark){path{fill:#fff}}</style></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><g fill="none" stroke="#1A1F2C" stroke-width="2.3"><rect x="5" y="7" width="22" height="18" rx="3.2"/><path d="M5.5 13h21"/></g><circle cx="9.7" cy="10" r="2" fill="#2f8f9e"/><style>g{stroke:#1A1F2C}@media (prefers-color-scheme:dark){g{stroke:#E6E6E6}}</style></svg>
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="RDBMS Playground">
+  <rect x="3.5" y="5" width="17" height="14" rx="2.4" stroke="#E6E6E6" stroke-width="1.7"/>
+  <path d="M3.5 9.6h17" stroke="#E6E6E6" stroke-width="1.5"/>
+  <path d="M11 5v14" stroke="#E6E6E6" stroke-width="1.3" opacity="0.55"/>
+  <path d="M3.5 14.3h17" stroke="#E6E6E6" stroke-width="1.3" opacity="0.4"/>
+  <circle cx="7.1" cy="7.3" r="1.45" fill="#56B6C2"/>
+</svg>
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="RDBMS Playground">
+  <rect x="3.5" y="5" width="17" height="14" rx="2.4" stroke="#1A1F2C" stroke-width="1.7"/>
+  <path d="M3.5 9.6h17" stroke="#1A1F2C" stroke-width="1.5"/>
+  <path d="M11 5v14" stroke="#1A1F2C" stroke-width="1.3" opacity="0.6"/>
+  <path d="M3.5 14.3h17" stroke="#1A1F2C" stroke-width="1.3" opacity="0.45"/>
+  <circle cx="7.1" cy="7.3" r="1.45" fill="#0F6B76"/>
+</svg>
@@ -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';
+---
+
+<Default><slot /></Default>
+
+<div class="relplay-footer">
+	<p>
+		Made by <a href="https://www.lazyevaluation.biz/">Lazy Evaluation Ltd</a>
+		<span class="sep">·</span>
+		<a href="https://git.lazyeval.net/oli/rdbms-playground">Source &amp; issues</a>
+	</p>
+</div>
+
+<style>
+	.relplay-footer {
+		margin-top: 1rem;
+		padding-top: 1rem;
+		border-top: 1px solid var(--sl-color-hairline);
+	}
+	.relplay-footer p {
+		margin: 0;
+		font-size: var(--sl-text-xs);
+		color: var(--sl-color-gray-3);
+	}
+	.relplay-footer a {
+		color: var(--sl-color-gray-2);
+		text-decoration: none;
+	}
+	.relplay-footer a:hover {
+		color: var(--sl-color-text-accent);
+		text-decoration: underline;
+	}
+	.relplay-footer .sep {
+		margin: 0 0.4rem;
+		opacity: 0.6;
+	}
+</style>
@@ -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".
+ */
+---
+
+<p class="relplay-lockup">
+	<span class="rl">
+		<span class="rl-left">
+			<span class="rl-rel"><span class="t">REL</span><span class="m">ational</span></span>
+			<span class="rl-dbms"
+				><span class="t">D</span>ata<span class="t">B</span>ase <span class="t">M</span
+				>anagement <span class="t">S</span>ystem</span
+			>
+		</span>
+		<span class="rl-play"><span class="t">PLAY</span><span class="m">ground</span></span>
+	</span>
+</p>
+
+<style>
+	.relplay-lockup {
+		text-align: center;
+		margin: 0.5rem 0 2.25rem;
+	}
+	/* The whole lockup scales from ONE master font-size: every child size and
+	   margin below is in `em`, so the composition is rigid and just zooms as a
+	   unit (like an image) — it can't break differently across viewports. The
+	   master clamp keeps it ~2rem on desktop (REL 2rem / PLAY 4rem) and shrinks
+	   it enough to fit small phones without overflow. */
+	.rl {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4em;
+		font-family:
+			ui-monospace, 'Cascadia Code', 'JetBrains Mono', 'Source Code Pro', Menlo,
+			Consolas, monospace;
+		letter-spacing: -0.02em;
+		font-weight: 500;
+		text-align: left;
+		font-size: clamp(1rem, 0.5rem + 2.6vw, 2rem);
+	}
+	.rl-left {
+		display: inline-flex;
+		flex-direction: column;
+		line-height: 1.05;
+	}
+	.rl-rel {
+		font-size: 1em; /* = master → 2rem on desktop */
+	}
+	.rl-dbms {
+		margin-top: 0.3em;
+		font-size: 0.4em; /* = 0.8rem on desktop */
+		white-space: nowrap;
+	}
+	.rl-play {
+		font-size: 2em; /* = 4rem on desktop */
+		line-height: 0.95;
+		margin-top: 0.05em; /* ≈ your 0.2rem nudge: it sat a touch high */
+	}
+	.t {
+		color: var(--sl-color-text-accent);
+		font-weight: 700;
+	}
+	.m {
+		color: var(--sl-color-gray-3);
+	}
+</style>
@@ -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';
+
+<Wordmark />

 RDBMS Playground is a cross-platform terminal app that gives you a safe
 sandbox for exploring relational database concepts: tables, columns,
@@ -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