notes

5.5 KB

1. // styles.hl — ALL of the app's CSS, served as /__hl/app.css. Components carry no Style blocks: markup is domain
2. // tags (<note-book>, <note-list>, <note-reader>, …), this file lays them out. Tokens: shared/tokens.hl (verbatim
3. // copy of loreana worldapi-tokens/tokens.hl); the app sets only its accent (yellow).
4. // In a styles file a bare name is a TAG (camelCase → kebab), a quoted name is a selector written verbatim.
5. // MOBILE FIRST: every rule is the phone's (the list first; a selected note replaces it); the one min-width block
6. // adds the wide layout (list and note side by side).
7. import { var } from 'hl:web/css'
8. import { yellow, colorText, colorBackground, colorTextStrong, colorTextMuted, colorBackgroundSunken, colorAccentText, colorSurface, colorBorder, colorDanger } from './shared/tokens.hl'
10. colorAccent = var(yellow) // the app's accent: the only token this app sets
12. '*,
13. *::before,
14. *::after' { boxSizing = 'border-box' }
16. html { colorScheme = 'dark' }
17. body { margin = '0' font = '16px/1.5 system-ui, sans-serif' color = colorText background = colorBackground }
18. a { color = colorAccent textDecoration = 'none' }
19. 'a:hover' { textDecoration = 'underline' }
20. h1 { margin = '0' fontSize = '1.3rem' lineHeight = '1.3' color = colorTextStrong overflowWrap = 'anywhere' }
21. p { margin = '0' }
23. 'input,
24. textarea' { font = 'inherit' width = '100%' padding = '.5rem .7rem' color = colorTextStrong background = colorBackgroundSunken border = '1px solid ' + colorBorder borderRadius = '.4rem' }
25. button { font = 'inherit' fontWeight = '600' padding = '.55rem 1.1rem' color = colorAccentText background = colorAccent border = '0' borderRadius = '.4rem' cursor = 'pointer' }
26. 'button:hover' { filter = 'brightness(1.1)' }
27. 'button.quiet' { color = colorText background = 'transparent' border = '1px solid ' + colorBorder padding = '.35rem .8rem' fontSize = '.9rem' }
28. 'button.danger' { color = colorTextStrong background = colorDanger padding = '.35rem .8rem' fontSize = '.9rem' }
30. // ---- the shell ---------------------------------------------------------------------------
31. applicationHeader { position = 'sticky' top = '0' zIndex = '5' display = 'flex' flexWrap = 'wrap' alignItems = 'center' gap = '.5rem 1rem' padding = '.6rem 1rem' background = colorBackgroundSunken borderBottom = '1px solid ' + colorBorder }
32. 'application-header .brand' { fontWeight = '800' fontSize = '1.15rem' color = colorAccent marginRight = 'auto' }
33. main { display = 'block' padding = '1rem' }
34. userBox { display = 'flex' flexWrap = 'wrap' alignItems = 'center' justifyContent = 'flex-end' gap = '.4rem .6rem' marginLeft = 'auto' maxWidth = '100%' }
35. // the identity selector: ident's shadow DOM, restyled to the accent
36. identSelector { '--ident-accent' = colorAccent '--ident-accent-text' = colorAccentText '--ident-background' = colorSurface '--ident-border' = colorBorder '--ident-font' = '600 .9rem/1.4 system-ui, sans-serif' }
37. 'ident-selector::part(button)' { padding = '.35rem .8rem' }
38. 'ident-selector::part(status)' { padding = '.35rem .8rem' }
39. 'a.button' { display = 'inline-block' fontWeight = '600' fontSize = '.9rem' padding = '.35rem .8rem' color = colorAccent border = '1px solid ' + colorAccent borderRadius = '.4rem' }
40. 'a.button:hover' { textDecoration = 'none' background = colorSurface }
41. '.message' { color = colorDanger fontSize = '.9rem' }
42. '.message:empty' { display = 'none' }
43. '.banner' { margin = '0' padding = '.5rem 1rem' background = colorSurface }
44. '.empty' { padding = '1rem' textAlign = 'center' color = colorTextMuted border = '1px dashed ' + colorBorder borderRadius = '.5rem' }
45. '.muted' { fontSize = '.9rem' color = colorTextMuted }
47. // ---- the notes: the list first; a selected note (noteBook.open) replaces it on a phone ------------------
48. noteBook { display = 'block' }
49. noteList { display = 'grid' gap = '.6rem' alignContent = 'start' }
50. 'note-list > header' { display = 'flex' alignItems = 'center' justifyContent = 'space-between' gap = '1rem' }
51. '#notes' { display = 'grid' gap = '.3rem' margin = '0' padding = '0' listStyle = 'none' }
52. '#notes a' { display = 'block' padding = '.55rem .8rem' color = colorText background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.4rem' overflowWrap = 'anywhere' }
53. '#notes a:hover' { textDecoration = 'none' borderColor = colorAccent }
54. '#notes a.selected' { color = colorTextStrong borderColor = colorAccent borderLeftWidth = '.3rem' }
55. noteReader { display = 'block' minWidth = '0' }
56. noteEditor { display = 'grid' gap = '.8rem' }
57. 'note-editor footer' { display = 'flex' flexWrap = 'wrap' alignItems = 'center' gap = '.6rem' }
58. 'note-editor .back' { justifySelf = 'start' }
59. '.ask' { display = 'none' alignItems = 'center' gap = '.6rem' }
60. '.ask.open' { display = 'flex' flexWrap = 'wrap' }
61. 'note-book.open note-list' { display = 'none' }
62. 'note-book:not(.open) note-reader' { display = 'none' }
63. mdEditor { '--md-background' = colorBackgroundSunken '--md-text' = colorText '--md-text-strong' = colorTextStrong '--md-text-muted' = colorTextMuted '--md-border' = colorBorder '--md-accent' = colorAccent '--md-accent-text' = colorAccentText '--md-link' = colorAccent '--md-code-background' = colorSurface '--md-toolbar-background' = colorSurface '--md-danger' = colorDanger '--md-min-height' = '18rem' color = colorText }
65. '@media (min-width: 50rem)' = {
66. noteBook = { display = 'grid' gridTemplateColumns = '20rem minmax(0, 1fr)' gap = '1.5rem' alignItems = 'start' }
67. 'note-book.open note-list' = { display = 'grid' }
68. 'note-book:not(.open) note-reader' = { display = 'block' }
69. 'note-editor .back' = { display = 'none' }
70. }