enhance: explorer tile touchups

[marcelgerber]

When I was looking at our homepage in Safari 13.1, I noticed that the explorer tiles were basically nonfunctional:

This is because the background image for these is only provided as a webp, and 13.1 doesn't support webp yet. Obviously one solution would be to provide that image in a different format also, but I thought the simpler solution here would be to just provide a background color, so the white text can be read.

I think this still looks decent, and is relatively rare either way:

I've also taken on the freedom to add a classname that was missing before, such that we now get a background for the icon - which Marwa has recently complained about. The CSS definitions for this were there already.

Also, for completeness, here's a screenshot of it in its full working glory:

[ikesau]

Nice! This is justified as a straight-up accessibility enhancement, too 🙌

[owidbot]

Quick links (staging server):

Site Dev	Site Preview	Admin	Wizard	Docs

Login: ssh owid@staging-site-explorer-tiles-touchups

• Site-screenshots: https://github.com/owid/site-screenshots/compare/explorer-tiles-touchups
• SVG tester: https://github.com/owid/owid-grapher-svgs/compare/explorer-tiles-touchups

SVG tester:

Number of differences (default views): 0 ✅
Number of differences (all views): 0 ✅

Edited: 2024-11-26 15:35:27 UTC
Execution time: 1.24 seconds