Just a design idea

I was bored and played around with some of the html and css. Some noticeable differences are a bigger board and hiding the top nav in a hamburger. I already know about Zen mode. Just thought this was a fun idea.

This is the original


The bigger, the better.


I think the main thing is to then test your css ideas on all kinds of resolutions, wide screens, tablets, mobile, typical laptop monitors etc.

Just so that making it bigger which is nice on one resolution doesn’t cause the board to overlap things on another etc.

I guess this is the file to play with

Edit: Probably

for the navbar as well

Subjective, but I prefer the original. Bigger is good but should not come at the expense of readability and ease to identify and reach the other pages/features.

1 Like

One nice(?) thing about the game page is that the dom actually changes for portrait orientations, so changes to the landscape style aren’t necessarily going to have to be ported to the mobile style. Of course it’s still easy to break one or the other, so good thing to call out for any potential implementer.

I think I’m in the same boat. The board gains a few pixels, but now we’ve got a moving menu bar, and the right side of the page is more cluttered.

One style change that could make the board bigger without moving anything to the side column: change the playback buttons back to their original style