From 224534619b24b5cb5ec62a559eb9532ecb2892e9 Mon Sep 17 00:00:00 2001
From: Garrit Franke <garritfranke@gmail.com>
Date: Wed, 7 Oct 2020 21:29:35 +0200
Subject: [PATCH] feat: implement reduced-motion variant

---
 components/BlogList.js | 7 +++++++
 components/Meta.js     | 6 ++++++
 2 files changed, 13 insertions(+)

diff --git a/components/BlogList.js b/components/BlogList.js
index 929cad2..fbeba09 100644
--- a/components/BlogList.js
+++ b/components/BlogList.js
@@ -53,6 +53,13 @@ const BlogList = ({ posts }) => {
             transform: translateX(10px);
             transition: transform 0.5s ease-out;
           }
+          @media (prefers-reduced-motion) {
+            a:hover li .blog__info h2,
+            a:hover li .blog__info h3,
+            a:hover li .blog__info p {
+              transform: translateX(0px);
+            }
+          }
           .hero_image {
             width: 100%;
             height: 33vh;
diff --git a/components/Meta.js b/components/Meta.js
index f906744..52caf11 100644
--- a/components/Meta.js
+++ b/components/Meta.js
@@ -145,6 +145,12 @@ export default function Meta(props) {
             font-size: 0.85rem;
             line-height: 1.45rem;
           }
+          @media (prefers-reduced-motion) {
+            * {
+              transition: none !important;
+            }
+          }
+
            {
             /* //TYPOGRAPHY------------------------------------- */
           }