Docs: No Bluesky hover effect on Next.js website footer

[DylanDevelops]

What is the documentation issue?

The footer for the Next.js website has links to GitHub, X, and Bluesky. All of which have a hover effect except for Bluesky.

Screen.Recording.2025-03-16.at.10.15.40.AM.mov

Is there any context that might help us understand?

N/A

Does the docs page already exist? Please link to it.

https://nextjs.org/

[sucessdy]

Hi Dylan,

This can be easily solved by just changing the CSS styles. The Bluesky hover effect isn't working properly because the image is wrapped inside an <img> tag (even though it's an SVG if downloaded) , whereas the Twitter and GitHub icons use<svg> inside the anchor tag.

I tested this locally on my computer and found that we just need to add a hover filter in CSS or Tailwind to fix it. Both methods work!

In CSS.

.bluesky-icon:hover { filter: brightness(0) invert(1); }

In Tailwind

className="hover:invert hover:brightness-0"

Hope this is the best way to fix it without modifying the actual codebase!

[DylanDevelops]

@sucessdy I'm confused. This isn't a local issue; it is an issue with their website.

[sucessdy]

Hey @DylanDevelops, I understand that this issue is on their website, but it's actually an easy fix with some simple CSS adjustments. It’s not a local issue, but since it’s affecting the UI, I’m working on a PR to resolve it. I'll submit a fix soon so it can be reviewed. Let me know if you have any insights!

[DylanDevelops]

@sucessdy Oh, you are working on a fix! I thought you were just saying to fix it locally. I see now. Good luck!

[samcx]

@sucessdy The fix would be in a private repo so creating a PR would not be possible! I will be taking a look.

[DylanDevelops]

@samcx That is what I assumed as I couldn't find anything in this repository! Thank you!

[samcx]

@DylanDevelops Fix should be live very soon!

[samcx]

Fix is live!

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.