Use flexbox better to fix icon stretching

[casebenton]

Styles are now applied in a more clean way. Closes #15

@mythmon do you think this is an appropriate way to use flexbox rules?

[mythmon]

align-items and justify-content are only useful for things with display: flex. Items in a flex box (like the ones you have here) don't use these rules.

[casebenton]

How does it look now? I also condensed two similar classes into one for simplification

[casebenton]

@mythmon I found that having height: 40% conflicted with the flexbox rules in an unexpected way and made vertical alignment difficult. Even though the image div has only one child, the image, flexbox still seems to be a good way to center the child vertically, so that it lines up with the children of the other adjacent sibling divs (where one of the siblings has multiple children). Is that alright for me to do?

[mythmon]

I made a prototype version of this UI that I think uses flexbox well. I didn't look a lot at your code, and mostly worked off the screenshot you gave here. Does this help clear up what I was talking about? If you'd like, I can go over the interesting parts of this tomorrow.

PS: If it doesn't load right, trying making a whitespace change to the CSS section. I think there is a bug that makes it not render right away.

[casebenton]

Thanks! This example helps a lot. I can also see the value in breaking the css up into "layout" and "style" sections. That would be great if we could talk about it tomorrow. I think I'll also give it a try now.

[casebenton]

@mythmon do you think that flexbox is used well now?

@Osmose what do you think of the padding and general layout of elements?

[mythmon]

Code looks good to me. r+

[casebenton]

r=Osmose