make online docs responsive with a new sphinx theme

[orbeckst]

The current online docs are styled with the default sphinx theme, which does not look very good on mobile devices. We should look into adapting a more responsive theme such as sphinx-bootstrap-theme, which would include proper branding (adding logo, using the MDAnalysis colors).

An alternative is the read-the-docs theme but I am not a huge fan of it...

[kain88-de]

Since we now settled the style guide issue #404 we should choose a style that looks good with numpy-style doc strings since we want to slowly move all documentation to it.

[hainm]

read-the-docs theme seems to be better with np doc

http://mdtraj.org/latest/

Bootstrap color, layout are good but it uses pink, purple
http://amber-md.github.io/pytraj/doc/build/html/index.html

[orbeckst]

On 26 Oct, 2015, at 16:00, Hai Nguyen wrote:

read-the-docs theme seems to be better with np doc

I'm really bored with the rtd theme and would prefer something more distinct.

[hainm]

I am not a fan of rtd either, trying to combine its style with boostrap.

[kain88-de]

The theme of the current website looks quite nice. Could we use that?

[orbeckst]

I think the answer is "not easily" because my (limited) understanding is that a sphinx theme has to be customized to work with sphinx. I am sure that a skilled web developer could easily build a sphinx theme for us that looks like the minimalist Pool Hyde theme that we're using.

[orbeckst]

I have recently been playing with the sphinx bootstrap theme which can easily be customized with bootswatch CSS themes. It's as simple as

pip install sphinx_bootstrap_theme

and adding to the sphinx conf.py

import sphinx_bootstrap_theme
# ...

# Activate the theme.
html_theme = 'bootstrap'
html_theme_path = sphinx_bootstrap_theme.get_html_theme_path()

# theme options
html_theme_options = {
   # ...
   'bootswatch_theme': "spacelab",
   # ...
}

I think this has a lot of potential. Pick a theme, tweak the colors to agree with the MDAnalysis color palette

• MDA orange: #ff9200
• MDA gray: #FFC980
• MDA black: #000000
• MDA white: #FFFFFF

and we should have a nice modern theme.

[hainm]

Seems like we have similar taste

http://amber-md.github.io/pytraj/latest/index.html