[openstreetmap/openstreetmap-website] Improve scaling and vertical alignment of browse icons (PR #5354)

[Tom Hughes]

Although we're using SVG icons because they are being added using pseudo elements it's currently impossible to directly set a size for them to scale to as https://stackoverflow.com/a/8993934 explains.

So instead we use a solution based on the alternate approach there of setting the image as a background image, which can be scaled to our preferred size and then aligned.

The only tricky part is working out the vertical size to scale to - just using `1em` doesn't really look right as it doesn't allow for the descenders so I've scaled it up a bit which seems to look about right in firefox and chrome.

Here's a before and after example:

![image](https://github.com/user-attachments/assets/077e6313-da4a-4da7-88cb-cf5f3b9baedc)

You can view, comment on, or merge this pull request online at:

  https://github.com/openstreetmap/openstreetmap-website/pull/5354

-- Commit Summary --

  * Improve scaling and vertical alignment of browse icons

-- File Changes --

    M app/assets/stylesheets/common.scss (14)

-- Patch Links --

https://github.com/openstreetmap/openstreetmap-website/pull/5354.patch
https://github.com/openstreetmap/openstreetmap-website/pull/5354.diff

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/5354
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/5354 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20241124/075addb1/attachment.htm>