Thanks Arturo!
- You probably need a bit more padding around left and right of the columns
(10-20px) and a little bit more top and bottom (I think you already added some padding, but it still seems a bit too clutterred in my opinion)
There was a 5px padding between the columns and 15px vertically. Bumping the column padding to 10px indeed looks better.
Shrinking the icons and making the margin apply to them (rather than just the description) looks a lot better so gonna move forward with the icons for now.
- I like the idea of using icons for the links to PGP keys and twitter, but
I would put them below the IRC handle (and not in the upper right corner). I would also use a monochrome icon set instead of something with colors. An icon set I usually use is font-awesome: http://fontawesome.io/. I think for those two items you can probably use: http://fontawesome.io/icon/key/ and http://fontawesome.io/icon/twitter/ or http://fontawesome.io/icon/twitter-square/.
Hmmm, just tried moving the icons there but didn't seem to work as well imho. I can provide before/after screenshots if folks are curious how this looks. Monochrome looked good on Atlas since it used a consistent aesthetic. Not so sure about here though.
- How long do you expect the description text to be? If you anticipate it
being quite long, maybe it’s worth trying out a single column layout to avoid the description text overflowing and creating asymetry in the boxes.
If the descriptions are very long they wrap below the photo so I'm keeping description length below that. I realize I could use a clear to avoid the wrap but I think having this limitation is a good thing since it prevents anybody's description from becoming TL;DR.
- For the placeholder image (the onion icon) I would also go for something
monochrome to avoid it creating too much visual overload (see: https://github.com/TheTorProject/tor-media/blob/master/Onion%20Icon/Black_Ic...).
Hmmm. Gave it a try but honestly not sure monochome onions looks better...
https://www.atagar.com/transfer/tmp/people_page-monochrome_onion.png
If folks want this though that's fine.
Maybe even give it a give it an `opacity: 0.8` to make it even more subdle. If when trying that out it doesn’t look right and you still want to use the colored one, be sure to use the official color icon version (https://github.com/TheTorProject/tor-media/blob/master/Onion%20Icon/Onion_Co...) that doesn’t have the weird shading on the onion leafs and body of the onion.
Oooh, that does look better. I had to scale up the trac icon to make it work - svg export is a lot more crisp.
Do you have the css and source of these? That would be useful to try some of these ideas out.
Yup, here it is.
https://gitweb.torproject.org/project/web/webwml.git/tree/about/en/corepeopl...
Thanks for the suggestions Arturo!