Updated CSS files and a little design

[jordanful]

I noticed that the CSS needed a bit of love, so I rearchitected the files, removing Bootstrap and adding a Normalize file. I also cleaned up some of the design, adding some white space, letting the typography and layout breath a little bit.

Overall, these changes set us up for quicker design updates in the future, as well as freshen up the visuals a bit.

I think there's a lot more to do, especially at a higher level, but hoping to get in incremental changes.

[tcatm]

Looks good. On the "choose your wallet" page there's a bug with the popups: The link overlaps the text.

[saivann]

Thanks for your work. Look good to me also at a first glance, here is a quick list of things I think should be fixed.

Two recent changes in the CSS were ommited. They allow dir="ltr" on body without side effects on #menufor and to easily change the font-size for specific languages.
74fdbdf
224959f

Setting font-weight:bold for #menu >a.active changes the position of the following menus, not sure it's a good idea. The same effect than :hover would perhaps be more appropriate.

I would keep text-align:justify for paragraphs in .content as it creates a very clean result, especially near the buttons and on mobiles.

Increasing line-height everywhere is very good. I would only put it down to its original value in the preview bubbles for the choose-your-wallet section to fix the bug tcatm found.

:hover on #menufor on mobiles changes the position of the following menus, needs a little fix.

I think the #logo should have less margins on mobiles. The #content should also have no right-left margin. We need as much space possible on mobiles to give a good user experience.

I didn't test everything, did you test your work with most browsers? IE7-8-9, FF 3.5-20, Chrome, Safari 3-4, Opera 9-10 ? If not, I can take care of it.

[jordanful]

Thanks guys, I will work in these changes.

I have only tested in Chrome so far. I could use some help there. Saivann, how are you testing on mobile?

[saivann]

I only have an Android mobile that I use locally with my own server IP address. Since the changes I am suggesting are pretty trivial, I can make a pull request for your branch later if you prefer or if you don't have your own setup to test this. And for old browsers, I use Virtualbox to batch tests my changes on many operating systems / browsers.

[saivann]

It is just nitpicking, but we could perhaps keep the gradient on the #menufor > li:hover and li.active but drop the text-shadow just as you did? I thought that this was good looking in the previous design. Or perhaps otherwise, just a darker shade blue like the one in the gradient. More opinions is always appreciated.

Regardless, since you don't use bottom-border for #menufor anymore, I think you can remove border-bottom:3px solid #2c6fad for #menufor li:hover>a and increase the padding of 3px to 6px 8px 3px 8px.

[jordanful]

I could use some help with the mobile fixes, because I don't have an easy way to test that here.

• I think text-align: justify significantly hinders readability. It makes it so the kerning is dynamic, and not consistent, and therefore it is harder for the eye to traverse from letter-to-letter. There's a lot of text on this site and I'd like to make it as readable as possible. Anybody else have thoughts here, or research to back up either point?
• I will try a darker shade of blue — I think the contrast is ok, but I'm also on a retina screen, so I'm probably biased 😉
• I pushed fixes for the rest, please review when you get a moment.

[saivann]

With all comparative that I've done, I still stick to justify being much easier to read in that case. Our texts have a long enough width so that space between words remains consistent. But this is only my opinion. I've already applied text-align:left to override justify for titles, buttons and lists, because it is true that in these specific cases, it can produce ugly results.

The pull request I just sent you fixes everything I found, but doesn't change text-align. It works very well on all browsers and mobile.

As for the shade of blue, this is really not a requirement, I was just wondering :-)

[jordanful]

Cool, I merged your request. That's all from me (for now).

[saivann]

I've pushed this nice work in one single commit with some other small fixes included. I kept the existing text-align just so that this single question does not block other improvements that are very welcome. If you if feel that this point really needs discussion, feel free to open an issue for it so that we get a bit more feedback and thoughts.

Thanks for your help on this

[jordanful]

Sounds good. Ship it.

On Apr 6, 2013, at 6:37 PM, saivann notifications@github.com wrote:

I've pushed this nice work in one single commit with some other small fixes included. I kept the existing text-align just so that this single question does not blocks other improvements that are very welcome. If you if feel that this point really needs discussion, feel free to open an issue for it so that we get a bit more feedback and thoughts.

Thanks for your help on this

—
Reply to this email directly or view it on GitHub.

[IsaacMiller]

Good work, I like the changes. Colors are better, and the nav and buttons are much nicer. I think it's definitely headed in the right direction.