Fix footer display (#168)

I did not notice before, but the recent pydata sphinx theme versions had
unset our footer. I will send a PR later to fix the 0.5.0 docs in
napari.github.io, but this fixes the immediate issues and changes the
wording on the footer items as requested in #12 .

Author: melissawm

napari_sphinx_theme/footer.html

@@ -1,7 +1,25 @@
-<footer class="napari-footer">
-  {% for footer_item in theme_footer_items %}
-    <div class="footer-item">
-      {% include footer_item %}
+{% if theme_footer_start or theme_footer_center or theme_footer_end %}
+<div class="bd-footer__inner bd-page-width">
+  {% if theme_footer_start %}
+    <div class="footer-items__start">
+      {% for item in theme_footer_start %}
+        <div class="footer-item">{% include item %}</div>
+      {% endfor %}
     </div>
-  {% endfor %}
-</footer>
+  {% endif %}
+  {% if theme_footer_center %}
+    <div class="footer-items__center">
+      {% for item in theme_footer_center %}
+        <div class="footer-item">{% include item %}</div>
+      {% endfor %}
+    </div>
+  {% endif %}
+  {% if theme_footer_end %}
+    <div class="footer-items__end">
+      {% for item in theme_footer_end %}
+        <div class="footer-item">{% include item %}</div>
+      {% endfor %}
+    </div>
+  {% endif %}
+</div>
+{% endif %}

napari_sphinx_theme/layout.html

@@ -0,0 +1,7 @@
+{%- extends "pydata_sphinx_theme/layout.html" %}
+
+{%- block footer %}
+  <footer class="napari-footer">
+    {%- include "footer.html" %}
+  </footer>
+{%- endblock %}

napari_sphinx_theme/napari-footer-links.html

@@ -1,40 +1,40 @@
-<a class="footer-icon__hover-blue" href="https://napari.org" target="_blank" rel="noreferrer">
+<a class="footer-icon__hover-blue" href="https://napari.org" title="napari.org" target="_blank" rel="noreferrer">
   {% include "partials/napari.html" %}
   <span>napari</span>
 </a>
 
-<a class="footer-icon__hover-blue" href="https://napari-hub.org" target="_blank" rel="noreferrer">
+<a class="footer-icon__hover-blue" href="https://napari-hub.org" title="napari hub" target="_blank" rel="noreferrer">
   {% include "partials/napari-hub.html" %}
   {% include "partials/napari-hub-light-blue.html" %}
-  <span>napari hub</span>
+  <span>Plugins</span>
 </a>
 
-<a class="footer-icon__hover-blue" href="https://github.com/napari/napari" target="_blank" rel="noreferrer">
+<a class="footer-icon__hover-blue" href="https://github.com/napari/napari" title="GitHub" target="_blank" rel="noreferrer">
   {% include "partials/github.html" %}
   {% include "partials/github-light-blue.html" %}
-  <span>GitHub</span>
+  <span>Code</span>
 </a>
 
-<a class="footer-icon__hover-blue" href="https://fosstodon.org/@napari" target="_blank" rel="noreferrer">
+<a class="footer-icon__hover-blue" href="https://fosstodon.org/@napari" title="Mastodon" target="_blank" rel="noreferrer">
   {% include "partials/mastodon.html" %}
   {% include "partials/mastodon-light-blue.html" %}
   <span>Mastodon</span>
 </a>
 
-<a class="footer-icon__hover-blue" href="https://twitter.com/napari_imaging" target="_blank" rel="noreferrer">
+<a class="footer-icon__hover-blue" href="https://twitter.com/napari_imaging" title="Twitter" target="_blank" rel="noreferrer">
   {% include "partials/twitter.html" %}
   {% include "partials/twitter-light-blue.html" %}
   <span>Twitter</span>
 </a>
 
-<a class="footer-icon__hover-blue" href="https://forum.image.sc/tag/napari" target="_blank" rel="noreferrer">
+<a class="footer-icon__hover-blue" href="https://forum.image.sc/tag/napari" title="image.sc" target="_blank" rel="noreferrer">
   {% include "partials/image-sc.html" %}
   {% include "partials/image-sc-light-blue.html" %}
-  <span>image.sc</span>
+  <span>Forum</span>
 </a>
 
-<a class="footer-icon__hover-blue" href="https://napari.zulipchat.com" target="_blank" rel="noreferrer">
+<a class="footer-icon__hover-blue" href="https://napari.zulipchat.com" title="Zulip" target="_blank" rel="noreferrer">
   {% include "partials/zulip.html" %}
   {% include "partials/zulip-light-blue.html" %}
-  <span>Zulip</span>
+  <span>Chat</span>
 </a>

napari_sphinx_theme/napari-layout.html

@@ -83,8 +83,6 @@ h1 {
     align-items: center;
     justify-content: space-between;
     background-color: black;
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
     padding-top: 1.5rem;
     padding-bottom: 0.5rem;
     margin-top: 75px;
@@ -206,6 +204,23 @@ h1 {
     display: block;
 }
 
+/* Recommended by PST */
+.footer-items__start, .footer-items__end {
+  flex-direction: row;
+}
+
+.bd-footer__inner {
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 100%;
+    max-width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    background-color: black;
+}
+
 /****************************
  Nav bar section
 *****************************/

napari_sphinx_theme/static/css/napari-sphinx-theme.css

@@ -20,5 +20,9 @@ navbar_align = content
 navbar_start = navbar-logo.html
 navbar_center = navbar-nav.html
 navbar_end = navbar-icon-links.html
-footer_items = napari-footer-links.html, napari-copyright.html
 page_sidebar_items = page-toc.html
+article_footer_items =
+content_footer_items =
+footer_start = napari-footer-links.html
+footer_center =
+footer_end = napari-copyright.html