Nodejs.org: Improve doc readability

[octref]

• URL: https://nodejs.org/api/fs.html

This is how the doc looks on my 15 inch RMBP using half screen. Can't even show a full function definition.

Please improve your media queries or font-size. I'm not a mobile user.

[phillipj]

I can confirm this doesn't look optimal on a retina macbook atm. This is the caused by a media query I assume is supposed to be targeting iPad-ish devices.

@media only screen and (max-width: 1024px) {
  #content {
    font-size: 2.5em;
    overflow: visible;
  }
  ..
}

https://github.com/nodejs/node/blob/master/doc/api_assets/style.css#L463

I don't have a iPad (retina or not) at hand, so I haven't been able to test if the big font size is neccessary on those devices.. It maybe time to re-visit some of these media queries.

/cc @nodejs/documentation

[Fishrock123]

Looping myself in, I had a go at working on some if the CSS the other week, but didn't finish it yet.

[phillipj]

@Fishrock123 guessing that work ended up in https://github.com/nodejs/node/pull/8811?

[Fishrock123]

No sorry, that was for something else. This persists I'm pretty sure.

[diagramatics]

Considering that the font-size could go from 25px to as high as 35px on a portrait oriented iPad, I agree this could be overkill. I'm pretty sure the default size of 18px would already suffice on an iPad, if not, probably just a small bump to 21px.

We could just remove the media queries completely. If that's the verdict I can go and change it.

[octref]

I'm glad to find out changing a few css lines would take more than half a year.

Seriously. Just changing the font-size to 1.6em and it'll look much better.

[gibfahn]

@octref care to submit a PR?

[octref]

Not really, and I don't have an iPad to test if the website would look good on iPad (seems the original intent for this media query is to do so).

But it's really just change the value here https://github.com/nodejs/node/blob/master/doc/api_assets/style.css#L490 and make sure it's good on iPad.

[gibfahn]

PR raised: https://github.com/nodejs/node/pull/11695

[bnoordhuis]

I'm glad to find out changing a few css lines would take more than half a year.

You don't get to use that tone. Most people here are volunteers so pipe down.

[octref]

I apologize. I wish the usability of the doc website can be given more attention and improved, but I could have said that in a less entitled way.

[bnoordhuis]

No worries. Reading back what I wrote, I could have voiced it in a friendlier way too.

[fhinkel]

Fixed in https://github.com/nodejs/node/commit/7c8bbe37b7a0e07a5754bc21cb00166240953f49. Looks like I don't have permission to close issues in this repo :thinking:

[octref]

Just pinging people in this thread, this issue hasn't been resolved for a whole year.

How it looks on half of my 15 inch macbook screen today:

Relevant CSS:

[thefourtheye]

I think https://github.com/nodejs/node/pull/15430 is related.

[octref]

@bnoordhuis This bug just passed its one year birthday. I don't know what tone should I use to express my frustration. I use this layout everyday and nodejs.org/api has been unusable for me for a whole year.

[lpinca]

@octref see https://github.com/nodejs/node/pull/15660.
All I can suggest is to get you hands dirty if you want to improve things.

[octref]

@lpinca OK I’m glad there is ongoing effort in fixing this. Thanks for linking the issue.