Switch to flexbox for layout rather than using positioning and margins

[KarlAustin]

These two commits switch the normal layout initially to flexbox and then the reverse layout. It removes quite a bit of CSS, especially for the reverse layout and improves the layout of the TOC, menu and content.

Addresses: https://github.com/lukeorth/poison/issues/52

Allows future easier addressing of: https://github.com/lukeorth/poison/issues/51

Normal Layout

Reverse Layout

Narrow Width

As always, happy to take feedback, especially if anyone spots any bugs.

[KarlAustin]

This is what it currently looks like and the same screen:

Normal

Reverse

[lukeorth]

Thank you, @KarlAustin - this looks great. I definitely prefer the flexbox approach over what I was using before.

[lukeorth]

@KarlAustin I merged the changes without fully testing, and it looks like change removes the scrollbar on the sidebar menu. I'll have to look into it a bit more, but if we can get that fixed then I definitely want to incorporate your changes. I've reverted it for now though until I can diagnose the issue. :+1:

[KarlAustin]

@KarlAustin I merged the changes without fully testing, and it looks like change removes the scrollbar on the sidebar menu. I'll have to look into it a bit more, but if we can get that fixed then I definitely want to incorporate your changes. I've reverted it for now though until I can diagnose the issue. 👍

Damn it, that's because I'm working on a 4k screen. I can sort that this week.

[KarlAustin]

If you checkout my fork now, you should see that I've fixed the sidebar issue and also another issue on mobile view that I found. Sorry about that.

[lukeorth]

Wow that was quick! Thank you, this looks a lot better. I really like having the page's scrollbar next to the content. It looks much cleaner.

The only issue I'm seeing now is on the list pages. It looks like the dots between a post's title and its published date are getting squished together.

Before:

After:

Admittedly the method I'm using to add the dots is a little hacky (just using background-image properties). Because the dots don't actually exist in the DOM, my guess is that flexbox isn't detecting them (and therefore shrinking everything). Any thoughts on how to fix it?

[KarlAustin]

Will try and have a look this weekend if I can.

[KarlAustin]

[EDIT: Doh! I know exactly why mine works, I've got a stupidly long title in there]

I've taken a look, and interestingly I'm not seeing that on my copy here:

If I look in the current master branch in poison.css I see:

Which takes care of it already with flex and flex-grow.

[KarlAustin]

Okay, I think we should have this nailed now. Really simple fix. Tested with normal and reverse on normal size and mobile.

[lukeorth]

Thanks, @KarlAustin -- this looks fantastic. I am reverting my revert and getting this added in. Thanks again for all the work you've put into this. :100: