lapikud/tipilan
3
0
Fork 0
mirror of https://github.com/Lapikud/tipilan.git synced 2026-05-08 10:00:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

adjust floating images colorscale

Browse Source
This commit is contained in:
Katri
2026-03-24 10:02:19 +02:00
parent 792f14be3e
commit 8705551269
2 changed files with 632 additions and 1128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1756
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
src/components/teaser/CarouselSection.tsx
View File

@@ -5,6 +5,7 @@ import Image from "next/image";
import { useTranslations } from "next-intl";
import { SLIDES, type CarouselSlide } from "./constants";
import { BLUR_PLACEHOLDERS } from "@/lib/blurPlaceholders";
import {gray} from "next/dist/lib/picocolors";
function blurKey(src: string) {
return src.replace('/images/', '').replace(/\.\w+$/, '');
@@ -56,7 +57,7 @@ function CarouselSlideComponent({
className="relative shrink-0 w-[35vw] xl:w-[40vw] overflow-hidden shadow-teaser transition-transform duration-700 ease-out"
style={{
aspectRatio: "850 / 900",
transform: isActive ? "translateY(0)" : "translateY(110%)",
transform: isActive ? "translateY(0)" : "translateY(110%)"
}}
>
<Image
@@ -68,6 +69,7 @@ function CarouselSlideComponent({
blurDataURL={BLUR_PLACEHOLDERS[blurKey(slide.heroImage)]}
sizes="(min-width: 1280px) 40vw, 35vw"
className="object-cover"
style={{ filter: "grayscale(50%)" }}
/>
</div>
</div>