Hacker News Reader

Comment by glennpratt | Hacker News Reader

The sidebar makes this barely readable on Pixel 2. The markdown is easy to read:

https://github.com/stapelberg/hugo/blob/master/content/posts...

Sorry about that! I’m not great with Web Design, as you can tell. If anyone wants to contribute a CSS fix, or just a pointer to a good article on how to fix this, I’d be very grateful!

You could add the following CSS to the container (`.row` here but you should make the class name a bit more specific) which will stack the sidebar and your content into a backwards column (so the sidebar shows up after scrolling past the content, which looks and feels ok for a quick & scrappy mobile fix.

    display: flex;
    flex-direction: reverse-column;

Put that in a media query to only target phones/small devices.

Feel free to message me if you're confused and would prefer a fast PR, but you strike me as someone who wouldn't mind learning a bit & I'm in Morocco with limited internet.

edit: I would also move the branding (name & logo) above the content so people know who they're reading. And adjust the margins a bit. Frontend is Fun.

"Put that in a media query to only target phones/small devices."

Tone: Honest question. What's that, exactly?

I've been trying to figure that out off and on for the last, oh, 5 or 6 years, and I keep bouncing off the problem as being too complicated to be worth it for my personal site. If there's a clean answer that has developed in the time since I basically gave up, I'd (again, no sarcasm) love to hear it. But I'd probably need a link to something; Google is clogged with old stuff here.

Media queries are ways to only apply a bunch of CSS on clients that fulfill some conditions.

If I write:

     @media (max-width: 500px) {
        p {
           font-style: italic;
        }
     }

It will turn the text in p tags italic on small screens.

Thank you so much! Committed your suggestion in https://github.com/stapelberg/hugo/commit/3a7227fef47fc49550....

Let me know your Paypal, if you have any, and I’ll gladly invite you for a virtual coffee as a sign of my gratitude :)

All good! Feel free to shoot a small donation to the Internet Archive or we can grab a coffee if you ever find yourself in NYC.

Glad it worked for you!

Besides the lack of responsive sidebar, never justify text on the internet. Particularly for blog posts.

With hyphens enabled it's not that bad.

Reader mode in Firefox works like a charm.

You can also enable reader mode in Chrome if you turn on its flag in 'chrome://flags'.

Which flag is that? I don't see anything when searching for "read".

the content is very narrow on iphone6 as well, but safari readability view suffices

Reply on news.ycombinator.com