Adapt player UI to mobile devices.
Hey there, hope you're having a great day !
After playing for quite a while on this website, I couldn't be bothered to awkwardly zoom in to try to click things each time I desired to use the website on my phone.
So I decided to create a little PR to solve this issue :)
List of changes
To the extent to which it was possible, I swapped px values for em, rem, and % to allow for slightly better scaling across devices.
The two top characters which are randomly chosen in the header now get smaller if they ever come close to overlapping the title too much, instead of just going offscreen.
I've used quite a lot of them to change the direction of some carefully placed flex layouts, as well as tweak the width/height of some elements. Eg. The navigation bar.
The view used to check evidence details has a tweaked behavior, it is slightly smaller and has a "fixed" position, so mobile users don't get misaligned when reviewing evidence.
For portrait mobile users, I use a non-standard CSS property: zoom. It allows a slightly better fit on chromium based browsers, while not affecting firefox users in a negative way.
HTML viewport tag
All HTML pages now have the generic viewport tag to have a mobile device report a size smaller than the actual screen. It allows much a better fit with elements that had to be kept in pixels (eg. DS like Screens).
Since I had to test my changes somewhere, you can find the website up to date with my repository here
Maintainers can reply to this Pull Request in French if it is their native language.
Screenshots, everybody loves those, right ?