fix: constant slant angle for season poster collage hero

The clip-path slant on collage slices previously varied with the number
of posters (hard-coded 10% steps). Express the slant as a percentage
of each slice's own width so the horizontal offset always equals the
fixed 5% container overlap, giving a constant angle for any count >= 2.
This commit is contained in:
2026-05-25 13:02:15 +00:00
parent 23379dc2c1
commit 17f8f60f6e
+20 -2
View File
@@ -592,14 +592,32 @@ function getCollageSliceStyle(season: Season, index: number) {
: null
const totalSlices = Math.min(seasonsWithPosters.value.length, 5)
const sliceWidth = 100 / totalSlices
const actualWidth = sliceWidth + 5 // overlap in container percentage points
// The slant (horizontal offset from top to bottom) should equal the overlap
// measured relative to each slice's own width.
const slant = (5 / actualWidth) * 100
let clipPath: string
if (totalSlices === 1) {
clipPath = "polygon(0 0, 100% 0, 100% 100%, 0 100%)"
} else if (index === 0) {
// First slice: straight left edge, slanted right edge
clipPath = `polygon(0 0, 100% 0, ${100 - slant}% 100%, 0 100%)`
} else if (index === totalSlices - 1) {
// Last slice: slanted left edge, straight right edge
clipPath = `polygon(${slant}% 0, 100% 0, 100% 100%, 0 100%)`
} else {
// Middle slices: slanted on both sides
clipPath = `polygon(${slant}% 0, 100% 0, ${100 - slant}% 100%, 0 100%)`
}
return {
backgroundImage: posterUrl
? `url('${posterUrl}')`
: "linear-gradient(135deg, #1a1a2e, #16213e)",
left: `${index * sliceWidth}%`,
width: `${sliceWidth + 5}%`, // overlap slightly
clipPath: `polygon(${index * 10}% 0, 100% 0, ${100 - (totalSlices - index - 1) * 10}% 100%, 0% 100%)`,
width: `${actualWidth}%`,
clipPath,
}
}