nav is converted to text so it has less wonkiness

src/static/css/diary.css

@@ -22,11 +22,11 @@
     }
 
     .diary-dir {
+        color: #C0AAC0;
   flex-shrink: 0;  display: flex;
         justify-content: center;
         background-color: transparent;
         font-size: 1.5em;
-        color: #AAA39D;
         font-weight: bold;
         text-shadow:
             -1px -1px 1px #080410,
@@ -39,7 +39,7 @@
             -1px  0   1px #080410;
     }
     .diary-dir a {
-        color: #E6E8EF;
+        color: #C0AAC0;
         font-weight: bold;
         text-shadow:
             -1px -1px 1px #080410,
@@ -51,6 +51,9 @@
             -1px  2px 1px #080410,
             -1px  0   1px #080410;
     }
+    .diary-dir a:hover, .diary-dir a:active {
+        font-family: 'mitochondriaregular', sans-serif;
+    }
     .diary-dir-left {
         display: inline-block;
         vertical-align: middle;
@@ -64,13 +67,13 @@
         margin-right: .3em;
     }
     .diary-dir-number {
-        background-color: #886488; 
         display: inline-block;
         vertical-align: middle;
         white-space: nowrap;
         border-radius: .3em;
         padding-left: .3em;
         padding-right: .3em;
+        padding-bottom: .5em;
     }
     .diary-dir-right {
         display: inline-block;

src/views/diary.tpl

@@ -17,18 +17,18 @@
                 <div class="diary-dir-left">
                 % # << is always active link pointing to 0
                     <a href=/diary/0>
-                        <img src="/static/img/dia/nav_ll.png" alt="&lt;&lt;">
+                        &lt;&lt;
                     </a>
 
                 % # < points to 0 if page 0 or below
                 % if page <= 0:
                     <a href=/diary/0>
-                        <img src="/static/img/dia/nav_l.png" alt="&lt;">
+                        &lt;
                     </a>
                 % # < points to previous page otherwise
                 % else:
                     <a href=/diary/{{page - 1}}>
-                        <img src="/static/img/dia/nav_l.png" alt="&lt;">
+                        &lt;&lt;
                     </a>
                 % end
                 </div>
@@ -72,18 +72,18 @@
                 % # > points to max if page is at or above maximum
                 % if page >= max_pages:
                     <a href=/diary/{{max_pages}}>
-                        <img src="/static/img/dia/nav_r.png" alt="&gt;">
+                        &gt;
                     </a>
                 % # > point to next page otherwise
                 % else:
                     <a href=/diary/{{page + 1}}>
-                        <img src="/static/img/dia/nav_r.png" alt="&gt;">
+                        &gt;
                     </a>
                 % end
 
                 % # >> is always active link to maximum page
                 <a href=/diary/{{max_pages}}>
-                    <img src="/static/img/dia/nav_rr.png" alt="&gt;&gt;">
+                    &gt;&gt;
                 </a>
                 </div>
             </div>
@@ -146,18 +146,18 @@
                 <div class="diary-dir-left">
                 % # << is always active link pointing to 0
                     <a href=/diary/0>
-                        <img src="/static/img/dia/nav_ll.png" alt="&lt;&lt;">
+                        &lt;&lt;
                     </a>
 
                 % # < points to 0 if page 0 or below
                 % if page <= 0:
                     <a href=/diary/0>
-                        <img src="/static/img/dia/nav_l.png" alt="&lt;">
+                        &lt;
                     </a>
                 % # < points to previous page otherwise
                 % else:
                     <a href=/diary/{{page - 1}}>
-                        <img src="/static/img/dia/nav_l.png" alt="&lt;">
+                        &lt;
                     </a>
                 % end
                 </div>
@@ -202,17 +202,17 @@
                 % # > points to max if page is at or above maximum
                 % if page >= max_pages:
                     <a href=/diary/{{max_pages}}>
-                        <img src="/static/img/dia/nav_r.png" alt="&gt;">
+                        &gt;
                     </a>
                 % # > point to next page otherwise
                 % else:
                     <a href=/diary/{{page + 1}}>
-                        <img src="/static/img/dia/nav_r.png" alt="&gt;">
+                        &gt;
                     </a>
                 % end
                 % # >> is always active link to maximum page
                     <a href=/diary/{{max_pages}}>
-                    <img src="/static/img/dia/nav_rr.png" alt="&gt;&gt;">
+                    &gt;&gt;
                 </a>
                 </div>
             </div>