5 ms·

The sidebar makes this barely readable on Pixel 2. The markdown is easy to read: https://github.com/stapelberg/hugo/blob/master/content/posts/2019-03-10-debian

The sidebar makes this barely readable on Pixel 2. The markdown is easy to read: https://github.com/stapelberg/hugo/blob/master/content/posts/2019-03-10-debian-winding-down.markdown https://github.com/stapelberg/hugo/blob/master/content/posts...

deleted 8y ago
[deleted]
deleted 8y ago
[deleted]
chapium 8y ago
the content is very narrow on iphone6 as well, but safari readability view suffices
gjasny 8y ago
Reader mode in Firefox works like a charm.
- chacha2 8y ago
  You can also enable reader mode in Chrome if you turn on its flag in 'chrome://flags'.
  - amdavidson 8y ago
    Which flag is that? I don't see anything when searching for "read".
secure 8y ago
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!
- switz 8y ago
  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.
  - jerf 8y ago
    "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.
    - kryptiskt 8y ago
      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.
  - secure 8y ago
    Thank you so much! Committed your suggestion in https://github.com/stapelberg/hugo/commit/3a7227fef47fc49550c83e05d7ee7f626cbdfaee 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 :)

deleted 8y ago

[deleted]

deleted 8y ago

[deleted]

chapium 8y ago

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

gjasny 8y ago

Reader mode in Firefox works like a charm.

chacha2 8y ago
You can also enable reader mode in Chrome if you turn on its flag in 'chrome://flags'.
- amdavidson 8y ago
  Which flag is that? I don't see anything when searching for "read".

secure 8y ago

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!

switz 8y ago
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.
- jerf 8y ago
  "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.
  - kryptiskt 8y ago
    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.
- secure 8y ago
  Thank you so much! Committed your suggestion in https://github.com/stapelberg/hugo/commit/3a7227fef47fc49550c83e05d7ee7f626cbdfaee 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 :)