HN but it is not an eyesore
gist.github.com
gist.github.com
Low contrast webpages do appear to be all the rage with newer designers so perhaps I can point out the problem with that with two small anecdotes.
I, like around 1% of the population, am "blue-black" colour blind. Not something that generally affects me in day-to-day life, but the colours I see are darker and less contrasting to what everyone else sees. 1% of the population is not an insignificant proportion of the world. The lack of contrast is such that all the bylines dissappear. Worse, clicked links also dissappear. Yet, because the from-domain text is higher contrast, it remains visible.
As for the comment box/button... Almost felt like it was deleted. Took me a moment to confirm it wasn't hit by a display none.
Second anecdote. Everything except .title has a font-size set relative to the browser, which is good. Optic neuritis makes things noisier for me, so the base font-size of my browser is set a little higher. Which, unfortunately, makes that 24px decleration stick out like a sore thumb. It doesn't scale like everything else.
Also, I have updated the title size with rem units as well. Thanks for pointing that out.
Also, if you're looking to reduce eye–strain then you shouldn't reduce the contrast of the text with the background color.
Also, I hope you do buy a monitor with more than 480p res to understand that the world has moved on and there actually is more content on the monitor than you see rn.
Also irrelevant: https://baymard.com/blog/line-length-readability
Keep in mind the phrase "the customer is always right". This was written down by a product designer early in the 20th century (whose name I have sadly forgotten). This was the pithy phrase he used to summarize his primary point, which was that a product designer cannot allow himself to be angry at consumers for purchasing his competitor's products. If you think that your competitor's products are ugly or badly designed but consumers are purchasing them any way, you cannot simply write off the consumers as uneducated or lacking in taste. Instead, you have to recognize that you are the one who is wrong. Perhaps your elegant design has hampered the actual usability of the product, or increased the cost of the product beyond what the market can bear. Or perhaps your taste is simply different from the tastes of most people. Regardless of the reason, the consumers are spending real money on things so they're the ones who have the right to decide which design is better.
Now let's look at what your source for short line lengths says:
> It turns out that the subconscious mind is energized when jumping to the next line (as long > as it doesn’t happen too frequently, see above bullet point). At the beginning of every new > line the reader is focused, but this focus gradually wears off over the duration of the line > (“Typographie”, E. Ruder).
This must be the funniest thing I've read all month. The "mind is energized when jumping to the next line"? What tripe. If that's an accurate quote from something this E. Ruder wrote, then I know that E. Ruder is purely a BS artist. If it's a bad summary of what E. Ruder wrote, then the author of this "article" is a hack. It is quite probable that both are true. You're not going to become a great designer by reading this pre-digested pablum. You must perform your own research, or at least read the primary sources from people who have.
> Making an unfounded assertion that long lines cause eye strain doesn't make your css any better. I certainly don't suffer from such a debilitating limitation. Anyone who does can just make their window narrower, or bump up the font size in their browser.
He/She is certainly not providing any critical feedback.
I do apologize for lashing out, and I don't have any excuse to put in for that.
To me it is because I can't stand dark themes or pages that artificially restrict text flow width such that I have giant empty seas of nothingness on either side of my maximized browser window, so YMMV. The only thing really wrong with HN's current styling is that it uses microscopic fonts so I have to zoom in the page. Luckily browsers all remember text zoom settings.
This is why printed text with smaller type or larger paper will almost always employ larger margins, multiple columns, or both. In print, when a high per-page word count is desired, multiple columns is a go-to solution. But multiple columns for body copy is awkward on the web, since we're used to scrolling vertically—and real estate is free. So the best solution in most cases is simply to add margins.
[0] I like to point people to Matthew Butterick's excellent (and free) Practical Typography (https://practicaltypography.com/line-length.html), but any introductory typography book will have a section on line length.
Regarding the colors, I prefer the current ones as I'm a bright-mode guy.
Regarding max-width I think yours is too small, but you may have a point that HN's one is too large. I might play around with one that is just a little bit below the current one and see how I feel about it after using it for a while.
Nice work though. I am sure some will appreciate it.
What I also discovred is that I like consistency more. So instead of dark themes at night, I am enjoying the blue shift thing that brings the blue down a lot.
What I also discovered that drives me bonkers: how come I can trivially change brightness on a laptop monitor but none of my desktop screens? I badly want to bring them way down at night.
If DDC/CI support was more consistent and universal, this would be really easy to do.
https://en.wikipedia.org/wiki/Display_Data_Channel#OS_suppor...
In Windows I'm using a free app called Twinkle Tray that sits right in the Taskbar and you can use the mouse wheel or click it to increase/decrease the brightness. In Mac I use Brightness Slider, also free. These apps have been life savers!
I happen to like the density of information on HN versus the increased whitespace too. HN is compact but not too compact (for my tastes).
It's contextual, I'd recommend putting forth your work next time as an alternative and not _the alternative_.
On the other hand, the titles on the overview page are now giant and unnecessarily spaced out, making threads of interest three times harder to find. I can see hard limiting the width on text for longer text (e.g. comments) but on the front page it's unnecessary and contributes to the problem above.
For such an arrogant title it does not hold up - "does not follow every 2021 trend" =! "bad".
https://gist.github.com/blakewatson/dcfa8350f279b1fce7a7cd96...
Whether HN is an eyesore or not as is is a matter of personal opinion.
A better title I think would be "Dark mode for Hacker News" That doesn't put personal opinion/spin into the title.