From 7cfee37eec86c996766f15673723423ad2a3302e Mon Sep 17 00:00:00 2001
From: Cassie Jones <code@witchoflight.com>
Date: Fri, 17 Jan 2020 19:44:30 -0500
Subject: [PATCH] Hide animated GIF stamps if "reduce motion" is on

Some people have a hard time dealing with motions near text they're
reading, or just don't want to be dealing with animated content
generally. The (prefers-reduced-motion: reduce) media query is active
when the reader has enabled one of the associated accessibility features
on their device. We can use that to hide the animated "stamps" GIFs
which generally have very short, fast loops.

This code currently uses ".gif" as a proxy for "is animated", which
could be improved by having some additional metadata. Additionally, it
might be nice to have alternate still versions of the gifs displayed
when the animated ones are hidden.
---
 _includes/style.css |  6 ++++++
 webrings.njk        | 16 ++++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/_includes/style.css b/_includes/style.css
index a227e46..0a2b4b7 100644
--- a/_includes/style.css
+++ b/_includes/style.css
@@ -74,3 +74,9 @@ pre > code {
 @media (max-width: calc(700px + 9em)) {
    pre > code { margin: 0 -1em; width: calc(100% + 2em); }
 }
+
+.animated-decoration-alt { display: none; }
+@media (prefers-reduced-motion: reduce) {
+    img.animated-decoration-alt { display: inline; }
+    .animated-decoration { display: none; }
+}
diff --git a/webrings.njk b/webrings.njk
index eff1dd6..5c87c67 100644
--- a/webrings.njk
+++ b/webrings.njk
@@ -21,7 +21,13 @@ stamps:
     </p>
 </article>
 <div class="col hcenter"><div class="row fullwidth hcenter fwrap">
-{% for stamp in stamps %}<img src="/stamps/{{stamp}}">{% endfor %}
+{% for stamp in stamps %}
+    {% if stamp.endsWith(".gif") %}
+    <img class="animated-decoration" src="/stamps/{{stamp}}">
+    {% else %}
+    <img src="/stamps/{{stamp}}">
+    {% endif %}
+{% endfor %}
 </div></div>
 {% for webring in collections.webrings %}
 <article>
@@ -41,6 +47,12 @@ stamps:
     </ul>
 </article>
 <div class="col hcenter"><div class="row fullwidth hcenter fwrap">
-{% for stamp in webring.data.stamps %}<img src="/stamps/{{stamp}}">{% endfor %}
+{% for stamp in webring.data.stamps %}
+    {% if stamp.endsWith(".gif") %}
+    <img class="animated-decoration" src="/stamps/{{stamp}}">
+    {% else %}
+    <img src="/stamps/{{stamp}}">
+    {% endif %}
+{% endfor %}
 </div></div>
 {% endfor %}
-- 
2.47.0