Enhancement: New header and footer links design on hover and on active

[mAmineChniti]

Description

TLDR: The header now on hover and on active has a bottom border, the footer simply changes text color

Validation

Related Issues

Check List

• [X] I have read the Contributing Guidelines and made commit messages that follow the guideline.
• [X] I have run npm run format to ensure the code follows the style guide.
• [X] I have run npm run test to check if all tests are passing.
• [X] I have run npx turbo build to check if the website builds without errors.
• [X] I've covered new added functionality with unit tests if necessary.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Jun 11, 2024 1:06pm

[mAmineChniti]

@canerakdas @bmuenzenmeyer @ovflowd @mikeesto thoughts about this proposal?

[bmuenzenmeyer]

I don't personally like it. I prefer the consistency of the other approach. This one tries to do the right thing, I understand, but the underlines look odd to me with a rounded edge, and on the top right there is a non-link icon "button" to GH, that looks the same unfocused as the footer, but now behaves "like the buttons" next to it in the header but "like a link" in the footer (turning green using fill). GH and X both turn green, which is odd.

These are true statements to me:

1. I'm not a designer.
2. we shouldn't design by committee.
3. we had a designer design the original work
4. we are inconsistent in this approach

edit: Other opinions welcome.

[mAmineChniti]

the underlines look odd to me with a rounded edge, and on the top right there is a non-link icon "button" to GH, that looks the same unfocused as the footer, but now behaves "like the buttons" next to it in the header but "like a link" in the footer (turning green using fill). GH and X both turn green, which is odd.

• Fixed the rounded edges now its not rounded anymore (its just a simple straight underline now)
• Top right GH acts and feels like a link now
• Footer GH and X don't change color to green anymore

[bmuenzenmeyer]

I'm 👎 on this This causes layout shift on hover. There are ways to fix this, like using a transparent border, but I don't think we should pursue this. https://github.com/nodejs/nodejs.org/pull/6775 is better

[bmuenzenmeyer]

I'm closing this, in favor of https://github.com/nodejs/nodejs.org/pull/6775 which is merging now. If someone feels strongly about the UX - they can open an issue to discuss, but for now the navigation and footer are consistent and keyboard accessible