An arrow fixed at the left edge, half-way up the screen, and the same link in words at the foot of the page. It goes one level down: the nearest page below the current path that the visitor may open, found by taking the path apart a segment at a time, and the front door when none of those is a page (/status/oppslag -> /, /review/abc -> /review). The front door itself has none. Labelled with where it goes: 'Tilbake til starten', or the target page's question in quotation marks. Content stops needing a 'back' alternative on every page, and a visitor who went up a branch whose context did not apply is never stranded. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01GT37Z1Xtfd9pUuQtMTg6Yt
This commit is contained in:
co-authored by
Claude Opus 5.5
parent
f0c43c5c0f
commit
e2596bc3cf
@@ -297,6 +297,67 @@ main.not-found {
|
||||
}
|
||||
}
|
||||
|
||||
/* The way down the tree: one level toward the front door, from any
|
||||
page. Fixed at the left edge, half-way up, over the margin rather
|
||||
than the text; small, and half-faded until touched, so it never
|
||||
covers what a visitor is reading. */
|
||||
.down-the-tree {
|
||||
position: fixed;
|
||||
left: 0.6rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 20;
|
||||
width: 2.6rem;
|
||||
height: 2.6rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: var(--card-bg-opaque);
|
||||
color: var(--ink);
|
||||
box-shadow: 0 0.2rem 0.8rem var(--card-shadow);
|
||||
opacity: 0.7;
|
||||
transition: opacity 120ms, transform 120ms;
|
||||
}
|
||||
|
||||
.down-the-tree:hover,
|
||||
.down-the-tree:focus-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%) translateX(-0.12rem);
|
||||
}
|
||||
|
||||
.down-the-tree svg {
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
}
|
||||
|
||||
@media (max-width: 43.75rem) {
|
||||
.down-the-tree {
|
||||
left: 0.25rem;
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
opacity: 0.55;
|
||||
}
|
||||
}
|
||||
|
||||
.down-the-tree-foot {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
margin: 2.6rem auto 0;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.down-the-tree-foot a {
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
border-bottom: 0.06rem solid var(--line);
|
||||
}
|
||||
|
||||
.down-the-tree-foot a:hover {
|
||||
color: var(--accent);
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
|
||||
.question-nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
Reference in New Issue
Block a user