Add newer/older navigation to the photo detail page
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.
This commit is contained in:
+24
-7
@@ -195,17 +195,34 @@ body {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
display: inline-block;
|
||||
font-size: 15px;
|
||||
color: var(--fg3);
|
||||
text-decoration: none;
|
||||
.photo-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
margin-bottom: 16px;
|
||||
font-family: var(--serif);
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
.photo-nav a {
|
||||
color: var(--aqua);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user