fj-shell
The application frame: a side column of destinations, and the content column. It draws no vertical, so the page still has exactly one, and it centres as a single object, so the container is still the only centred thing.
rest
The mark, the destinations, one of them current, and the content column.
Contacts
Luciano Viola
- source
- Hacker News
- signals
- 3
- stage
- Researched
grouped, with a foot
A group names the run under it. The foot is separated by space, not by a rule.
Contacts
Luciano Viola
- source
- Hacker News
- signals
- 3
- stage
- Researched
hover, focus-visible, current, truncated
Every state the destination has, in one nav so they can be compared. The marker is transparent at rest, so becoming current changes a colour and never a dimension.
States
- rest
- --fj-muted, marker transparent
- hover
- --fj-ink
- current
- --fj-ink, marker --fj-primary
- truncated
- ellipsis, full value in title
overflow
More destinations than the column is tall. The nav scrolls and the mark and the foot stay put, which is why the side column is capped to the viewport it is stuck to.
Overflow
Why the cap is here
- column
- sticky, capped to the viewport
- nav
- the only part that scrolls
- foot
- always reachable
unstyled
The element tree, the landmarks and the aria wiring, with no fj-* classes.
rest
The mark, the destinations, one of them current, and the content column.
Contacts
Luciano Viola
- source
- Hacker News
- signals
- 3
- stage
- Researched
grouped, with a foot
A group names the run under it. The foot is separated by space, not by a rule.
Contacts
Luciano Viola
- source
- Hacker News
- signals
- 3
- stage
- Researched
hover, focus-visible, current, truncated
Every state the destination has, in one nav so they can be compared. The marker is transparent at rest, so becoming current changes a colour and never a dimension.
States
- rest
- --fj-muted, marker transparent
- hover
- --fj-ink
- current
- --fj-ink, marker --fj-primary
- truncated
- ellipsis, full value in title
overflow
More destinations than the column is tall. The nav scrolls and the mark and the foot stay put, which is why the side column is capped to the viewport it is stuck to.
Overflow
Why the cap is here
- column
- sticky, capped to the viewport
- nav
- the only part that scrolls
- foot
- always reachable
unstyled
The element tree, the landmarks and the aria wiring, with no fj-* classes.