Adds a Hopscotch tour of the new navigation introduced in #1420

[mdlinville]

This patch depends on #1420. It adds a 4-step on-screen tour of the navigation enhancements introduced in #1474 and #1420. The tour is implemented using http://linkedin.github.io/hopscotch/.

The tour is triggered by clicking on a button, which displays in the upper right of the new tab bar. Because the tour is expected to be run from the welcome page, which doesn't have an in-page TOC, the 4th step of the tour, which shows you the in-page TOC, goes to /learn/index.html. When you end the tour, or if you stop it before it's finished, you are returned back to the page where you started.

I think it would be great to re-do the tour when we have the big site re-skin, as well.

Don't merge this until #1420 is merged! I wanted to make the PR now to let Netlify build it, so people could try it out.

[mdlinville]

For these three lines, I really only need to do it this way if the page they start the tour on doesn't have the div #side-toc. But I'm not sure how to do that without duplicating the whole var tour with two variants. @jsouth or @johndmulhausen do you have any suggestions?

[mdlinville]

I am not attached to the text in the titles, contents, buttons, etc. I am sure others can come up with better text.

[londoncalling]

@mstanleyjones I think this is great! It is such a nice, concise tour, that it might not be a bad idea to extend it a bit.

How about adding a step or even 4 more to briefly describe the content on each of the tabs? It will even better queue people that there are several tabs there, and give them an idea of what they will find on each one.

[mdlinville]

@londoncalling PTAL at the latest version when it builds. I added a step for each of the horizontal tabs and I also tweaked the alignment of the arrows on some of the bubbles.

[mdlinville]

I think "CLI" and "command" refer to the same thing, right? Other than that, these changes look good, @londoncalling.

[mdlinville]

Rebased on current iteration of tabs branch and squashed commits. Let me try my hand at theming.

[londoncalling]

@mstanleyjones I had some thoughts about this last night:

1. I think the text/font should be bigger. Is that do-able? (Not the headings of each card but the descriptions.)

2. the description that points to the right side on-page menu should definitely go to another page. Any one of these would be nice examples:

   • Compose v3 reference

   • Compose file versions and upgrading

   • Dockerfile reference

   • Docker run reference

[londoncalling]

please see my other comments in the main conversation thread ^^

[londoncalling]

@mstanleyjones looking good! I would just say some of the content could be shortened up, i.e., no need to repeat titles of the tabs etc. in the content twice. I can make the changes here, but why does it say "some checks not successful"? Should I go ahead and make changes and not worry about that?

[johndmulhausen]

Can we change the font face of the Tour button to be the more plain-jane, serious font used on the buttons for the Getting Started links on the front page? There's just something off about the way that button looks now with that font. I know you're working on the centering/positioning too, so -- while you're in there?

[mdlinville]

Addressed feedback from @johndmulhausen and @Raphaelbouchard, rebased on tabs branch as of today.

I am still not happy with how the CTA looks! I'm not sure if it really needs a border. I made it always wrap the text just so I could control the vertical alignment. Had to monkey with the line height and font size.

[londoncalling]

@mstanleyjones okay, let me know what you think of the new wording :-) the tour looks great, you are brilliant

[mdlinville]

Closed in favor of #1420