claude@clouddev1
abd3739168
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.
79 lines
2.3 KiB
Plaintext
79 lines
2.3 KiB
Plaintext
---
|
|
/**
|
|
* 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>
|