curiousdannii / parchment

The Interactive Fiction web app
https://iplayif.com
MIT License
421 stars 60 forks source link

Add responsive margins to Glulx CSS #68

Closed jmacdotorg closed 2 years ago

jmacdotorg commented 4 years ago

Currently, a Glulx game running with glkote.css prints its text across the entire window, with almost no left or right margins. When playing a game in a typical modern (and wide) browser window, this makes for a less pleasant reading experience than if the text were constrained to a width more typical of a printed page (or, indeed, a hand-held device).

All of the game's content should really appear in a single, centered column, whose width is set responsively depending upon the window's width. (Such that it will use up the whole strip on a mobile device, e.g., but constrain itself to a maximum width on desktop.)

I would recommend taking a page from Bootstrap, here, and the way its responsive "container" divs work.