A way down the tree from every page
Test / test (pull_request) Successful in 53s

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:
Bendik Aagaard Lynghaug
2026-09-29 07:05:39 +02:00
co-authored by Claude Opus 5.5
parent f0c43c5c0f
commit e2596bc3cf
4 changed files with 174 additions and 0 deletions
+61
View File
@@ -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;