From 26d3878b995071ccad82476c55204f7a482e395b Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Wed, 23 Oct 2024 23:17:06 +0200
Subject: [PATCH 1/2] fix: colorful testimonials for hoverless devices

fixes #578
---
 apps/svelte.dev/src/routes/_home/Testimonials.svelte | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/svelte.dev/src/routes/_home/Testimonials.svelte b/apps/svelte.dev/src/routes/_home/Testimonials.svelte
index bab2635cd3..84bd170c24 100644
--- a/apps/svelte.dev/src/routes/_home/Testimonials.svelte
+++ b/apps/svelte.dev/src/routes/_home/Testimonials.svelte
@@ -134,6 +134,12 @@
 				filter: grayscale(0);
 			}
 		}
+
+		@media (hover: none) {
+			.screenshot {
+				filter: grayscale(0);
+			}
+		}
 	}
 
 	.definition {

From 68e4a214cef74298712659e81cd5c7c5e339d99d Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 23 Oct 2024 17:30:59 -0400
Subject: [PATCH 2/2] add filter/scale when appropriate rather than removing
 when not

---
 .../src/routes/_home/Testimonials.svelte      | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/svelte.dev/src/routes/_home/Testimonials.svelte b/apps/svelte.dev/src/routes/_home/Testimonials.svelte
index 84bd170c24..e35af8ac2f 100644
--- a/apps/svelte.dev/src/routes/_home/Testimonials.svelte
+++ b/apps/svelte.dev/src/routes/_home/Testimonials.svelte
@@ -94,6 +94,7 @@
 			transform: translate3d(0, 0, 0);
 			transition-property: filter, scale;
 			transition-duration: 0.2s;
+			user-select: none;
 
 			&:nth-child(1) {
 				top: 0%;
@@ -115,9 +116,11 @@
 				rotate: 1.5deg;
 			}
 
-			&:hover {
-				scale: 1.05;
-				filter: drop-shadow(0.2rem 0.4rem 2.4rem rgb(0 0 0 / 0.2));
+			@media all and not (hover: none) {
+				&:hover {
+					scale: 1.05;
+					filter: drop-shadow(0.2rem 0.4rem 2.4rem rgb(0 0 0 / 0.2));
+				}
 			}
 		}
 
@@ -126,18 +129,15 @@
 			height: auto;
 			object-fit: contain;
 			border-radius: var(--sk-border-radius);
-			filter: grayscale(1);
 			transition: filter 0.2s;
 			-webkit-transform: var(--safari-fix);
 
-			a:hover & {
-				filter: grayscale(0);
-			}
-		}
+			@media all and not (hover: none) {
+				filter: grayscale(1);
 
-		@media (hover: none) {
-			.screenshot {
-				filter: grayscale(0);
+				a:hover & {
+					filter: grayscale(0);
+				}
 			}
 		}
 	}