feat(web): home story-card polish + play page back-link rebrand
Home (apps/web/app/page.tsx):
- StoryCard locked to uniform aspectRatio "4 / 5". The previous
"placeholder 4/5 → naturalRatio after onLoad" flow coupled card
height to lazy-load order: cards still below the fold sat at the
placeholder ratio while above-the-fold cards snapped to their
image's actual ratio (1.6 landscape vs 0.75 portrait vs 1.23
squarish), so the gallery looked inconsistent until a hard refresh
re-decoded everything from cache synchronously. Fixed ratio +
object-cover removes the coupling.
- StoryCard hover overlay collapsed from two sibling layers
(backdrop-blur + mask-image + dark gradient sibling) into one
element with a pure rgba(0,0,0,…) linear-gradient and an opacity
transition. Chromium does not animate backdrop-filter cleanly when
combined with mask-image on an empty element — the first hover
frame shows a full rectangular blur before the mask kicks in, then
snaps to the feathered shape ("矩形磨砂 → 渐变磨砂"). One layer,
one transitioning property, no compositing race.
Play (apps/web/app/play/page.tsx):
- Header back-link "云梦" → "InfiPlot" using the same serif + italic
ember "Plot" treatment as the homepage wordmark. Resolved against
the parallel plain-text rebrand already on infiplot/staging by
keeping the styled version for brand consistency.
This commit is contained in:
@@ -890,10 +890,12 @@ function PlayInner() {
|
||||
<header className="px-5 md:px-12 pt-6 md:pt-8 flex items-center justify-between">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-[10px] smallcaps text-clay-600 hover:text-clay-900 transition-colors flex items-center gap-2"
|
||||
className="text-clay-600 hover:text-clay-900 transition-colors flex items-center gap-2"
|
||||
>
|
||||
<i className="fa-solid fa-arrow-left text-[9px]" />
|
||||
InfiPlot
|
||||
<span className="font-serif text-[15px] leading-none tracking-tight">
|
||||
Infi<em className="italic font-light text-ember-500">Plot</em>
|
||||
</span>
|
||||
</Link>
|
||||
<div className="flex items-center gap-3 text-[10px] smallcaps text-clay-500 num">
|
||||
<span>第 · {String(sceneCount).padStart(3, "0")} · 幕</span>
|
||||
|
||||
Reference in New Issue
Block a user