puttaalu
70d115e11c
Move the Newer and Older links to a right-aligned group joined by a slash so they stop crowding the Back link, and drop the aqua accent so every link in the row shares the muted serif tone.
59 lines
2.2 KiB
HTML
59 lines
2.2 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">
|
||
<a href="/" class="back-btn">← Back</a>
|
||
<span class="photo-nav-neighbours">
|
||
{{if .Newer}}<a href="/photo/{{.Newer.Slug}}/" data-nav="newer">← Newer</a>{{end}}
|
||
{{if and .Newer .Older}} / {{end}}
|
||
{{if .Older}}<a href="/photo/{{.Older.Slug}}/" data-nav="older">Older →</a>{{end}}
|
||
</span>
|
||
</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>
|