style.css: fluid spacing of nav-links for mobile

[tleb]

Before we had a set gap inbetween each link. That means that carriage returns happen quickly on mobile. Once we switch to mobile width, let flexbox justify-content spread links on the line. It'll wrap once there is no more space.

Previously, most mobiles showed two lines of links. Now we only have one (but links are closer).

On mine, before/after is:

We can still gain vertical space by reducing the header & Bootlin logo, but that's out of scope of this pull request.

[fstachura]

According to Firefox, links can get cramped to the point of being unreadable on some screen widths. On Samsung S20 for example. I propose adding gap: 5px to mobile .nav-links rules.

I also find the link layout switch that happens while making the window width smaller kind of distracting, but it's not that important maybe.

[tleb]

Added a gap: 0.6ch value when in mobile mode. That means that links cannot get closer than 6ch else it wraps. The smallest width still in one line looks like the following. So we get closer links but avoid the edge-case of links touching each other (like on the S20).

A wider mobile (iPhone 11 Pro Max) looks like:

[fstachura]

I would also add gap amount of left-right padding to the container, otherwise links may get really close to the edges.

In the end I'm not sure if this really improves much. Links layout is sometimes a little bit better with this, sometimes not really. Mobile layout needs redesign, for example search also becomes hard to use.