tracker

2.3 KB

1. // list-first.hl — SHELL 2, e.g. Notes: the list and the opened item (docs/layouts/list-first.md).
2. // Phone: the list first; a tap on an item opens its page, where only the item shows (with a `a.back` link to the list).
3. // 60rem+: list and item side by side over the full width, each scrolling on its own; `/` shows a welcome text.
4. //
5. // ListFirst { view = view // 'list' on the list's own route, 'detail' on an item's route
6. // aside { ul { li { a { href = "/notes/n1" class = "selected" "Reading list" } } } }
7. // main { a { class = "back" href = "/notes" "All notes" } h1 { "Reading list" } … }
8. // }
9. String view = 'list'
11. slot = null
13. Style {
14. 'list-first' { display = 'block' }
15. 'list-first > aside' { display = 'block' padding = '.5rem calc(var(--layout-gutter) - .75rem) 2rem' }
16. 'list-first > main' { display = 'block' minWidth = '0' padding = '1rem var(--layout-gutter) 3rem' }
17. 'list-first.list > main' { display = 'none' }
18. 'list-first.detail > aside' { display = 'none' }
19. 'list-first > aside ul' { margin = '0' padding = '0' listStyle = 'none' }
20. 'list-first > aside li' { margin = '0' }
21. 'list-first > aside li a' { display = 'block' padding = '.6rem .75rem' color = 'var(--color-text)' borderRadius = 'var(--layout-radius)' }
22. 'list-first > aside li a:hover' { textDecoration = 'none' background = 'var(--color-surface)' }
23. 'list-first > aside li a.selected,
24. list-first > aside li a[aria-current="page"]' { color = 'var(--color-text-strong)' background = 'var(--color-surface)' }
25. 'list-first > aside input,
26. list-first > aside select' { width = '100%' background = 'var(--color-background)' }
27. 'list-first a.back' { display = 'inline-block' marginBottom = '1rem' fontWeight = '600' }
28. 'list-first a.back::before' { content = '"‹ "' }
29. '@media (min-width: 60rem)' {
30. 'list-first' { display = 'grid' gridTemplateColumns = 'var(--layout-list) minmax(0, 1fr)' height = 'calc(100dvh - var(--layout-header))' }
31. 'list-first > aside,
32. list-first.detail > aside' { display = 'block' minHeight = '0' overflowY = 'auto' padding = '1rem .75rem 2rem' background = 'var(--color-background-sunken)' }
33. 'list-first > main,
34. list-first.list > main' { display = 'block' minHeight = '0' overflowY = 'auto' padding = '1.5rem clamp(1.5rem, 5vw, 5rem) 3rem' }
35. 'list-first a.back' { display = 'none' }
36. }
37. }
39. View {
40. listFirst { class = view slot }
41. }