discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

A.3-polish-2: thicker contour stroke (0.2rem each cardinal) + tray-card down-right black silhouette drop-shadow. User visual polish after browser-verifying A.3+A.3-polish: stroke thickness bumped from 1.5px → 0.2rem (~3.2px) per cardinal, giving ~6.4px combined apparent stroke (~2× prior); user-confirmed thickness is comfortable in palette-baltimore at the current sig-card-w. Bonus: appended the same silhouette black drop-shadow that .tray-cell > img carries (_tray.scss:272, drop-shadow(1px 1px 2px rgba(0,0,0,1))) to the sig-stage-card image filter chain as a "lifted off the felt" depth cue — consistent w. the rest of the project's image-card treatment. Ordering matters in the filter chain: silhouette black comes AFTER the 4 stroke drop-shadows so it traces the STROKED contour, not just the original PNG alpha (otherwise the depth shadow would land underneath the orange-or-mustard stroke, partially occluded). 4-cardinal stroke is still adequate at 0.2rem; flagged in comment to bump to 8-direction (cardinals + diagonals) if we ever push past ~0.5rem since curved edges would otherwise show uneven thickness at gap-prone diagonals. Pure SCSS — no model/template/JS/test changes. Visual-only polish atop 50a12bc's A.3-polish

Browse Source 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-05-25 00:28:09 -04:00
parent 50a12bccab
commit 436a710478
1 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/static_src/scss/_card-deck.scss
View File

@@ -652,16 +652,26 @@ html:has(.sig-backdrop) {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
// 4 cardinal-direction drop-shadows track the PNG's alpha // Filter chain (order matters — each drop-shadow operates on
// channel → contour-following stroke. 1.5px each → ~3px // the prior result):
// combined apparent stroke. Mobile-safe: opacity-based effects // 1-4: 4 cardinal-direction drop-shadows at 0.2rem (~3.2px)
// per [[feedback-mobile-svg-glow]] (filter on raster images // each → contour-following stroke. Combined apparent width
// works fine across browsers, the dead-end was SVG glow). // ~6.4px. Bump to 8-direction stack if we ever go past
// ~0.5rem so curved edges stay even.
// 5: down-right black 1,1 offset 2px-blur drop-shadow
// matches the silhouette shadow `.tray-cell > img` carries
// (`_tray.scss:272`) — "lifted off the felt" depth cue.
// Comes AFTER the strokes so it traces the stroked
// silhouette, not just the original PNG alpha.
// Mobile-safe: filter on raster images works fine cross-browser
// (the [[feedback-mobile-svg-glow]] dead-end was specifically
// SVG glow, not raster drop-shadow).
filter: filter:
drop-shadow( 1.5px 0 0 var(--img-stroke-color)) drop-shadow( 0.2rem 0 0 var(--img-stroke-color))
drop-shadow(-1.5px 0 0 var(--img-stroke-color)) drop-shadow(-0.2rem 0 0 var(--img-stroke-color))
drop-shadow( 0 1.5px 0 var(--img-stroke-color)) drop-shadow( 0 0.2rem 0 var(--img-stroke-color))
drop-shadow( 0 -1.5px 0 var(--img-stroke-color)); drop-shadow( 0 -0.2rem 0 var(--img-stroke-color))
drop-shadow( 1px 1px 2px rgba(0, 0, 0, 1));
} }
} }
} }