enhance: explorer tile touchups (#4220)

* enhance: add background color to explorer tiles for when the webp image cannot be loaded (e.g. in Safari 13) * enhance: add background to explorer tile icons
owid · Nov 26, 2024 · 5edb37a · 5edb37a
1 parent 4998e3c
commit 5edb37a
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 0 deletions.
diff --git a/site/gdocs/components/ExplorerTiles.scss b/site/gdocs/components/ExplorerTiles.scss
@@ -29,6 +29,7 @@
         }
     }
     .explorer-tile {
+        background-color: $oxford-blue; // show this if the webp image cannot be loaded
         background-image: url("https://ourworldindata.org/explorer-thumbnail.webp");
         background-size: cover;
         background-position: center;

diff --git a/site/gdocs/components/ExplorerTiles.tsx b/site/gdocs/components/ExplorerTiles.tsx
@@ -16,6 +16,7 @@ function ExplorerTile({ url }: { url: string }) {
     }
     const icon = linkedChart.tags[0] ? (
         <img
+            className="explorer-tile__icon"
             height={40}
             width={40}
             src={`${BAKED_BASE_URL}/images/tag-icons/${encodeURIComponent(