[openstreetmap/openstreetmap-website] Arrange base layers menu in a grid (PR #3620)

[Andy Allan]

> I'm wondering why this change didn't go into small.scss, if it's mainly targeting small screens/mobile devices.

I'd like to get rid of small.scss entirely at some point.

The way that bootstrap works (and one of the aspects of "mobile-first" design in general) is that you make everything work on small screens, and then you do extra things on larger screens where necessary. This is why all the [bootstrap utils](https://getbootstrap.com/docs/5.1/utilities/spacing/) work on a "size-or-greater" approach. So you have e.g. `mx-3 mx-md-6` meaning that a horizontal margin is considered as 3 by default, and then 6 on "medium-or-larger" screens. It gets mentally confusing if you consider `mx-3 mx-md-6` meaning a margin of six by default, with a margin of 3 on smaller screens.

So our approach should be to have everything currently in small.css considered as the default, and then a "large.scss" for any larger-screen overrides. But these are few so it probably doesn't warrant a separate file, so my plan is to combine the remains of small.scss into common.scss . And many of the screen-size dependent changes are no longer in our custom scss files anyway, and the remaining custom css is being reduced too.

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

Message ID: <openstreetmap/openstreetmap-website/pull/3620/c1195238979 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20220726/494b8632/attachment.htm>