brian/laravel-stubs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

adding prefers reduced motion and clamp width to percent between values on body

Browse Source
This commit is contained in:
Brian 2024-08-12 12:44:35 -06:00
parent a1aecdf3e2
commit ac751f5f28
Signed by: brian
GPG Key ID: 5032868E98A381FA
1 changed files with 17 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/resources/css/app.css
View File

@ -48,6 +48,16 @@
--text-danger-color-gradient-end: hsl(344, 100%, 70%); --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 { body {
background-image: linear-gradient(100deg, hsl(0, 0%, 98%), hsl(240, 5.9%, 90%)); background-image: linear-gradient(100deg, hsl(0, 0%, 98%), hsl(240, 5.9%, 90%));
color: hsl(240, 5.9%, 10%); color: hsl(240, 5.9%, 10%);
@ -57,6 +67,13 @@ body {
overflow: auto; overflow: auto;
scrollbar-gutter: stable both-edges; scrollbar-gutter: stable both-edges;
text-rendering: optimizeLegibility; 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 { html, body {