puttaalu
3639bd5577
Replace the standalone Back link with a three-cell nav row so each photo page links to its neighbours in the timeline. Prefetch the neighbouring pages and bind the arrow keys for keyboard navigation.
56 lines
2.1 KiB
HTML
56 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>{{.Photo.Caption}}</title>
|
||
<link rel="stylesheet" href="{{.FontsURL}}">
|
||
<link rel="stylesheet" href="/static/style.css">
|
||
<style>:root { --serif: '{{.SerifFamily}}', Georgia, serif; --mj: '{{.MlFamily}}', sans-serif; }</style>
|
||
<link rel="alternate" type="application/atom+xml" href="/feed.xml" title="Photo Feed">
|
||
{{if .Newer}}<link rel="prefetch" href="/photo/{{.Newer.Slug}}/">{{end}}
|
||
{{if .Older}}<link rel="prefetch" href="/photo/{{.Older.Slug}}/">{{end}}
|
||
</head>
|
||
<body>
|
||
<div class="photo-page">
|
||
<nav class="photo-nav">
|
||
{{if .Newer}}<a href="/photo/{{.Newer.Slug}}/" data-nav="newer">← Newer</a>{{else}}<span></span>{{end}}
|
||
<a href="/" class="back-btn">← Back</a>
|
||
{{if .Older}}<a href="/photo/{{.Older.Slug}}/" data-nav="older">Older →</a>{{else}}<span></span>{{end}}
|
||
</nav>
|
||
<div class="dlayout">
|
||
<div class="dimg-wrap">
|
||
<a href="/{{.Photo.File}}" target="_blank" rel="noopener">
|
||
<img src="/{{.Photo.Medium}}" alt="{{.Photo.Caption}}">
|
||
</a>
|
||
</div>
|
||
<div class="dsidebar">
|
||
<div class="dauthor">
|
||
<div class="mini-avatar"><span>{{.Initial}}</span></div>
|
||
<span class="dauthor-name">{{.Author}}</span>
|
||
</div>
|
||
<p class="dcaption">{{.Photo.Caption}}</p>
|
||
<p class="ddate">{{.Photo.Date.Format "Jan 02, 2006"}}</p>
|
||
<p class="dfull"><a href="/{{.Photo.File}}" download>↓ Full size</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="site-footer">
|
||
© 2000–{{.Year}} {{.Author}}. All rights reserved.
|
||
</footer>
|
||
|
||
<script>
|
||
(function () {
|
||
const newer = document.querySelector('[data-nav="newer"]');
|
||
const older = document.querySelector('[data-nav="older"]');
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.target.matches('input, textarea')) return;
|
||
if (e.key === 'ArrowLeft' && newer) location.href = newer.href;
|
||
if (e.key === 'ArrowRight' && older) location.href = older.href;
|
||
});
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|