Text on homepage is hard to read

[rhi-gray]

Describe the bug

Depending on the background image, text on the homepage is low-contrast and difficult to read.

To Reproduce (bugs MUST be replicable)

Open up any town which uses city-illustration.jpg as a background. The text at the top with the town name and the icon for "Roll a new town" are hard to read. This affects light and dark mode. It does not affect towns which use town-illustration.jpg as a background, as the contrast is better with that image.

Town Seed (click here for info): overdueflickeringplainsqueaker

Page to navigate to, buttons to press, etc:

Should be apparent on the landing page.

Additional context

When you scroll down the page, a dark bar appears below the text which corrects the issue. Something similar could be achieved with a drop shadow or outline (e.g. how subtitles on a video appear visible whether the video is dark or light).

[Kalekdan]

I've added some text shadows - Has this achieved the desired effect, or does it need to be stronger?

[rhi-gray]

Looks like it solves the issue quite nicely!

For comparison, I've also tried playing around with the -webkit-text-stroke property, but I think the text shadow you've got is better; text-stroke makes the interior look weird when the stroke blends into the background, while the drop-shadow is drawn below the text (I think).

(Above is -webkit-text-stroke: thin var(--interactive-normal) being applied to the #passage-header element. The popup could be fixed pretty easily by specifying stroke on #passage-header > span instead, but I like the shadow better overall anyway.)

[Kalekdan]

Thanks - should I reopen the pull request in that case? Or do the points made there still stand?