[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 {

web/template/page.tmpl

@@ -29,7 +29,7 @@
 {{- if .instance.ThumbnailType -}}
 {{- .instance.ThumbnailType -}}
 {{- else -}}
-image/png
+image/webp
 {{- end -}}
 {{- end -}}
 

web/template/page_header.tmpl

@@ -57,11 +57,20 @@ Instance Logo
 
 {{- with . }}
 <a aria-label="{{- .instance.Title -}}. Go to instance homepage" href="/" class="nounderline">
-    <img
-        src="{{- .instance.Thumbnail -}}"
-        alt="{{- template "thumbnailDescription" . -}}"
-        title="{{- template "thumbnailDescription" . -}}"
-    />
+    <picture>
+        {{- if .instance.ThumbnailStatic }}
+        <source
+            srcset="{{- .instance.ThumbnailStatic -}}"
+            type="{{- .instance.ThumbnailStaticType -}}"
+            media="(prefers-reduced-motion: reduce)"
+        />
+        {{- end }}
+        <img
+            src="{{- .instance.Thumbnail -}}"
+            alt="{{- template "thumbnailDescription" . -}}"
+            title="{{- template "thumbnailDescription" . -}}"
+        />
+    </picture>
     <h1>{{- .instance.Title -}}</h1>
 </a>
 {{- if .showStrap }}

web/template/profile.tmpl

@@ -94,14 +94,26 @@
         alt="{{- template "avatarAlt" . -}}"
         title="{{- template "avatarAlt" . -}}"
     >
-        <img
-            class="avatar"
-            src="{{- .account.Avatar -}}"
-            alt="{{- template "avatarAlt" . -}}"
-            title="{{- template "avatarAlt" . -}}"
-            width="{{- template "avatarWidth" . -}}"
-            height="{{- template "avatarHeight" . -}}"
-        />
+        <picture
+            aria-hidden="true"
+        >
+            {{- if .account.AvatarAttachment }}
+            <source
+                class="avatar"
+                srcset="{{- .account.AvatarStatic -}}"
+                type="{{- .account.AvatarAttachment.PreviewMIMEType -}}"
+                media="(prefers-reduced-motion: reduce)"
+            />
+            {{- end }}
+            <img
+                class="avatar"
+                src="{{- .account.Avatar -}}"
+                alt="{{- template "avatarAlt" . -}}"
+                title="{{- template "avatarAlt" . -}}"
+                width="{{- template "avatarWidth" . -}}"
+                height="{{- template "avatarHeight" . -}}"
+            />
+        </picture>
     </a>
 </div>
 {{- end }}
@@ -115,11 +127,20 @@
         {{- include "profileMovedTo" . | indent 2 }}
         {{- end }}
         <div class="header-image-wrapper">
-            <img
-                src="{{- .account.Header -}}"
-                alt="{{- template "headerAlt" . -}}"
-                title="{{- template "headerAlt" . -}}"
-            />
+            <picture>
+                {{- if .account.HeaderAttachment }}
+                <source
+                    srcset="{{- .account.HeaderStatic -}}"
+                    type="{{- .account.HeaderAttachment.PreviewMIMEType -}}"
+                    media="(prefers-reduced-motion: reduce)"
+                />
+                {{- end }}
+                <img
+                    src="{{- .account.Header -}}"
+                    alt="{{- template "headerAlt" . -}}"
+                    title="{{- template "headerAlt" . -}}"
+                />
+            </picture>
         </div>
         <div class="basic-info">
             {{- with . }}

web/template/status_header.tmpl

@@ -32,13 +32,23 @@
         title="Open remote profile (opens in a new window)"
     >
     {{- end }}
-        <img
+        <picture
             class="avatar"
             aria-hidden="true"
-            src="{{- .Avatar -}}"
-            alt="Avatar for {{ .Username -}}"
-            title="Avatar for {{ .Username -}}"
         >
+            {{- if .AvatarAttachment }}
+            <source
+                srcset="{{- .AvatarStatic -}}"
+                type="{{- .AvatarAttachment.PreviewMIMEType -}}"
+                media="(prefers-reduced-motion: reduce)"
+            />
+            {{- end }}
+            <img
+                src="{{- .Avatar -}}"
+                alt="Avatar for {{ .Username -}}"
+                title="Avatar for {{ .Username -}}"
+            >
+        </picture>
         <div class="author-strap">
             <span class="displayname text-cutoff">
                 {{- if .DisplayName -}}