Take the broken wordmark off the felt
The felt carried "TEXAS HOLD'EM" across its middle, and the pot badge sat on top of
it. Measured at every seat count from two to ten, the middle 20% of the word was
covered, so the table read
TEXAS LD'EM
That is not a watermark, it is a rendering fault, and it looked like one.
I tried to move it before removing it. Four placements, measured across six viewports
and two seat counts each, as the share of the word covered by a seat, a bet chip or
the pot badge:
desktop tablet phone phone landscape
1280x900 768x1024 390x844 360x640 844x390
centred (before) 20% 20% 20% 20% 20%
30% down, full size 0-7% 0-12% 43-60% 48-70% 20-23%
20% down, smaller 0% 0% 40-67% 53-70% 40%
78% down, smaller 0% 0% 77-97% 90-100%* 27-37%
* and off the oval entirely at 360px
Desktop and tablet can be made clean. A phone cannot: below 900px the felt is square,
and a square felt with six to nine seats has no clear horizontal band wide enough for
a word. The best phone result of any placement was 40% covered.
So it is gone rather than special-cased per device for a decoration. The felt still has
its gradient, its rim, the inner gold line and its shadow to be a table with, and the
page header says "Texas Hold'em Dealer" a few inches above it.
The reasoning and the numbers are left in the CSS where the element used to be, so
whoever thinks of adding one back finds out what happened first.
269 tests still passing. Seven viewports: contrast clean, layout audit clean everywhere
but the landscape phone already known from #63, no console errors.
Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
This commit is contained in:
@@ -25,7 +25,6 @@
|
||||
<section id="tableSection">
|
||||
<div id="pokerTableWrap">
|
||||
<div id="pokerTable">
|
||||
<div id="tableWatermark" aria-hidden="true">Texas Hold'em</div>
|
||||
<div id="potBadge">
|
||||
<span id="potBadgeLabel">Pot</span>
|
||||
<span id="potBadgeAmount">$0</span>
|
||||
|
||||
@@ -357,21 +357,18 @@ button,
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#tableWatermark {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgba(255, 255, 255, 0.06);
|
||||
font-size: 2.4rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
/* The felt used to carry a "TEXAS HOLD'EM" wordmark across its middle. It came out
|
||||
from behind the pot badge in two pieces — measured at every seat count from two to
|
||||
ten, the middle 20% of it was covered, so the felt read "TEXAS LD'EM" — and no
|
||||
placement fixed that everywhere. Thirty per cent down cleared the badge on a desktop
|
||||
and landed on the seats of a phone's square felt (43-70% covered); a smaller mark at
|
||||
20% or 78% was clean on desktop and tablet and no better on a phone; the bottom one
|
||||
fell off the oval entirely at 360px. A square felt with six to nine seats has no
|
||||
clear band wide enough for a word.
|
||||
|
||||
So it's gone. A watermark that looks broken is worse than no watermark, and the felt
|
||||
has a gradient, a rim, an inner gold line and a shadow to be a table with — plus a
|
||||
header saying "Texas Hold'em Dealer" a few inches above it. */
|
||||
|
||||
#potBadge {
|
||||
position: relative;
|
||||
@@ -2845,10 +2842,6 @@ body.hasActionBar #toastHost {
|
||||
padding: 0.25rem 0.3rem;
|
||||
}
|
||||
|
||||
#tableWatermark {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
#potBadge {
|
||||
padding: 0.5rem 1.1rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user