From 027a93facc73b78e3c3747ab796f4a14b1b4936f Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Sun, 21 Jul 2024 14:22:08 +0200
Subject: [feature/frontend] Respect `prefers-reduced-motion` for avatars,
 headers, and emojis (#3118)

* [feature/frontend] Respect `prefers-reduced-motion` for avatars, headers, and emojis

* go fmt

* fix tests

* use static version of instance thumbnail when appropriate

* use prefers-reduced-motion

* simplify account conversion a bit

* fix c&p error
---
 web/source/css/base.css   | 26 ++++++++++++++------------
 web/source/css/index.css  |  3 ++-
 web/source/css/page.css   |  3 ++-
 web/source/css/status.css |  8 --------
 4 files changed, 18 insertions(+), 22 deletions(-)

(limited to 'web/source')

diff --git a/web/source/css/base.css b/web/source/css/base.css
index 522820f15..630e4a6d2 100644
--- a/web/source/css/base.css
+++ b/web/source/css/base.css
@@ -187,18 +187,20 @@ input, select, textarea, .input {
 	margin: -0.2em 0.02em 0;
 	object-fit: contain;
 	vertical-align: middle;
-	transition: 0.1s;
-
-	/*
-		Enlarge emojis on hover to give
-		viewer a good look at them.
-	*/
-	&:hover, &:active {
-		transform: scale(2);
-		background-color: $bg;
-		box-shadow: $boxshadow;
-		border: $boxshadow-border;
-		border-radius: $br-inner;
+	
+	@media (prefers-reduced-motion: no-preference) {
+		/*
+			Enlarge emojis on hover to give
+			viewer a good look at them.
+		*/
+		transition: 0.1s;
+		&:hover, &:active {
+			transform: scale(2);
+			background-color: $bg;
+			box-shadow: $boxshadow;
+			border: $boxshadow-border;
+			border-radius: $br-inner;
+		}
 	}
 }
 
diff --git a/web/source/css/index.css b/web/source/css/index.css
index 59909ec33..382cd68c6 100644
--- a/web/source/css/index.css
+++ b/web/source/css/index.css
@@ -30,7 +30,8 @@
 			line-height: 2rem;
 		}
 
-		& > img {
+		img,
+		picture {
 			align-self: center;
 			max-height: 6rem;
 		}
diff --git a/web/source/css/page.css b/web/source/css/page.css
index cc1d4efe3..642586048 100644
--- a/web/source/css/page.css
+++ b/web/source/css/page.css
@@ -48,7 +48,8 @@
 		gap: 1rem;
 		justify-content: center;
 
-		img {
+		img,
+		picture {
 			align-self: center;
 			
 			/*
diff --git a/web/source/css/status.css b/web/source/css/status.css
index 5c7400654..21dc3416e 100644
--- a/web/source/css/status.css
+++ b/web/source/css/status.css
@@ -193,14 +193,6 @@ main {
 				font-size: 1rem;
 				line-height: initial;
 			}
-
-			img {
-				max-width: 100%;
-				margin: 5px auto;
-			}
-			img[alt~="!center"] {
-				display: block;
-			}
 		}
 
 		.poll {
-- 
cgit v1.2.3