chris/dex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Who's that Pokémon?: bright stage so the silhouette shows in dark mode

Browse Source 
The stage used var(--surface), so a brightness(0) silhouette was
near-invisible on a dark theme. Make it a fixed light "TV screen"
(blue→white gradient) in every theme; move the caption/hint out onto the
page background so they stay readable; add a drop-shadow to the revealed
artwork.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017Ve7HLspzeG2xDPtJQ8vmu
This commit is contained in:
chris 2026-09-10 12:52:56 -04:00
parent 1125278f76
commit a57e516f16
2 changed files with 15 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/styles/layout.css
View File

@ -3760,21 +3760,17 @@
color: var(--text-dim);
font-weight: 600;
}
/* A bright "TV screen" so the black silhouette reads in any theme. */
.wtp__stage {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 22px 16px;
display: grid;
place-items: center;
padding: 20px;
border-radius: var(--radius-lg);
background:
radial-gradient(
60% 55% at 50% 42%,
color-mix(in srgb, var(--accent) 22%, transparent),
transparent 70%
),
var(--surface);
border: 1px solid var(--border);
radial-gradient(70% 60% at 50% 38%, #ffffff, transparent 75%),
linear-gradient(165deg, #cfe7ff 0%, #eaf4ff 55%, #f6fbff 100%);
border: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.5);
}
.wtp__art {
width: 260px;
@ -3787,13 +3783,14 @@
width: 100%;
height: 100%;
object-fit: contain;
filter: brightness(0);
transition: filter 0.5s ease;
filter: brightness(0) contrast(1);
transition: filter 0.45s ease;
}
.wtp__art.is-revealed img {
filter: none;
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.18));
}
.wtp__caption {
margin-top: 12px;
font-weight: 800;
font-size: 1.05rem;
text-align: center;

4
src/views/WhosThatView.js
View File

@ -141,7 +141,9 @@ export async function WhosThatView() {
el('p', {}, 'Name it from the silhouette. Three misses and it’s revealed.'),
),
scoreEl,
el('div', { class: 'wtp__stage' }, art, caption, hint),
el('div', { class: 'wtp__stage' }, art),
caption,
hint,
el('div', { class: 'wtp__controls' }, input, guessBtn, revealBtn, nextBtn),
feedback,
);