Make guess-entry button layout responsive

Have buttons all on one row if viewport large enough.

Define `u-md-size1of7` for this, since SUIT CSS doesn't define
`sizeXof7` in its `sizeXofY` utils.

Set media breakpoint at 460px, the smallest width at which all buttons
on one row seems ok.
Make staff (and clef, whole note) 1.5x larger

Also, add `scale` variable which all these dimensions are now tied to,
to make changing the size easier in the future.
Center whole note on the staff

Use `document.documentElement.clientWidth` to access the viewport width
from JavaScript.
Merge branch 'sizing-tweaks'