Fixes to the docs theme

- Added msmb_theme dependency in workflow
- Added sphinx_rtd_theme to requirements.yaml
- Added new custom.css and MDA logos
- Updated conf.py

.github/workflows/docs.yaml

@@ -38,7 +38,7 @@ jobs:
 
     - name: install dependencies
       run: |
-        pip install MDAnalysis
+        pip install MDAnalysis msmb_theme
 
     - name: build docs
       run: |

docs/requirements.yaml

@@ -3,8 +3,8 @@ channels:
   - conda-forge
   - default
 dependencies:
-  - python
   - pip
+  - python
   - sphinx==5.3.0
   - sphinx_rtd_theme
   - sphinxcontrib-bibtex

docs/source/_static/custom.css

@@ -0,0 +1,206 @@
+/* override css for readable.css */
+
+/*  styles/fonts to match http://mdanalysis.org (see public/css) */
+/* MDAnalysis orange: #FF9200 */
+/* MDAnalysis gray: #808080 */
+/* MDAnalysis white: #FFFFFF */
+/* MDAnalysis black: #000000 */
+/* Darker orange: e76900 */
+/* Even darker orange: #a24900 */
+/* RTD dark grey: #343131 */
+/* RTD light grey: #e6e6e6 */
+
+/* -- page layout --------------------------------------------------------- */
+
+body {
+    font-family: 'PT Sans', Helvetica, Arial, 'sans-serif';
+    font-size: 17px;    
+}
+
+div.body {
+    color: #000000;
+}
+
+div.sphinxsidebar a:hover {
+    text-decoration: none !important;
+}
+
+div.sphinxsidebar p {
+    color: #808080;
+}
+
+/* Home MDAnalysis colour */
+.wy-side-nav-search > a {
+    color: #343131;
+}
+
+/* Side MDAnalysis version colour */
+.wy-side-nav-search > div.version {
+    color: #808080;
+}
+
+/* Menubar caption colour */
+div.wy-menu-vertical span.caption-text {
+    color: #FF9200;
+}
+
+/* Mobile layout menubar option */
+nav.wy-nav-top {
+    background: #343131;
+}
+
+/* Menu search bar outline (default blue) */
+.wy-side-nav-search input[type="text"] {
+    border-color: #808080;
+}
+
+
+/* -- body styles --------------------------------------------------------- */
+
+/* Different coloured links for sidebar vs body) */
+div.rst-content a {
+    color: #FF9200;
+    text-decoration: none;
+}
+
+div.rst-content a:visited {
+    color: #FF9200;
+}
+
+a:hover {
+    color: #FF9200 !important;
+    text-decoration: underline;
+}
+
+
+pre, tt, code {
+    font-family: Menlo, Monaco, 'Courier New', monospace
+}
+
+
+div.body h1 {
+    font-weight: bolder;
+}
+
+a.headerlink {
+    color: #808080;
+    font-size: 0.8em;
+    padding: 0 4px 0 4px;
+    text-decoration: none;
+}
+
+a.headerlink:hover {
+    background-color: #808080;
+    color: #fff;
+}
+
+/* ------- admonition boxes ------- */
+
+div.admonition {
+    margin: 10px 0px;
+    padding: 10px 10px;
+}
+
+div.admonition p.admonition-title {
+    font-size: 100%;
+    font-weight: bolder;
+}
+
+/* ----- Tables ----- */
+
+/* override table width restrictions */
+/* wrap tables instead of scrolling */
+@media screen and (min-width: 767px) {
+
+    .wy-table-responsive table td, .wy-table-responsive table th {
+       /* !important prevents the common CSS stylesheets from overriding
+          this as on RTD they are loaded after this stylesheet */
+       white-space: normal !important;
+    }
+
+    .wy-table-responsive {
+       overflow: visible !important;
+       max-width: 100% !important;
+    }
+ }
+
+/* ----- Field lists ------ */
+
+.section > dl.field-list {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+}
+
+dl.field-list > dt::after {
+    content: ":";
+}
+
+.rst-content dl:not(.docutils) dt {
+    background: none;
+    color: #000000;
+    border-top: none;
+}
+
+.section > dl.field-list dt {
+    margin: 0;
+    padding: 0;
+    flex-basis: 20%;
+    display: block;
+}
+
+.section > dl.field-list > dd {
+    flex-basis: 70%;
+    margin: 0;
+}
+
+.section > dl.field-list > dd p {
+    margin: 0;
+}
+
+/* ----- MDAnalysis coloured elements ------ */
+
+.rst-content dl.class dt, .rst-content dl.function dt {
+    color: #ca6500;
+    background: #FFEBD0;
+    border-top: solid 3px #FF9200;
+}
+
+.rst-content .viewcode-link, .rst-content .viewcode-back {
+    color: #808080;
+}
+
+.rst-content .guilabel {
+    background: #efefef;
+    border: 1px solid #808080;
+}
+
+
+.rst-content .seealso p.admonition-title {
+    background: #808080;
+}
+
+.rst-content .seealso {
+    background: #e3e3e3;
+}
+
+.rst-content  .error p.admonition-title, .rst-content  .warning p.admonition-title {
+    background: #F45F4B;
+}
+
+.rst-content .error, .rst-content .warning {
+    background: #FFEEED;
+}
+
+.rst-content .caution p.admonition-title, .rst-content .note p.admonition-title, .rst-content .important p.admonition-title  {
+    background: #FF9200;
+}
+
+.rst-content .caution, .rst-content .note, .rst-content .important {
+    background: #FFEBD0;
+}
+
+.rst-content code:not(.xref).literal {
+    color: #ca6500;
+}

docs/source/conf.py

@@ -18,7 +18,10 @@
 sys.path.insert(0, os.path.abspath('../..'))
 
 
+from collections import OrderedDict
 import mdahole2
+import msmb_theme
+import sphinx_rtd_theme
 # -- Project information -----------------------------------------------------
 
 project = 'mdahole2'
@@ -95,7 +98,75 @@
 # The theme to use for HTML and HTML Help pages.  See the documentation for
 # a list of builtin themes.
 #
-html_theme = 'sphinx_rtd_theme'
+html_theme = 'msmb_theme'
+
+html_theme_path = [
+    msmb_theme.get_html_theme_path(),
+    sphinx_rtd_theme.get_html_theme_path()
+]
+
+# styles/fonts to match http://mdanalysis.org (see public/css)
+#
+# /* MDAnalysis orange: #FF9200 */
+# /* MDAnalysis gray: #808080 */
+# /* MDAnalysis white: #FFFFFF */
+# /* MDAnalysis black: #000000 */
+
+color = {'orange': '#FF9200',
+         'gray': '#808080',
+         'white': '#FFFFFF',
+         'black': '#000000', }
+
+extra_nav_links = OrderedDict()
+extra_nav_links['MDAnalysis'] = 'http://mdanalysis.org'
+extra_nav_links['docs'] = 'http://docs.mdanalysis.org'
+extra_nav_links['wiki'] = 'http://wiki.mdanalysis.org'
+extra_nav_links['user discussion group'] = 'http://users.mdanalysis.org'
+extra_nav_links['GitHub'] = 'https://github.com/mdanalysis'
+extra_nav_links['@mdanalysis'] = 'https://twitter.com/mdanalysis'
+
+html_theme_options = {
+    'canonical_url': '',
+    'logo_only': True,
+    'display_version': True,
+    'prev_next_buttons_location': 'bottom',
+    'style_external_links': False,
+    'style_nav_header_background': 'white',  # '#e76900', # dark orange
+    # Toc options
+    'collapse_navigation': True,
+    'sticky_navigation': True,
+    'navigation_depth': 4,
+    'includehidden': True,
+    'titles_only': False,
+}
+
+
+# The name of an image file (within the static path) to use as favicon of the
+# docs.  This file should be a Windows icon file (.ico) being 16x16 or 32x32
+# pixels large.
+html_favicon = "_static/logos/mdanalysis-logo.ico"
+html_logo = '_static/logos/mdanalysis-logo-thin.png'
+
+# html_context = {
+#     'versions_json_url': 'https://userguide.mdanalysis.org/versions.json'
+# }
+
+# Add any paths that contain custom static files (such as style sheets) here,
+# relative to this directory. They are copied after the builtin static files,
+# so a file named "default.css" will overwrite the builtin "default.css".
+html_static_path = ['_static']
+html_css_files = ['custom.css']  # , 'readable.css']
+
+# Custom sidebar templates, maps document names to template names.
+# alabaster sidebars
+html_sidebars = {
+    '**': [
+        'about.html',
+        'navigation.html',
+        'relations.html',
+        'searchbox.html',
+    ]
+}
 
 # Theme options are theme-specific and customize the look and feel of a theme
 # further.  For a list of options available for each theme, see the