From ac751f5f28b58329252bc0e8aa8a7ddf1118b680 Mon Sep 17 00:00:00 2001
From: Brian Rogers <captbrogers@protonmail.ch>
Date: Mon, 12 Aug 2024 12:44:35 -0600
Subject: [PATCH] adding prefers reduced motion and clamp width to percent
 between values on body

---
 src/resources/css/app.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/resources/css/app.css b/src/resources/css/app.css
index ee613b4..5222793 100644
--- a/src/resources/css/app.css
+++ b/src/resources/css/app.css
@@ -48,6 +48,16 @@
     --text-danger-color-gradient-end: hsl(344, 100%, 70%);
 }
 
+@media (prefers-reduced-motion) {
+    *, *::before, *::after {
+        animation-duration: 0s !important;
+        /* additional recommendation */
+        transition: none !important;
+        scroll-behavior: auto !important;
+    }
+}
+
+
 body {
     background-image: linear-gradient(100deg, hsl(0, 0%, 98%), hsl(240, 5.9%, 90%));
     color: hsl(240, 5.9%, 10%);
@@ -57,6 +67,13 @@ body {
     overflow: auto;
     scrollbar-gutter: stable both-edges;
     text-rendering: optimizeLegibility;
+    font-size: 1.25rem;
+    line-height: 1.1;
+
+    /* these will clamp the width between the two values
+       and keep it at 90% of the max when between them */
+    max-width: clamp(320px, 90%, 1280px);
+    margin: auto;
 }
 
 html, body {