Change site layout and design

[gereleth]

As of now the site is using just the default Svelte Kit skeleton project layout and design.

It would be nice to change the puzzle page layout so that the puzzle takes most of the page and the controls/navigation are somewhere in a top bar or a side bar. This would maximize available play area.

I'm lacking in design skills so glad to accept any help: ideas, references, examples of similar layouts elsewhere. Mockups or pull requests if you're feeling generous =).

[Pyrolistical]

I think the simple thing for the puzzle viewport to always take the full width or full height depending on aspect ratio.

Portrait, puzzle takes full width

grid-template-areas:
  "header"
  "puzzle"
  "footer"

Landscape, puzzle takes full height

grid-template-areas:
  "header puzzle footer"

The content inside the header/footer in landscape might need to scroll if there isn't enough space.

[Jaybrainer]

The layout at puzzles-mobile may be similar to what your thinking of. Notable features: hide-able top bar Minimal settings which are visible all the time, plus an additional menu with more settings.

Ideally, there should be no scroll bar on the page which you actually play on, and information should be delegated to popup/modals, or another page.