lapikud/tipilan
3
0
Fork 0
mirror of https://github.com/Lapikud/tipilan.git synced 2026-05-08 18:08:32 +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 { useTranslations } from "next-intl";
import { SLIDES, type CarouselSlide } from "./constants"; import { SLIDES, type CarouselSlide } from "./constants";
import { BLUR_PLACEHOLDERS } from "@/lib/blurPlaceholders"; import { BLUR_PLACEHOLDERS } from "@/lib/blurPlaceholders";
import {gray} from "next/dist/lib/picocolors";
function blurKey(src: string) { function blurKey(src: string) {
return src.replace('/images/', '').replace(/\.\w+$/, ''); 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" className="relative shrink-0 w-[35vw] xl:w-[40vw] overflow-hidden shadow-teaser transition-transform duration-700 ease-out"
style={{ style={{
aspectRatio: "850 / 900", aspectRatio: "850 / 900",
transform: isActive ? "translateY(0)" : "translateY(110%)", transform: isActive ? "translateY(0)" : "translateY(110%)"
}} }}
> >
<Image <Image
@@ -68,6 +69,7 @@ function CarouselSlideComponent({
blurDataURL={BLUR_PLACEHOLDERS[blurKey(slide.heroImage)]} blurDataURL={BLUR_PLACEHOLDERS[blurKey(slide.heroImage)]}
sizes="(min-width: 1280px) 40vw, 35vw" sizes="(min-width: 1280px) 40vw, 35vw"
className="object-cover" className="object-cover"
style={{ filter: "grayscale(50%)" }}
/> />
</div> </div>
</div> </div>