Add Popovers and Links for Most of the Features on the Front Page

[chase]

Addresses #18

[balupton]

Looks good. I am concerned about the zoom changes though, what was the intention behind them?

As one thing to notice is that for iOS devices they have a minimum font size setting, so zoom is how we make sure the font is small enough.

Wish there was a way so we can see screenshots of this against all different platforms... @supersym do you know of a service that allows such a thing?

Also, sorry for the late reply on this - I've been fully worked out recently - I will endeavour to do whatever I can to offer more autonomy inside the community going forward, as things like this should never happen.

[chase]

Looks good. I am concerned about the zoom changes though, what was the intention behind them?

The zoom changes were made because they caused text distortion and made the website very hard to read on the Android devices I own. Also, when resizing the window in Chrome on my MacBook Pro, it flows a lot better without the zoom when going from full size to the minimum possible window size.

Wish there was a way so we can see screenshots of this against all different platforms... @supersym do you know of a service that allows such a thing?

Did you ever get a chance to try the services provided by CrossBrowserTesting.com? I understand the pricing may be quite steep, but there is always the free trial.

Also, sorry for the late reply on this - I've been fully worked out recently - I will endeavour to do whatever I can to offer more autonomy inside the community going forward, as things like this should never happen.

Don't worry about it! It's the website for your project. Regardless, your earning a living should take priority.

[balupton]

Cool. Will review now.

[balupton]

Before: http://crossbrowsertesting.com/users/43777/screenshots/z0a63b44ae04894e92df/public

After: http://crossbrowsertesting.com/users/43777/screenshots/z52de30efe24c0f846c5/public

The only issue is with the iPhone it seems. The icons are two rows and crammed together, rather than utilising the space more intelligently. When that is fixed, we'll be good to go!

It's up on http://docpad-staging.herokuapp.com/

[chase]

After: http://crossbrowsertesting.com/users/balupton/screenshots/169869/212771

@balupton The After: link seems to be a private URL.

[balupton]

Whoops. Fixed.

http://crossbrowsertesting.com/users/43777/screenshots/z52de30efe24c0f846c5/public

[chase]

@balupton rather than reducing the size of the icons and the titles to a minimal, unreadable state, we could use a carousel. This would also allow us to present the description which would normally require a hover over. Any thoughts on that?

[balupton]

I think the size of them are fine. Just need more spacing between the icons.

[chase]

Hm, after giving more spacing between the icons, I noticed that even with just 1 em of spacing the icons and icon labels still made quite a bit of confusion. The spacing still led to the "Versioning Skeletons Agnostic" issue you mentioned to me. Increasing the spacing any further led to 3 lines of icons with 2 icons on top, 1 icon in the center, and 2 icons on the bottom. Obviously, that will take up unnecessary vertical space.

The carousel approach solves this issue, while also making the page more suitable for touch-based devices where the descriptions would not be visible. Thus, I figured that the carousel approach would be fine for the smaller devices.

With the advent of CSS3, this would be a super-simple feat to accomplish. It would require any JavaScript tweening voodoo. In fact, I can probably make a functioning carousel tomorrow without even modifying the HTML.

[chase]

@balupton, I've fixed the spacing as requested. Feel free to merge it when you see fit! As for the carousel, I'll put that into another feature branch later.