layout.html

{#
    sphinxdoc/layout.html
    ~~~~~~~~~~~~~~~~~~~~~

    Sphinx layout template for the sphinxdoc theme.

    :copyright: Copyright 2007-2019 by the Sphinx team, see AUTHORS.
    :license: BSD, see LICENSE for details.
#}
{%- extends "basic/layout.html" %}

{# put the sidebar before the body #}
{% block sidebar1 %}{{ sidebar() }}{% endblock %}
{% block sidebar2 %}{% endblock %}

{% block extrahead %}
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,700'
          rel='stylesheet' type='text/css' />
{{ super() }}
{%- if not embedded %}
    <style type="text/css">
      table.right { float: right; margin-left: 20px; }
      table.right td { border: 1px solid #ccc; }
      {% if pagename == 'index' %}
      .related { display: none; }
      {% endif %}
    </style>
    <script>
      // intelligent scrolling of the sidebar content
      window.onscroll = () => {
        const sb = document.getElementsByClassName('sphinxsidebarwrapper')[0]
        const sbh = sb.offsetHeight
        const offset = document.getElementsByClassName('sphinxsidebar')[0].offsetTop;
        const wintop = window.scrollTop;
        const winbot = wintop + window.offsetHeight
        const curtop = sb.offsetTop;
        const curbot = curtop + sbh;
        // does sidebar fit in window?
        if (sbh < window.offsetHeight) {
          // yes: easy case -- always keep at the top
          sb.style.top = Math.min(Math.max(0, wintop - offset - 10), window.innerHeight - sbh - 200)
        } else {
          // no: only scroll if top/bottom edge of sidebar is at
          // top/bottom edge of window
          if (curtop > wintop && curbot > winbot) {
              sb.style.top = Math.max(wintop - offset - 10, 0)
          } else if (curtop < wintop && curbot < winbot) {
              sb.style.top = Math.min(winbot - sbh - offset - 20, window.innerHeight - sbh - 200)
          }
        }
      }
    </script>
{%- endif %}
{% endblock %}

{% block rootrellink %}
        <li><a href="{{ pathto('index') }}">Sphinx home</a>&#160;|</li>
        <li><a href="{{ pathto('contents') }}">Documentation</a> &#187;</li>
{% endblock %}

{% block header %}
<div class="pageheader">
  <ul>
    <li><a href="{{ pathto('index') }}">Home</a></li>
    <li><a href="{{ pathto('usage/installation') }}">Get it</a></li>
    <li><a href="{{ pathto('contents') }}">Docs</a></li>
    <li><a href="{{ pathto('development/index') }}">Extend</a></li>
  </ul>
  <div>
    <a href="{{ pathto('index') }}">
      <img src="{{ pathto('_static/sphinxheader.png', 1) }}" alt="SPHINX" />
    </a>
  </div>
</div>
{% endblock %}