Make JavaScript game controls work better in small viewports

In the old design, when they wrapped onto multiple lines, various bad
things happened.  The lines overlapped one another, the lines got
broken within buttons but not between buttons, and if they had got
broken between buttons the left button on each line would have lacked
a left border.

I've made two major changes to fix this.  First, I've switched from
flow layout to flex layout.  This has much better default behaviour,
breaking lines in the right places, not overlapping lines, and even
arranging line-wrapping within a button when the viewport gets really
narrow.

Second, I've given each button a border on all four sides and then
used negative margins to overlap them.  This required changing the
borders from transparent black to opaque grey to make them display
correctly when overlapping.

The result is not quite identical to the old version on a wide
viewport, but I think it's as close as I can get while keeping the new
CSS pleasant.

Ideally, the separator would vanish when it was adjacent to a line
break, but I've not worked out how to do that yet.

0 files changed, 0 insertions, 0 deletions