From: Mark Wooding <mdw@distorted.org.uk>
Date: Wed, 21 Jun 2023 09:57:05 +0000 (+0100)
Subject: mason/dhandler (.view), static/tgal.css: Use SVG arrows.
X-Git-Url: https://git.distorted.org.uk/~mdw/tgal/commitdiff_plain/548ad771d89100cdd1cda2ffa7e3dc085a6ba154

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
--- 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
--- 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;