[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

@@ -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;
+		}
 	}
 }
 

web/source/css/index.css

@@ -30,7 +30,8 @@
 			line-height: 2rem;
 		}
 
-		& > img {
+		img,
+		picture {
 			align-self: center;
 			max-height: 6rem;
 		}

web/source/css/page.css

@@ -48,7 +48,8 @@
 		gap: 1rem;
 		justify-content: center;
 
-		img {
+		img,
+		picture {
 			align-self: center;
 			
 			/*

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 {