Styling Annotations

[dmolsen]

The dev branch now has a working annotations solution based upon the original work from your mobile first demo. From a styling perspective I think the following needs to happen:

1. Create the annotations styles for the styleguide and view-all templates. The elements that need to be styled on these views are: div.annotations which holds all of the annotations for a pattern, div.annotation which holds an individual annotation within div.annotations, div.annotation h3 and div.annotation p which should be self-explanatory.
2. Create the annotations style for the slider pop-ups. This is the #comment-container stuff in styleguide.css.
3. Decide if we want to offer something that's not so mystery meat on the pattern-only view. Mousing over elements to find out if they have annotations is sort of annoying. Maybe something more like the top graphic here? The tray element won't work for us but maybe the numbering would.

All of the annotation-related JS is now in public/styleguide/js/annotations-viewer.js and public/styleguide/js/annotations-pattern.js. The data is in source/_data/annotations.js. It's moved when the site is generated.

Note that CSS cannot be injected via JS. That breaks on the Apache-less version of PL because of security policies. I ripped out the styleguide.css injection in styleguide.js. For now I've hard coded the annotation pointer style in the head of the pattern header. It shouldn't matter that patterns are dirty since we 1) will be offering a code view and 2) we need to keep them dirty for all the JS stuff to work in Apache-less mode. We'll have to swing back and fix the colors pattern which is now broken without styleguide.css.