-
-
Notifications
You must be signed in to change notification settings - Fork 310
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Closes #365 - Added animated gradient text effect to main heading. (Improvement) #366
Conversation
Issue EddieHubCommunity#365 - Added animated gradient text effect to main heading. (Improvement)
Applied the media query for reduced motion, removed additional CSS file.
@Cahllagerfeld Kindly review the PR. |
No worries about the ping :) You are right Cahl, the animation should not show if the user has enabled the prefers-reduced-motion setting. |
@EmmaDawsonDev, @Cahllagerfeld I have updated the code as per the review comments. Kindly review it |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let me know if you need further help 👍
animation: gradientAnimation 2s linear infinite alternate-reverse; | ||
} | ||
|
||
@media (prefers-reduced-motion: reduce) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We don't need a dedicated media-query here, tailwind also provides them out-of-the-box with reduced-motion:
see their docs
} | ||
} | ||
|
||
@media (min-width: 768px) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same as above, but for responsive breakpoints [resource]
closing this for now, due to lack of activity |
Fixes Issue
Changes proposed
Check List (Check all the applicable boxes)
Screenshots
screen-capture.webm
Note to reviewers