Skip to content
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

Closed
wants to merge 4 commits into from

Conversation

akhileshRaturi
Copy link
Member

Fixes Issue

Changes proposed

  • Added animated gradient text effect to main heading "Good-first-issue-finder", the color is flowing left to right.

Check List (Check all the applicable boxes)

  • [x ] My code follows the code style of this project.
  • My change requires changes to the documentation.
  • I have updated the documentation accordingly.
  • [x ] All new and existing tests passed.
  • [x ] This PR does not contain plagiarized content.
  • [x ] The title of my pull request is a short description of the requested changes.

Screenshots

screen-capture.webm

Note to reviewers

static/css/index.css Outdated Show resolved Hide resolved
static/css/index.css Outdated Show resolved Hide resolved
src/lib/components/index/hero.svelte Outdated Show resolved Hide resolved
@akhileshRaturi
Copy link
Member Author

@Cahllagerfeld Kindly review the PR.

@EmmaDawsonDev
Copy link
Member

No worries about the ping :) You are right Cahl, the animation should not show if the user has enabled the prefers-reduced-motion setting.

@akhileshRaturi
Copy link
Member Author

@EmmaDawsonDev, @Cahllagerfeld I have updated the code as per the review comments. Kindly review it

Copy link
Member

@Cahllagerfeld Cahllagerfeld left a 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) {
Copy link
Member

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) {
Copy link
Member

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]

@Cahllagerfeld
Copy link
Member

closing this for now, due to lack of activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[FEATURE] Make the "Good-first-issue-finder" text in the home page change colors dynamically.
3 participants