Fixes and enhancements to documentation theme

docs/_static/instaloader.css

@@ -1,8 +1,13 @@
 @import url(bootstrap-4.1.3.min.css);
 a {
   color: #008d06; }
-  a:hover {
+  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; }
@@ -20,9 +25,10 @@ code {
     color: #ff7efd; }
 
 .doc-content {
-  top: 4.0625em;
-  position: relative;
-  height: calc(100vh - 4.0625em);
+  padding-top: 0.5em;
+  top: 3.5625em;
+  position: fixed;
+  bottom: 0;
   overflow-y: auto; }
 
 .doc-sidebar {
@@ -33,21 +39,13 @@ code {
   right: 0;
   overflow-y: auto; }
   .doc-sidebar ul {
+    list-style-type: none;
     padding-left: 1em; }
     .doc-sidebar ul.current {
-      list-style-type: none;
       padding-left: 0; }
   .doc-sidebar li {
     padding-top: 0.2em;
     padding-bottom: 0.2em; }
-    .doc-sidebar li a {
-      color: #008d06; }
-      .doc-sidebar li a.current, .doc-sidebar li a.active {
-        color: #f48400;
-        font-weight: 500; }
-      .doc-sidebar li a:hover {
-        color: #f48400;
-        text-decoration: none; }
 
 .admonition {
   border-radius: 0.3em;

docs/_static/instaloader.scss

@@ -9,9 +9,19 @@ $color_light_bg: #f8f9fa;
 a {
   color: $color_instaloader_main;
 
-  &:hover {
+  &:hover, &.current, &.active {
     color: $color_instaloader_accent;
   }
+
+  &.current, &.active {
+    font-weight: 500;
+  }
+}
+
+.doc-sidebar, .modal-body {
+  a:hover {
+    text-decoration: none
+  }
 }
 
 code {
@@ -40,9 +50,10 @@ code {
 }
 
 .doc-content {
-  top: 4.0625em;
-  position: relative;
-  height: calc(100vh - 4.0625em);
+  padding-top: 0.5em;
+  top: 3.5625em;
+  position: fixed;
+  bottom: 0;
   overflow-y: auto;
 }
 
@@ -55,10 +66,10 @@ code {
   overflow-y: auto;
 
   ul {
+    list-style-type: none;
     padding-left: 1em;
 
     &.current {
-      list-style-type: none;
       padding-left: 0;
     }
   }
@@ -67,19 +78,6 @@ code {
     padding-top: 0.2em;
     padding-bottom: 0.2em;
 
-    a {
-      color: $color_instaloader_main;
-
-      &.current, &.active {
-        color: $color_instaloader_accent;
-        font-weight: 500;
-      }
-
-      &:hover {
-        color: $color_instaloader_accent;
-        text-decoration: none;
-      }
-    }
   }
 }
 

docs/_templates/layout.html

@@ -30,7 +30,7 @@
       Instaloader
     </a>
     <ul class="navbar-nav mr-auto">
-      <li class="nav-item">
+      <li class="nav-item ml-0 ml-sm-2 ml-md-0">
         <a target="_blank" class="nav-link"
            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>
@@ -52,11 +52,23 @@
           <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>
-    <button type="button" class="btn btn-success d-md-none btn-small ml-2" data-toggle="modal" data-target="#navbarToc">
+        </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">
@@ -73,6 +85,7 @@
         </div>
       </div>
     </div>
+  {% endif %}
 {% endblock %}
 
 {% block relbar1 %}{% endblock %}
@@ -89,9 +102,9 @@
         <h3>{{ _('Table of Contents') }}</h3>
         {{ toctree(maxdepth=-1) }}
 
-        <div class="d-flex justify-content-between small mt-auto mb-3">
-          <a class="reference internal" href="genindex.html">Index</a>
-          {% if pagename != "genindex" %}
+        <div class="d-flex justify-content-between small mt-auto mb-2">
+          <a class="reference internal{% if pagename == "genindex" %} current{% endif %}" href="genindex.html">Index</a>
+          {% if pagename != "genindex" and pagename != "search" %}
             <a class="reference external"
                href="https://github.com/instaloader/instaloader/edit/master/docs/{{ pagename }}.rst">Edit this page</a>
           {% endif %}

docs/_templates/search.html

@@ -0,0 +1,28 @@
+{% extends "!search.html" %}
+
+{% block body %}
+  <div id="fallback" class="admonition warning">
+    <script type="text/javascript">$('#fallback').hide();</script>
+    <p>
+      {% trans %}Please activate JavaScript to enable the search
+        functionality.{% endtrans %}
+    </p>
+  </div>
+  {% if search_performed %}
+    <h1>{{ _('Search Results') }}</h1>
+    {% if not search_results %}
+      <p>{{ _('Your search did not match any documents. Please make sure that all words are spelled correctly and that you\'ve selected enough categories.') }}</p>
+    {% endif %}
+  {% endif %}
+  <div id="search-results">
+    {% if search_results %}
+      <ul>
+        {% for href, caption, context in search_results %}
+          <li><a href="{{ pathto(item.href) }}">{{ caption }}</a>
+            <div class="context">{{ context|e }}</div>
+          </li>
+        {% endfor %}
+      </ul>
+    {% endif %}
+  </div>
+{% endblock %}