search

gereleth / hexapipes

Hexagonal pipes puzzles
https://hexapipes.vercel.app/hexagonal/5
MIT License
187 stars 19 forks source link

Change site layout and design #44

Open gereleth opened 2 years ago

gereleth commented 2 years ago

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 commented 2 years ago

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 commented 1 year ago

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.