3 ms·

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 thi

by 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 :)
  - switz 8y ago
    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!
dmix 8y ago
Besides the lack of responsive sidebar, never justify text on the internet. Particularly for blog posts.
- toastal 8y ago
  With hyphens enabled it's not that bad.

by 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 :)
- switz 8y ago
  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!

dmix 8y ago

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

toastal 8y ago
With hyphens enabled it's not that bad.