mason/dhandler (.view), static/tgal.css: Use SVG arrows.

Rather than the single-guillemets and the rather dodgy heuristics to
centre them in their spaces.

Also add title texts, for whatever accessibility benefit they might
offer.

diff --git a/mason/dhandler b/mason/dhandler
index c6f0f33..8c151ba 100755 (executable)
--- a/mason/dhandler
+++ b/mason/dhandler
@@ -287,7 +287,14 @@ Failed to find &lsquo;<% $path |h %>&rsquo;.
 %
 <div class=viewnav>
 % if ($link{prev}) {
-  <div class=prev><a class=prev href="<% "$pre/$link{prev}" |hu %>">&lsaquo;</a></div>
+  <div class=prev>
+    <a class=nav title="Previous image" href="<% "$pre/$link{prev}" |hu %>">
+      <svg width="50" height="80" viewBox="-25 -40 50 80">
+        <path class="fg" stroke="none"
+             d="m+1,0 +6,-11 -2,-1 -12,+12 +12,+12 +2,-1 z"/>
+      </svg>
+    </a>
+  </div>
 % }
   <a class=view href="<% $url |h %>">
     <picture>
@@ -305,7 +312,14 @@ Failed to find &lsquo;<% $path |h %>&rsquo;.
     </picture>
   </a>
 % if ($link{next}) {
-  <div class=next><a class=next href="<% "$pre/$link{next}" |hu %>">&rsaquo;</a></div>
+  <div class=next>
+    <a class=nav title="Next image" href="<% "$pre/$link{next}" |hu %>">
+      <svg width="50" height="80" viewBox="-25 -40 50 80">
+        <path class="fg" stroke="none"
+             d="m-1,0 -6,-11 +2,-1 +12,+12 -12,+12 -2,-1 z"/>
+      </svg>
+    </a>
+  </div>
 % }
 </div>
 %

diff --git a/static/tgal.css b/static/tgal.css
index c4753e4..a2bc7fb 100644 (file)
--- a/static/tgal.css
+++ b/static/tgal.css
@@ -136,14 +136,10 @@ div.prev, div.next {
 }
 div.prev { left: 0%; }
 div.next { right: 0%; }
-a.prev, a.next {
-       font-size: 400%;
-       font-weight: bold;
-       background-color: #0006;
-       min-width: 1em;
-       text-align: center;
-       min-height: 3ex;
-}
+a.nav { background-color: #0006; }
+a.nav svg { display: block; }
+a.nav .fg { fill: #00c; }
+
 a.view {
        flex-grow: 1; flex-basis: 0;
        display: flex; flex-direction: column;