Limit the maximum-width on the entire page

[Rufflewind]

Most people nowadays have screens that are ≥ 1920 pixels in width, which leads to very wide Haddock pages like this:

This reduces the readability of the description, as you have to move your eyes all the way to the right of the page and back. Typographers generally recommend that the number of characters on a line should not exceed ~80 or so. It's not a hard and fast rule though.

Therefore, I propose the width of the page should be limited for screens that are sufficiently large.

Implementation should be straightforward:

• Add a two extra <div>s, one placed just inside the header and one to wrap everything else.
• Set margin: 0 auto; max-width: 80em; on the inner <div>s. (The 80em is just as an example; some other number could be used depending on taste.)

The result is that the width of the page is fixed at ~80em for screens that are ≳ 80em wide while for smaller screens there is no effective change.

[Rufflewind]

Here's an example of what it looks like after the change (shown is a max-width of 60em):

I had to make a slight compromise though: the margin-right of the .links has been increased from 0 to 2em. Compare before

and after the change:

[Fuuzetsu]

I'm a bit split about this. On one hand I want to wrap stuff as you say but on another I don't know if we should be enforcing such limits: if users like to browse with large width then maybe we shouldn't deny them that… I see many pages which do such wrapping and often we end up with 30% of the screen taken by text and empty spots on the side, resulting in a long page instead… So I don't know what to do here.

By the way your PRs are very much appreciated. All the HTML-y/web-y issues are pretty much in ‘help wanted’ state from someone who knows at least a bit what they are doing in the area (not me!).

[Rufflewind]

I don't know if we should be enforcing such limits

I would consider this to be fairly established practice. You can find many examples of such: GitHub, Google, StackOverflow, Rust docs.

With a little bit of JavaScript one can also allow the user to reconfigure the width of the columns, which could be stored in a cookie so it persists.

empty spots on the side

The empty spots could be (in the future) replaced with other things like the Synopsis, or Table of Contents, or links to other modules, etc.

[thomasfaller]

In the end it goes down to personal opinions but I also agree on the necessity of a wrapper or max-width of some kind.
Also here the "Synopsis" tab on the right would need some space to breathe and to be visually more actionnable if that makes sense.

[gbaz]

this will get resolved with #721

[harpocrates]

This was fixed in #949 (with the new purple "Linuwial" theme).