:bug: Keep the custom footer inside the footer element

The theme's footer block wraps the whole <footer> element, so calling
super() first closed it and left our newsletter, webring, and notices
sitting outside on the page background. The Zensical attribution then
appeared above our content instead of below it.

Rebuild the block instead of extending it: our content goes inside the
footer, and the theme's meta bar with the copyright, attribution, and
social links follows underneath. Recolor the text for the dark footer
background.

docs/stylesheets/django.css

@@ -69,14 +69,25 @@
   margin-bottom: 0.2rem;
 }
 
-/* Footer additions */
+/* Footer additions. These sit inside .md-footer, which has a dark background,
+   so the text needs the footer foreground colors. */
 .awesome-django-footer {
-  padding: 1rem 0.8rem 0;
+  padding: 1.2rem 0.8rem;
+  color: var(--md-footer-fg-color--light);
   font-size: 0.7rem;
   line-height: 1.5;
   text-align: center;
 }
 
+.awesome-django-footer a {
+  color: var(--md-footer-fg-color);
+  text-decoration: underline;
+}
+
+.awesome-django-footer a:hover {
+  color: var(--md-accent-fg-color);
+}
+
 /* Capped to match the webring below it, so neither spans the whole footer. */
 .awesome-django-newsletter {
   margin: 0 auto;

overrides/main.html

@@ -11,32 +11,48 @@
   <script defer src="https://uma.cog.gs/script.js" data-website-id="744740f8-2ff1-4a59-9e0f-7740fc8ca3c4"></script>
 {% endblock %}
 
+{#
+  The theme's footer block wraps the whole <footer> element, so calling
+  super() first would leave this content outside it. Rebuild the footer
+  instead: our content sits above the theme's meta bar, inside the footer.
+#}
 {% block footer %}
-  {{ super() }}
-  <div class="awesome-django-footer">
-    <div class="awesome-django-newsletter">
-      <iframe
-        src="https://django-news.com?as_embed=true"
-        scrolling="no"
-        loading="lazy"
-        title="Subscribe to Django News"></iframe>
-    </div>
+  <footer class="md-footer">
+    <div class="awesome-django-footer md-grid">
+      <div class="awesome-django-newsletter">
+        <iframe
+          src="https://django-news.com?as_embed=true"
+          scrolling="no"
+          loading="lazy"
+          title="Subscribe to Django News"></iframe>
+      </div>
 
-    <div class="awesome-django-webring">
-      <webring-css site="https://awesomedjango.org"></webring-css>
-      <script src="https://djangowebring.com/static/webring.js"></script>
-    </div>
+      <div class="awesome-django-webring">
+        <webring-css site="https://awesomedjango.org"></webring-css>
+        <script src="https://djangowebring.com/static/webring.js"></script>
+      </div>
 
-    <p>
-      Please consider supporting Django by making a donation to the
-      <a rel="sponsored" href="https://www.djangoproject.com/fundraising/">Django Software Foundation</a>,
-      sponsoring via <a rel="sponsored" href="https://github.com/sponsors/django">GitHub Sponsors</a>,
-      or buying <a rel="sponsored" href="https://django.threadless.com/">official merchandise</a>.
-    </p>
+      <p>
+        Please consider supporting Django by making a donation to the
+        <a rel="sponsored" href="https://www.djangoproject.com/fundraising/">Django Software Foundation</a>,
+        sponsoring via <a rel="sponsored" href="https://github.com/sponsors/django">GitHub Sponsors</a>,
+        or buying <a rel="sponsored" href="https://django.threadless.com/">official merchandise</a>.
+      </p>
 
-    <p>
-      Awesome Django is not associated with the Django Software Foundation.<br />
-      Django is a registered trademark of the Django Software Foundation.
-    </p>
-  </div>
+      <p>
+        Awesome Django is not associated with the Django Software Foundation.<br />
+        Django is a registered trademark of the Django Software Foundation.
+      </p>
+    </div>
+
+    {# The theme's own meta bar: copyright, "Made with Zensical", social links. #}
+    <div class="md-footer-meta md-typeset">
+      <div class="md-footer-meta__inner md-grid">
+        {% include "partials/copyright.html" %}
+        {% if config.extra.social %}
+          {% include "partials/social.html" %}
+        {% endif %}
+      </div>
+    </div>
+  </footer>
 {% endblock %}