working towards new design with bottom nav bar; not quite there

src/views/footer.tpl

@@ -1,5 +1,35 @@
 % import random
-<!--Footer-->
-    <footer>
+<footer><div class="footer-grid">
+    <div class="nav"><div class="nav-grid">
+        <div class="nav-diary">
+            <a href="/diary">
+            <div class="navbutton"><img src="/static/img/nav/diary.png" alt="(link: diary)"></div>
+            <div class="navlink">diary</div>
+            </a>
+        </div>
+
+        <div class="nav-play">
+            <a href="/demo">
+            <div class="navbutton"><img src="/static/img/nav/play.png" alt="(link: play)"></div>
+            <div class="navlink">play</div>
+            </a>
+        </div>
+
+        <div class="nav-about">
+            <a href="/about">
+            <div class="navbutton"><img src="/static/img/nav/about.png" alt="(link: about)"></div>
+            <div class="navlink">about</div>
+            </a>
+        </div>
+
+        <div class="nav-dev">
+            <a href="/dev">
+            <div class="navbutton"><img src="/static/img/nav/dev.png" alt="(link: dev)"></div>
+            <div class="navlink">dev</div>
+            </a>
+        </div>
+    </div>
+    <div class="links">
         <a href=/milestones>milestones</a> {{random.choice(['.','•','☆','★'])}} <a href=/gdd>game design document</a> {{random.choice(['.','•','☆','★'])}} <a href=/blessfrey-presskit>presskit</a> {{random.choice(['.','•','☆','★'])}} &#169; chimchooree 2020-{{year}}<br>
-    </footer>
+    </div></div>
+</div></footer>