Add a soft edge fade to About's photo at Tablet too

The left gradient was gated to lg: (matching the -ml-48 overlap), but
without any overlap at Tablet the photo sits flush against the dark
text column with a hard vertical seam. Narrower fade (w-16) from sm:
up softens that seam; widens to w-72 at lg: to also cover the deeper
overlap once that kicks in.
This commit is contained in:
Marco
2026-07-29 11:24:38 +00:00
parent cbb423f8ca
commit a9c8344472
+7 -2
View File
@@ -101,8 +101,13 @@ export function About() {
sizes="(min-width: 640px) 58vw, 100vw"
className="object-cover object-center pointer-events-none"
/>
{/* Left gradient: wide enough to cover the text-column overlap — lg+ only, matching the overlap itself */}
<div className="hidden lg:block absolute inset-y-0 left-0 w-72 bg-gradient-to-r from-bg-dark to-transparent pointer-events-none" />
{/* Left gradient — from sm: up, not just lg:. Even without the
-ml-48 overlap at Tablet, the photo sits directly against the
dark text column with no transition, reading as a hard vertical
seam (reported 2026-07-29). A narrower fade (w-16) softens just
that seam at Tablet; widens to w-72 at lg: to also cover the
deeper -ml-48 overlap once that kicks in. */}
<div className="hidden sm:block absolute inset-y-0 left-0 w-16 lg:w-72 bg-gradient-to-r from-bg-dark to-transparent pointer-events-none" />
</Reveal>
</section>