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:
1 parent
856439f3fd
commit
3639bd5577
3 files changed
+55
-11
No files matched your search
+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