Layout and style the FiftyOne docs

[brimoor]

Here's a v1 design for our docs from our designer:

• Light theme: https://projects.invisionapp.com/share/NPXHRK5D4JU#/screens/419572535
• Dark theme: https://projects.invisionapp.com/share/NPXHRK5D4JU#/screens/419627649

Personally, I like the colors/styling of the light theme the best:

The more important point is making sure the various components of the docs are laid out in a user-friendly way.

For reference, here's a tutorial from PyTorch:

and here's a tutorial from TF:

Distilling all of this, here are the page elements that I like:

• Top bar allows for selection between Get Started, Docs, Tutorials, GitHub, etc
• When viewing a page (tutorial or API docs), left navbar shows a top-level-only list of other tutorials/modules that one can click on. The detailed table of contents for the current page appears on the right side bar
• Search bar in upper right, with GitHub link to the right of it
• Tutorials have View source on GitHub and Download notebook links

Discussion is welcome!

[lethosor]

PyTorch's right sidebar nav is implemented by a custom theme: https://github.com/pytorch/pytorch_sphinx_theme/blob/master/pytorch_sphinx_theme/layout.html
Should be possible to adapt for our purposes

[brimoor]

@lethosor I think it's fine to get started based on the PyTorch theme (with our colors). Feel free to look for others if you'd like.

One of the less ideal things about the PyTorch RHS bar is that it doesn't automatically update to reflect the current section that you're reading. TF's does, for example. Also, I personally find the orange bar on the TF one helpful to draw attention to the presence of the table of contents over there. But, these are relatively minor things- the big goal is to avoid subsections of a page from appearing on the left, which is very cluttered.

A question we have is whether we want our top-level sections (user guide, tutorials, etc) to appear as choices across the top bar, or if the LHS table of contents is simple enough that all of that content can be listed over there. Like https://prodi.gy/docs, for example. Open for discussion

[brimoor]

@lethosor also, one important thing is to include the header and footer from the main website when rendering all of the doc pages.

[brimoor]

Resolved by #228 and #236!