Edit: add blur on hover to all images on the site

This commit is contained in:
2026-01-20 17:49:13 +02:00
parent 49687f0f8b
commit b00cc3a618
2 changed files with 37 additions and 28 deletions

View File

@@ -569,12 +569,12 @@
"role": "ui",
"tags": [],
"used_in": [
"src/components/navbar/NavbarStyleCentered/NavbarStyleCentered.tsx",
"src/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay.tsx",
"src/components/navbar/NavbarStyleApple/NavbarStyleApple.tsx",
"src/components/navbar/NavbarStyleMinimal.tsx",
"src/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen.tsx",
"src/components/navbar/NavbarLayoutFloatingInline.tsx"
"src/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay.tsx",
"src/components/navbar/NavbarStyleCentered/NavbarStyleCentered.tsx",
"src/components/navbar/NavbarLayoutFloatingInline.tsx",
"src/components/navbar/NavbarStyleMinimal.tsx"
],
"can_modify_directly": true,
"can_delete": true,
@@ -2694,8 +2694,8 @@
"role": "ui",
"tags": [],
"used_in": [
"src/components/button/ButtonBounceEffect/ButtonBounceEffect.tsx",
"src/components/button/ButtonTextShift/ButtonTextShift.tsx",
"src/components/button/ButtonBounceEffect/ButtonBounceEffect.tsx",
"src/components/button/ButtonTextStagger/ButtonTextStagger.tsx",
"src/components/button/ButtonShiftHover/ButtonShiftHover.tsx"
],
@@ -2748,17 +2748,17 @@
"button"
],
"used_in": [
"src/components/button/ButtonTextShift/ButtonTextShift.tsx",
"src/components/button/ButtonTextUnderline.tsx",
"src/components/button/ButtonIconArrow.tsx",
"src/components/button/ButtonShiftHover/ButtonShiftHover.tsx",
"src/components/button/ButtonElasticEffect/ButtonElasticEffect.tsx",
"src/components/button/ButtonExpandHover.tsx",
"src/components/button/ButtonBounceEffect/ButtonBounceEffect.tsx",
"src/components/button/ButtonTextStagger/ButtonTextStagger.tsx",
"src/components/button/ButtonShiftHover/ButtonShiftHover.tsx",
"src/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic.tsx",
"src/components/button/ButtonDirectionalHover/ButtonDirectionalHover.tsx",
"src/components/button/ButtonHoverBubble.tsx"
"src/components/button/ButtonHoverBubble.tsx",
"src/components/button/ButtonTextShift/ButtonTextShift.tsx",
"src/components/button/ButtonTextUnderline.tsx",
"src/components/button/ButtonElasticEffect/ButtonElasticEffect.tsx",
"src/components/button/ButtonBounceEffect/ButtonBounceEffect.tsx",
"src/components/button/ButtonIconArrow.tsx"
],
"can_modify_directly": true,
"can_delete": true,
@@ -2815,10 +2815,10 @@
"button"
],
"used_in": [
"src/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay.tsx",
"src/components/navbar/NavbarLayoutFloatingInline.tsx",
"src/components/navbar/NavbarStyleMinimal.tsx",
"src/components/Textbox.tsx",
"src/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay.tsx"
"src/components/Textbox.tsx"
],
"can_modify_directly": true,
"can_delete": true,
@@ -3143,15 +3143,15 @@
"product"
],
"used_in": [
"src/components/cardStack/layouts/carousels/AutoCarousel.tsx",
"src/components/cardStack/layouts/timelines/TimelineHorizontalCardStack.tsx",
"src/components/cardStack/layouts/carousels/ButtonCarousel.tsx",
"src/components/cardStack/layouts/timelines/TimelineCardStack.tsx",
"src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx",
"src/components/cardStack/layouts/grid/GridLayout.tsx",
"src/components/cardStack/layouts/timelines/TimelineBase.tsx",
"src/components/cardStack/layouts/carousels/FullWidthCarousel.tsx",
"src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx"
"src/components/cardStack/layouts/timelines/TimelineCardStack.tsx",
"src/components/cardStack/layouts/grid/GridLayout.tsx",
"src/components/cardStack/layouts/carousels/ButtonCarousel.tsx",
"src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx",
"src/components/cardStack/layouts/timelines/TimelineBase.tsx",
"src/components/cardStack/layouts/carousels/AutoCarousel.tsx",
"src/components/cardStack/layouts/timelines/TimelineHorizontalCardStack.tsx"
],
"can_modify_directly": true,
"can_delete": true,
@@ -3168,11 +3168,11 @@
"role": "ui",
"tags": [],
"used_in": [
"src/components/cardStack/layouts/carousels/AutoCarousel.tsx",
"src/components/cardStack/layouts/carousels/ButtonCarousel.tsx",
"src/components/cardStack/CardStack.tsx",
"src/components/cardStack/layouts/carousels/FullWidthCarousel.tsx",
"src/components/cardStack/layouts/grid/GridLayout.tsx",
"src/components/cardStack/layouts/carousels/FullWidthCarousel.tsx"
"src/components/cardStack/layouts/carousels/ButtonCarousel.tsx",
"src/components/cardStack/layouts/carousels/AutoCarousel.tsx"
],
"can_modify_directly": true,
"can_delete": true,
@@ -3389,11 +3389,11 @@
"product"
],
"used_in": [
"src/components/cardStack/layouts/carousels/AutoCarousel.tsx",
"src/components/cardStack/layouts/carousels/ButtonCarousel.tsx",
"src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx",
"src/components/cardStack/layouts/grid/GridLayout.tsx",
"src/components/cardStack/layouts/timelines/TimelineBase.tsx"
"src/components/cardStack/layouts/carousels/ButtonCarousel.tsx",
"src/components/cardStack/layouts/timelines/TimelineBase.tsx",
"src/components/cardStack/layouts/carousels/AutoCarousel.tsx"
],
"can_modify_directly": true,
"can_delete": true,

View File

@@ -66,7 +66,7 @@
--width-26: clamp(19.5rem, 26vw, 26rem);
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
--width-30: clamp(22.5rem, 30vw, 30rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem); /* Added a semicolon at the end */
--width-35: clamp(26.25rem, 35vw, 35rem);
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
--width-40: clamp(30rem, 40vw, 40rem);
@@ -98,6 +98,15 @@
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
img:hover {
filter: blur(5px);
}
img:hover {
filter: blur(5px);
}
img:hover {
filter: blur(5px);
}
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);