%
<div class=viewnav>
% if ($link{prev}) {
- <div class=prev><a class=prev href="<% "$pre/$link{prev}" |hu %>">‹</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>
</picture>
</a>
% if ($link{next}) {
- <div class=next><a class=next href="<% "$pre/$link{next}" |hu %>">›</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>
%
}
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;