Change in color of text when we hover in light mode

[namgyalangmo]

Description

resolves #177

Changes

• I adjusted the logo and icons to use text-brand-500 and added a drop shadow as per the discussion in comments.

• I replaced the existing text-brand-700 with text-brand-650 to better align with the color scheme in light mode.
  note: text-brand-650 was used instead of text-brand 500 as text-brand-500 got washed out on white background despite the use of drop shadows and text-outlines when viewing texts with small font.

• It's worth noting that text-brand-650 is slightly darker than the standard text-brand-500, but it blends in seamlessly unlike text-brand-700, ensuring consistency across the design.

note:

Screenshots (if appropriate):

Final look:
logo:

header:

Icons:

footer:

[ghost]

Hey @namgyalangmo thank you for your work. We are a bit under water preparing for the 1.7.0-alpha1 release, but ping me on this issue if you don't get any reviews by next week please.

[namgyalangmo]

@janosdebugs gentle reminder.

[ghost]

Hi @namgyalangmo thank you for poking me. I've looked at it and there are a few issues.

1. The "The Linux Foundation Projects" logo on the front page seems to also be affected which suggests it is clickable, but it is not:

2. The menu link text still has a relatively low contrast when hovered, I think the shadow might help here too.
3. The logo has a weird 2-phase hover. The yellow logo appears when hovering near the logo, but the shadow only appears when your cursor is directly on the logo. It seems like the hover effect is on the wrong element.

[namgyalangmo]

will look into it and make the necessary changes.

[namgyalangmo]

I have addressed points 1 and 3 as requested. Regarding point 2, I attempted to add a shadow to the text and also tried giving an outline to text. However, due to the small font size, it appeared blurry to me. Instead, I opted to use a darker shade of yellow. Please let me know your thoughts on this approach!

menu link text with shadow

menu link text with alternate shadow

Current preference

[ghost]

@namgyalangmo I've tested it and there is still a very low contrast on my monitor. I tried the following setting, which seems to work much better:

text-shadow: -1px -1px 0 rgba(0,0,0,0.25), 1px -1px 0 rgba(0,0,0,0.25), -1px 1px 0 rgba(0,0,0,0.25), 1px 1px 0 rgba(0,0,0,0.25)

I'm open to any solution as long as the contrast is high enough for people to read it.

[namgyalangmo]

I have added the suggested shadow, please have a look @janosdebugs .

[ghost]

Looks good, thank you @namgyalangmo !