puttaalu/photog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Split the photo nav so Back sits alone on the left

Browse Source 
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.
This commit is contained in:
puttaalu
2026-07-03 23:11:11 +02:00
parent 3639bd5577
commit 70d115e11c
2 changed files with 13 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+8 -16
View File
@@ -198,34 +198,26 @@ body {
.photo-nav { .photo-nav {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: baseline;
padding: 8px 0; padding: 8px 0;
margin-bottom: 16px; margin-bottom: 16px;
font-family: monospace; font-family: var(--serif);
font-size: 13px; font-size: 15px;
letter-spacing: 0.04em;
} }
.photo-nav a { .photo-nav a {
color: var(--aqua); color: var(--fg3);
text-decoration: none; text-decoration: none;
} }
.photo-nav a:hover { .photo-nav a:hover {
color: var(--fg2);
}
.photo-nav .back-btn {
font-family: var(--serif);
font-size: 15px;
color: var(--fg3);
letter-spacing: 0;
}
.photo-nav .back-btn:hover {
color: var(--fg); color: var(--fg);
} }
.photo-nav-neighbours {
color: var(--fg3);
}
.dlayout { .dlayout {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
templates/photo.html
+5 -2
View File
@@ -14,9 +14,12 @@
<body> <body>
<div class="photo-page"> <div class="photo-page">
<nav class="photo-nav"> <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> <a href="/" class="back-btn">← Back</a>
{{if .Older}}<a href="/photo/{{.Older.Slug}}/" data-nav="older">Older →</a>{{else}}<span></span>{{end}} <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> </nav>
<div class="dlayout"> <div class="dlayout">
<div class="dimg-wrap"> <div class="dimg-wrap">