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/5...@github.com>
_______________________________________________
rails-dev mailing list
rails-dev@openstreetmap.org
https://lists.openstreetmap.org/listinfo/rails-dev

Reply via email to