From a544c897526b8582a20f91fe434664645f8b9d76 Mon Sep 17 00:00:00 2001
From: Matthias Portzel <MatthiasPortzel@gmail.com>
Date: Mon, 4 Apr 2022 10:28:58 -0400
Subject: [PATCH] Move bottom history nav inside the main block

* Add a CSS charset
---
 main/static/main/main.css                |  9 +++------
 main/templates/whispermaphone/index.html | 25 ++++++++++++------------
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/main/static/main/main.css b/main/static/main/main.css
index 39c73dd..9adf351 100644
--- a/main/static/main/main.css
+++ b/main/static/main/main.css
@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 html {
     padding: 0;
     margin: 0;
@@ -226,16 +228,11 @@ h1 {
     display: inline;
 }
 
-.history-nav.top {
+.history-nav {
     margin-top: 30px;
     margin-bottom: 40px;
     margin-left: 20px;
 }
-.history-nav.bottom {
-    margin-top: 50px;
-    margin-bottom: 30px;
-    margin-left: 50px;
-}
 .history-nav ul {
     margin: 0;
     padding: 0;
diff --git a/main/templates/whispermaphone/index.html b/main/templates/whispermaphone/index.html
index d9a37a6..14f39f5 100644
--- a/main/templates/whispermaphone/index.html
+++ b/main/templates/whispermaphone/index.html
@@ -82,20 +82,21 @@
             <hr>
         </div>
     {% endfor %}
+
+    <nav class="history-nav bottom" aria-label="History Navigation">
+        <ul>
+        {% for page in pages %}
+            {% if page.slug == current_page %}
+                <li><span class="current-page">{{ page.formatted_name }}</span></li>
+            {% else %}
+                <li><a href="?page={{ page.slug }}">{{ page.formatted_name }}</a></li>
+            {% endif %}
+        {% endfor %}
+        </ul>
+    </nav>
 {% endblock %}
 
 {% block footer %}
-<nav class="history-nav bottom" aria-label="History Navigation">
-    <ul>
-    {% for page in pages %}
-        {% if page.slug == current_page %}
-            <li><span class="current-page">{{ page.formatted_name }}</span></li>
-        {% else %}
-            <li><a href="?page={{ page.slug }}">{{ page.formatted_name }}</a></li>
-        {% endif %}
-    {% endfor %}
-    </ul>
-</nav>
 {% endblock %}
 
 {% block scripts %}
@@ -130,7 +131,7 @@
                     const transcript = el.querySelector(".transcript");
 
                     const extendedParent = transcript.parentNode;
-                    
+
                     transcriptButton.addEventListener("click", function () {
                         extendedParent.appendChild(transcriptTitle);
                         extendedParent.appendChild(transcript);