Nodejs.dev: Side Navigation font colour inconsistent

[LaRuaNa]

Can someone please crosscheck on my mobile "Getting Started" seems white.

But on my Macbook everything seems to be OK. o_O

[ollelauribostrom]

I've noticed this as well but on my 13" Macbook. Looks like this:

[KirankumarAmbati]

Seems like layout.css --> .side-nav__title --> -webkit-text-fill-color: transparent; property is not working in some of the mobiles ( including mine ) But I didn't find an alternate to -webkit-text-fill-color. Only alternative I found is to give a proper fallback color. So as a solution to this issue, I modified the fallback color from color: white to color: #a0a097

[ollelauribostrom]

This seems related to the background-position property somehow 🤔 (.side-nav__title)

[lidoravitan]

@LaRuaNa Is this bug taken?

[amiller-gh]

@lidoravitan doesn't look like it! Take it away.

I have a hunch its a bug in how we calculate the --magic-hero-number css variable on mobile screens:
https://github.com/nodejs/nodejs.dev/blob/5611bb6d1e6f09765efa18b84bcfc4c1d1d89fab/src/components/layout.tsx#L28

It positions a fixed background gradient that is clipped to the text path so the copy changes from black to white at the header break:
https://github.com/nodejs/nodejs.dev/blob/5611bb6d1e6f09765efa18b84bcfc4c1d1d89fab/src/components/layout.css#L246

It was coded quickly in time for the .dev launch, so there are probably many improvements to be made in this implementation 🙂

[lidoravitan]

@amiller-gh cool! thanks. I will check it out as soon as possible. 💚

[lidoravitan]

@ollelauribostrom did you fix this issue?

[ollelauribostrom]

@lidoravitan This issue might be fixed by #168. It will probably require some tweaking, but at least I'm not seeing this on my machine anymore 🙂

[LaRuaNa]

@lidoravitan @ollelauribostrom I can still reproduce that if someone wanna look into feel free :]

[KirankumarAmbati]

I'm also still seeing it in my 15.6" Laptop.

[sagirk]

Fix: https://github.com/nodejs/nodejs.dev/pull/195.