Enhance Documentation Theme

Improvements on our bootstrap 4 theme for sphinx.

docs/_static/instaloader.css

@@ -1,78 +0,0 @@
-@import url(bootstrap-4.1.3.min.css);
-a {
-  color: #008d06; }
-  a:hover, a.current, a.active {
-    color: #f48400; }
-  a.current, a.active {
-    font-weight: 500; }
-
-.doc-sidebar a:hover, .modal-body a:hover {
-  text-decoration: none; }
-
-code {
-  color: #212529; }
-
-.highlight {
-  border-radius: 0.3em; }
-  .highlight pre {
-    padding: 0.7em;
-    color: #fff; }
-  .highlight .c1 {
-    color: #666; }
-  .highlight .k, .highlight .kc, .highlight .kn, .highlight .ow {
-    color: #008d06; }
-  .highlight .nb, .highlight .ne, .highlight .nf, .highlight .vm {
-    color: #f48400; }
-  .highlight .s1, .highlight .s2, .highlight .sa, .highlight .se, .highlight .si, .highlight .mi {
-    color: #ff7efd; }
-  .highlight .c1, .highlight .nf, .highlight .sa, .highlight .se, .highlight .si {
-    font-style: italic; }
-  .highlight .k, .highlight .kn, .highlight .ow {
-    font-weight: bold; }
-
-.doc-content {
-  padding-top: 0.5em;
-  top: 3.5625em;
-  position: fixed;
-  bottom: 0;
-  overflow-y: auto; }
-
-.doc-sidebar {
-  position: fixed;
-  padding-top: 0.5em;
-  top: 3.5625em;
-  bottom: 0;
-  right: 0;
-  overflow-y: auto; }
-  .doc-sidebar ul {
-    list-style-type: none;
-    padding-left: 1em; }
-    .doc-sidebar ul.current {
-      padding-left: 0; }
-  .doc-sidebar li {
-    padding-top: 0.2em;
-    padding-bottom: 0.2em; }
-
-.admonition {
-  border-radius: 0.3em;
-  border: 1px solid #ccc;
-  background-color: #f8f9fa; }
-  .admonition .admonition-title {
-    color: #ff7efd; }
-
-.topic {
-  border-radius: 0.3em;
-  background-color: #f8f9fa; }
-
-.nav-link {
-  padding-top: 0;
-  padding-bottom: 0; }
-
-.btn-success {
-  background-color: #008d06;
-  border-color: #008d06; }
-  .btn-success:hover {
-    background-color: #f48400;
-    border-color: #f48400; }
-
-/*# sourceMappingURL=instaloader.css.map */

docs/_static/instaloader.js

@@ -1,22 +0,0 @@
-$(function () {
-    $('[data-toggle="tooltip"]').tooltip();
-
-    $('.doc-sidebar > ul > li.current').attr("id", "localtoc");
-    $('#localtoc ul').addClass("nav flex-column");
-    $('#localtoc ul li').addClass("nav-item");
-    $('#localtoc ul li a').addClass("nav-link");
-    $('.doc-content').scrollspy({target: '#localtoc'});
-
-    const top_href = '#' + $('.section:first').attr("id");
-    $('#localtoc > a.current').attr("href", top_href);
-
-    $('#navbarToc a').on("click", function () {
-        const href = $(this).attr("href");
-        if (href === '#') {
-            window.location.href = top_href;
-        } else {
-            window.location.href = href;
-        }
-        $('#navbarToc').modal('hide');
-    });
-});

docs/_static/instaloader.scss

@@ -1,124 +0,0 @@
-@import 'bootstrap-4.1.3.min.css';
-
-$color_instaloader_main: #008d06;
-$color_instaloader_accent: #f48400;
-$color_instaloader_hyper: #ff7efd;
-$color_normal_text: #212529;
-$color_light_bg: #f8f9fa;
-
-a {
-  color: $color_instaloader_main;
-
-  &:hover, &.current, &.active {
-    color: $color_instaloader_accent;
-  }
-
-  &.current, &.active {
-    font-weight: 500;
-  }
-}
-
-.doc-sidebar, .modal-body {
-  a:hover {
-    text-decoration: none
-  }
-}
-
-code {
-  color: $color_normal_text;
-}
-
-.highlight {
-  border-radius: 0.3em;
-
-  pre {
-    padding: 0.7em;
-    color: #fff;
-  }
-
-  .c1 {
-    color: #666;
-  }
-
-  .k, .kc, .kn, .ow {
-    color: $color_instaloader_main
-  }
-
-  .nb, .ne, .nf, .vm {
-    color: $color_instaloader_accent
-  }
-
-  .s1, .s2, .sa, .se, .si, .mi {
-    color: $color_instaloader_hyper
-  }
-
-  .c1, .nf, .sa, .se, .si {
-    font-style: italic;
-  }
-
-  .k, .kn, .ow {
-    font-weight: bold
-  }
-}
-
-.doc-content {
-  padding-top: 0.5em;
-  top: 3.5625em;
-  position: fixed;
-  bottom: 0;
-  overflow-y: auto;
-}
-
-.doc-sidebar {
-  position: fixed;
-  padding-top: 0.5em;
-  top: 3.5625em;
-  bottom: 0;
-  right: 0;
-  overflow-y: auto;
-
-  ul {
-    list-style-type: none;
-    padding-left: 1em;
-
-    &.current {
-      padding-left: 0;
-    }
-  }
-
-  li {
-    padding-top: 0.2em;
-    padding-bottom: 0.2em;
-
-  }
-}
-
-.admonition {
-  border-radius: 0.3em;
-  border: 1px solid #ccc;
-  background-color: $color_light_bg;
-
-  .admonition-title {
-    color: $color_instaloader_hyper;
-  }
-}
-
-.topic {
-  border-radius: 0.3em;
-  background-color: $color_light_bg;
-}
-
-.nav-link {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.btn-success {
-  background-color: $color_instaloader_main;
-  border-color: $color_instaloader_main;
-
-  &:hover {
-    background-color: $color_instaloader_accent;
-    border-color: $color_instaloader_accent;
-  }
-}

docs/_templates/layout.html

@@ -1,9 +1,6 @@
 {% extends "!layout.html" %}
-
 {% set html5_doctype = True %}
-
+{% set script_files = script_files + ['_static/instaloaderdoc.js'] %}
-{% set script_files = script_files + ['_static/bootstrap-4.1.3.bundle.min.js', '_static/instaloader.js'] %}
-
 {% block htmltitle %}
   {% if pagename == "index" %}
     <title>{{ title|striptags|e }}</title>
@@ -11,7 +8,6 @@
     <title>{{ title|striptags|e }}{{ titlesuffix }}</title>
   {% endif %}
 {% endblock %}
-
 {% block extrahead %}
   {{ super() }}
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -22,94 +18,66 @@
     <link rel="canonical" href="https://instaloader.github.io/{{ pagename }}.html"/>
   {% endif %}
 {% endblock %}
-
 {% block header %}
-  <nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top border-bottom">
+  <nav class="navbar navbar-light navbar-expand bg-light border-bottom">
     <a class="navbar-brand" href="{{ pathto(master_doc) }}">
       <img src="{{ pathto('_static/' + logo, 1) }}" width="30" height="30" class="d-inline-block align-top" alt="logo">
-      Instaloader
+      <span class="ml-3">Instaloader</span>
     </a>
     <ul class="navbar-nav mr-auto">
-      <li class="nav-item ml-0 ml-sm-2 ml-md-0">
+      <li class="nav-item ml-0 ml-sm-2">
-        <a target="_blank" class="nav-link"
+        <a target="_blank" class="nav-link" rel="noopener"
            href="https://github.com/instaloader/instaloader/releases/tag/v{{ current_release }}"
-           title="Released on {{ current_release_date }}" data-toggle="tooltip">v<b>{{ current_release }}</b></a>
+           title="Released on {{ current_release_date }}" data-toggle="tooltip">
+          v<b>{{ current_release }}</b>
+        </a>
       </li>
     </ul>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarLinks"
+    <ul class="navbar-nav ml-auto d-none d-sm-flex">
-            aria-controls="navbarLinks" aria-expanded="false" aria-label="Toggle navigation">
+      <li class="nav-item">
+        <a target="_blank" class="nav-link" rel="noopener" href="https://github.com/instaloader/instaloader/issues">
+          Issues
+        </a>
+      </li>
+      <li class="nav-item">
+        <a target="_blank" class="nav-link" rel="noopener" href="https://github.com/instaloader/instaloader/releases">
+          Releases
+        </a>
+      </li>
+      <li class="nav-item">
+        <a target="_blank" class="nav-link" rel="noopener" href="https://github.com/instaloader/instaloader">
+          GitHub
+        </a>
+      </li>
+    </ul>
+    <button class="d-inline-block d-md-none btn btn-outline-primary btn-sm" type="button"
+            data-toggle="collapse" data-target="#instaloaderdocSidebar" aria-controls="instaloaderdocSidebar"
+            aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <div class="collapse navbar-collapse" id="navbarLinks">
-      <ul class="navbar-nav ml-auto">
-        <li class="nav-item">
-          <a target="_blank" class="nav-link" href="https://github.com/instaloader/instaloader/issues">Issues</a>
-        </li>
-        <li class="nav-item">
-          <a target="_blank" class="nav-link" href="https://github.com/instaloader/instaloader/releases">Releases</a>
-        </li>
-        <li class="nav-item">
-          <a target="_blank" class="nav-link" href="https://github.com/instaloader/instaloader">GitHub</a>
-        </li>
-      </ul>
-      <form class="form-inline" action="search.html" method="get">
-        <div class="input-group my-2 my-sm-0 ml-2">
-          <input class="form-control" type="search" placeholder="Search" aria-label="Search" name="q">
-          <div class="input-group-append">
-            <button class="btn btn-success btn-small" type="submit">Go</button>
-          </div>
-        </div>
-      </form>
-    </div>
-    {% if pagename != "index" %}
-      <button type="button" class="btn btn-success d-md-none btn-small ml-2" data-toggle="modal"
-              data-target="#navbarToc">
-        TOC
-      </button>
-    {% endif %}
   </nav>
-  {% if pagename != "index" %}
-    <div class="modal fade" id="navbarToc" tabindex="-1" role="dialog"
-         aria-hidden="true" aria-labelledby="navbarTocTitle">
-      <div class="modal-dialog modal-dialog-centered" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title" id="navbarTocTitle">Contents</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <span aria-hidden="true">&times;</span>
-            </button>
-          </div>
-          <div class="modal-body">
-            {{ toctree(maxdepth=-1) }}
-          </div>
-        </div>
-      </div>
-    </div>
-  {% endif %}
 {% endblock %}
-
 {% block relbar1 %}{% endblock %}
 {% block relbar2 %}{% endblock %}
 {% block footer %}{% endblock %}
 {% block content %}
-  <div class="container-fluid row">
+  <div class="container-fluid">
-    <div class="col-12 {% if pagename != "index" %}col-md-9 col-xl-10{% endif %} doc-content">
+    <div class="row">
-      {% block body %}{% endblock %}
+      <aside class="instaloaderdoc-sidebar collapse d-md-block col-md-3 col-xl-2 bg-light"
-    </div>
+             id="instaloaderdocSidebar">
-    {% if pagename != "index" %}
+        <nav>
-      <div class="d-none col-md-3 col-xl-2 bg-light doc-sidebar d-md-flex flex-column border-left">
+          <form action="{{ pathto('search') }}" method="get" role="search" class="border-bottom mr-2 pb-2 mb-2 px-1">
-
+            <label class="sr-only" for="searchQueryInput">Search</label>
-        <h3>{{ _('Table of Contents') }}</h3>
+            <input type="search" name="q" id="searchQueryInput" class="form-control my-2"
+                   placeholder="Search..." aria-label="Search">
+          </form>
+          <h4>Contents</h4>
           {{ toctree(maxdepth=-1) }}
-
+        </nav>
-        <div class="d-flex justify-content-between small mt-auto mb-2">
+      </aside>
-          <a class="reference internal{% if pagename == "genindex" %} current{% endif %}" href="genindex.html">Index</a>
+      <main class="col-12 col-md-9 col-xl-10 pt-2">
-          {% if pagename != "genindex" and pagename != "search" %}
+        {% block body %}{% endblock %}
-            <a class="reference external"
+      </main>
-               href="https://github.com/instaloader/instaloader/edit/master/docs/{{ pagename }}.rst">Edit this page</a>
-          {% endif %}
     </div>
   </div>
-    {% endif %}
-  </div>
 {% endblock %}

docs/conf.py

@@ -374,6 +374,6 @@ texinfo_documents = [
 
 def setup(app):
     typing.TYPE_CHECKING = True
-    app.add_stylesheet("instaloader.css")
+    app.add_stylesheet("instaloaderdoc.css")
     app.connect('autodoc-process-signature', sphinx_autodoc_typehints.process_signature)
     app.connect('autodoc-process-docstring', sphinx_autodoc_typehints.process_docstring)