<html><head><style>body{font-family:Helvetica,Arial;font-size:13px}</style></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;"><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;">Some comments off the top of my head (it looks great BTW!)</div><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;"><br></div><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;">- 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)</div><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;"><br></div><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;">- 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).</div><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;">I would also use a monochrome icon set instead of something with colors. An icon set I usually use is font-awesome: <a href="http://fontawesome.io/">http://fontawesome.io/</a>. I think for those two items you can probably use: <a href="http://fontawesome.io/icon/key/">http://fontawesome.io/icon/key/</a> and <a href="http://fontawesome.io/icon/twitter/">http://fontawesome.io/icon/twitter/</a> or <a href="http://fontawesome.io/icon/twitter-square/">http://fontawesome.io/icon/twitter-square/</a>.</div><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;"><br></div><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;">- 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.</div><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;"><br></div><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;">- For the placeholder image (the onion icon) I would also go for something monochrome to avoid it creating too much visual overload (see: <a href="https://github.com/TheTorProject/tor-media/blob/master/Onion%20Icon/Black_Icon.svg">https://github.com/TheTorProject/tor-media/blob/master/Onion%20Icon/Black_Icon.svg</a>). Maybe even give it a give it an `opacity: 0.8` to make it even more subdle.</div><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;">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 (<a href="https://github.com/TheTorProject/tor-media/blob/master/Onion%20Icon/Onion_Color.svg">https://github.com/TheTorProject/tor-media/blob/master/Onion%20Icon/Onion_Color.svg</a>) that doesn’t have the weird shading on the onion leafs and body of the onion.</div><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;"><br></div><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;">Do you have the css and source of these? That would be useful to try some of these ideas out.</div><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;"><br></div><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;">I am also adding to cc Elio that may have further feedback in case he missed this thread.</div><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;"><br></div><div id="bloop_customfont" style="font-family:Helvetica,Arial;font-size:13px; color: rgba(0,0,0,1.0); margin: 0px; line-height: auto;">~ Arturo</div> <br><p class="airmail_on">On July 9, 2017 at 8:18:39 AM, Damian Johnson (<a href="mailto:atagar@torproject.org">atagar@torproject.org</a>) wrote:</p> <blockquote type="cite" class="clean_bq"><span><div><div></div><div>Hi all, here's some screenshots so folks can give their two cents on<br>the styling...<br><br>* Current styling, which lists twitter and key links.<br><br>https://www.atagar.com/transfer/tmp/people_page-current.png<br><br>* Previous styling, which included job descriptions.<br><br>https://www.atagar.com/transfer/tmp/people_page-with_labels.png<br><br>* Replacing the twitter and key links with icons. This makes the page<br>less cluttered but not sure if I like it better or not.<br><br>https://www.atagar.com/transfer/tmp/people_page-with_icons.png<br><br>Thoughts welcome. Again, I'm not a web designer so not really sure what's best.<br></div></div></span></blockquote></body></html>