introduce new @media query to set a higher content width on ultra wide screens

[Christoph-Harms]

Fixes #1936

Adds a @media CSS query that queries for min-width: 1380px (value copied from existing previous break point) and min-aspect-ratio: 2 (a value I looked up on Wikipedia). If these conditions are met, it sets the global CSS variable --content-max-width to 1200px (from 750px).

Note: Since modifying the mdbook standard template requires copying over the whole file that one wants to make changes to, the diff isn't very helpful in locating the changes I made. My actual change consists of the addition of lines 239-244 in theme/css/chrome.css. The rest is just the standard CSS file you get with mdbook init --theme.

Note 2: I am not a web designer and I more or less tailored this to my personal preference. I'd be more than happy to have someone who actually does web design for a living tear this apart and lecture me on established standards and the likes. 😊

Screenshots

For non-ultra-wide aspect ratios, nothing changes:

If the conditions for the new break point are met, the main content area is widened:

[rustbot]

r? @marioidival

rustbot has assigned @marioidival.
They will have a look at your PR within the next two weeks and either review your PR or reassign to another reviewer.

Use r? to explicitly pick a reviewer

[ehuss]

Can we please not duplicate the chrome.css file? This causes problems when updating mdbook, particularly as this file changes. Can the changes to just the one variable instead be included as an additional-css file?

In general, I would also prefer to not special case the styling for individual books, since it causes an inconsistency across our documentation. I'm fine with a little experimentation, but please try to keep it to a minimum.

[Christoph-Harms]

Can we please not duplicate the chrome.css file? This causes problems when updating mdbook, particularly as this file changes. Can the changes to just the one variable instead be included as an additional-css file?

I'm sorry, I didn't find anything in the mdbook documentation for themeing about including new files. I also thought this was cumbersome, but I genuinely thought this was how it had to be done. Although, looking at it now, I probably could have guessed it was possible, given the existence of language-picker.css... my bad, sorry. I'd be happy to make a new PR with just the new CSS in a new file.

In general, I would also prefer to not special case the styling for individual books, since it causes an inconsistency across our documentation. I'm fine with a little experimentation, but please try to keep it to a minimum.

Hmm, in that case, would it maybe make more sense to do all this directly over at ../mdbook? Because you're right of course, this is just one book, I hadn't thought about it that way.

Anyway, thanks for the feedback! Not going to lie, I was a little taken aback when this got merged without comment, I was prepared for a discussion. 😅

[ehuss]

Thanks!

We can probably do it directly in mdbook. I haven't looked closely at this, but I understand that on wider screens it doesn't make good use of space. There are certain concerns around readability and accessibility, so we just need to be a little cognizant of that.

[Christoph-Harms]

In that case this can just simply be reverted I suppose.