Live data from Hacker News

Two lines of CSS that will improve HN on mobile (IMO)

tdinh.notion.site

141–150 of 163 posts

Re: Two lines of CSS that will improve HN on mobile (IMO)

#141
post #29

For me the up- and downvote icons are too close together and I always have to pinch zoom to upvote (I don't downvote often). So prefer a bit more spacing between them.

Yes the biggest change here should be making those buttons bigger and less prone to accidental downvote/upvote

Re: Two lines of CSS that will improve HN on mobile (IMO)

#143

Personally I prefer the existing style. The larger text looks imbalanced, and I think there are ways to make collapsing threads easier without the eyesore, like changing "[-]" to "collapse thread" or adding a reddit-style bar to the left of the text. Commenting in case others agree, so the HN team doesn't assume everyone agrees with the proposed change.

Generally agree. I wouldn't call the proposal an eyesore, but I can feel the larger font dragging my attention (presumably trained from 30 years of upsized headings) from the content. More padding might help or just stretching it laterally.

Re: Two lines of CSS that will improve HN on mobile (IMO)

#144
post #26

Don't use points, use em or rem. Otherwise it won't render well for people with unusual screen formats.

Yes. Also, use unitless values for line-heights, it's basically a shorter way of expressing it as a percentage of the font-size. This way, if the font-size changes (either a change to the site design or the user changes it), the line-height will be proportionally appropriate.

12pt equals 16px, 20pt equals 26.667px. The unitless line-height would be 1.6667. Regardless of how it's written, that's a pretty big value for regular-sized text (compared to larger text for something like a heading). I guess that's helpful in narrow views of nested comments, where the close button might wrap to a new line, below another clickable element.

  .comhead {
    font-size: 1rem;
    line-height: 1.667
  }

Re: Two lines of CSS that will improve HN on mobile (IMO)

#145

I use 20px font size in Hacker News - Zenburn Dark (by incrediblygood [1]) to make usable, the default fontsize and the bright colorscheme is fatiguing to my eyes. [1] https://userstyles.org/styles/97106/hacker-news-zenburn-dark

I've long campaigned for HN to abandon px and adopt em/rem units for text.

Reading on mobile devices, or worse, high-DPI e-ink, is a nightmare.

There's supposed to be a custom-per-user CSS hack in the works, but that's been the response for years.

Re: Two lines of CSS that will improve HN on mobile (IMO)

#148

Earlier quoted context omitted.

Tables for layout. The tag. Special spacer elements. HN is ridden with anti-patterns.

Wow jesus. Opened HN with my accessibility checker. No recognisable structure. 33 spacers on the main page alone. 200+ contrast errors.

[deleted]

Re: Two lines of CSS that will improve HN on mobile (IMO)

#150
post #6

Or just use: https://play.google.com/store/apps/details?id=com.simon.harm...

I personnally prefer to use Glider for HackerNew [0] mostly because it is available from F-droid and the webview uses firefox and can be switched to the browser pretty seemlessly.

Writing from it now, it's pretty simple and has everything needed

[0] https://github.com/Mosc/Glider

Post reply on HN