diff --git a/src/app/globals.css b/src/app/globals.css index c966d70..9c16a79 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -451,6 +451,32 @@ a.btn-primary:visited { display: block; } +/* Fill letterboxed image space with a glow derived from the image itself. */ +.blurred-image-container { + position: relative; + width: 100%; + overflow: hidden; + background: #000; + isolation: isolate; +} + +.post-media-item .blurred-image-bg { + position: absolute; + inset: -32px; + width: calc(100% + 64px); + height: calc(100% + 64px); + max-height: none; + object-fit: cover; + filter: blur(28px) brightness(0.48) saturate(1.15); + pointer-events: none; + z-index: 0; +} + +.post-media-item .blurred-image-main { + position: relative; + z-index: 1; +} + .post-media-item video { width: 100%; max-height: 360px; diff --git a/src/components/BlurredImage.tsx b/src/components/BlurredImage.tsx new file mode 100644 index 0000000..64f1d2a --- /dev/null +++ b/src/components/BlurredImage.tsx @@ -0,0 +1,24 @@ +interface BlurredImageProps { + src: string; + alt: string; +} + +export default function BlurredImage({ src, alt }: BlurredImageProps) { + return ( +