doc: maintain font size in narrow windows

[larsch]

In Firefox (55 at least), this CSS rule triggers when the browser window
is placed on the left/right half of the screen. This makes the font size
to triple in size even on a desktop.

Before:

After: (navigation pane is still collapsed, but font size is constant)

Checklist

• commit message follows commit guidelines

Affected core subsystem(s)

[BridgeAR]

@lpinca would you mind taking a look? You changed this part the last time in d2577de.

[lpinca]

It seems I did it in 662a561 to address this @silverwind's comment.

Originally it used 2.4em instead of 3.5em. I have no way to test this on Android, I'm sorry.

[BridgeAR]

I just tested it in the Chrome dev tools by emulating cellphones and I think the size should stay like that for phones. So I am not to sure about this fix.

@nodejs/documentation what do you think?

@larsch would you mind checking this on your phone as well and see if you find a fix that does not impact the phone size that much?

[silverwind]

A possible alternate fix could be to set max-width: 512px, which covers all current phones in terms of CSS width. BTW, you don't really need to test this on real phones. Browsers correctly set orientation based on the window aspect ratio.

[BridgeAR]

Ping @larsch

[larsch]

Agreed, this fix is not perfect on Android. Below is the before and after screenshots.

I've tried changing the threshold to 512px which does still work on my Android. But, then the side bar doesn't disappear on desktop - which is actually quite nice.

I've been search around a bit, and the most concrete recommendation I've found is actually to use CSS pixels rather than em units for size specification. It's in this google document:

https://developers.google.com/speed/docs/insights/UseLegibleFontSizes

I've tried change it around it, but can't seem to find a solution that keeps everything well proportioned on both desktop and mobile. When I change to px, desktop is fine, but on mobile pre-blocks gets very small - just like when removing the font-size: 3.5em like I did originally.

Before change:

After change:

[BridgeAR]

@larsch to me it sounds like a good thing if the sidebar does not disappear anymore on desktops. So that sounds like the best solution so far.

[silverwind]

Our font-size definitions are very messy in general. I'll see if I can clean this up.

[silverwind]

See #15660 for my cleanup.

[silverwind]

Landed my PR in 6d9654b, which makes this one obsolete.