components

3.6 KB

1. // components/styles.hl — the SITE's own CSS (page layout: header, main, the home list), served as /__hl/app.css. Every component
2. // carries its own Style in its file (components/*/*.hl). The site shows the library's BASE LOOK (ticket #15): black, white and the greys of
3. // shared/base.hl — it declares none of the WorldAPI tokens (--color-…), so every component shows its own base fallbacks, as in a bare app.
4. // Light: white page, black text; the header is the one black block. No frames. In a styles file a bare name is a TAG (camelCase → kebab), a quoted name is a
5. // selector written verbatim. MOBILE FIRST: every rule is the phone's; the min-width block adds the wide layout.
6. import { var } from 'hl:web/css'
7. import { black, greyDark, grey, greyLight, greyLighter, white } from '../shared/base.hl'
9. '*,
10. *::before,
11. *::after' { boxSizing = 'border-box' }
13. html { colorScheme = 'light' }
14. body { margin = '0' font = '16px/1.5 system-ui, sans-serif' color = black background = white }
15. a { color = black textDecoration = 'underline' textUnderlineOffset = '.2em' }
16. 'a:hover' { textDecorationThickness = '2px' }
17. h1 { margin = '0 0 1rem' fontSize = '1.3rem' lineHeight = '1.3' color = black }
18. h2 { margin = '0' fontSize = '1.1rem' color = black }
19. '.muted' { color = greyDark }
20. button { font = 'inherit' fontWeight = '600' padding = '.4rem .9rem' color = white background = black border = '0' borderRadius = '.4rem' cursor = 'pointer' }
21. 'button:hover' { background = greyDark }
22. 'button.quiet' { color = black background = greyLighter }
23. 'button.quiet:hover' { background = greyLight }
25. applicationHeader { position = 'sticky' top = '0' zIndex = '5' display = 'flex' flexWrap = 'wrap' alignItems = 'baseline' gap = '.2rem 1rem' padding = '.6rem 1rem' color = white background = black }
26. 'application-header .brand' { fontWeight = '800' fontSize = '1.15rem' color = white textDecoration = 'none' }
27. 'application-header p' { margin = '0' color = grey fontSize = '.9rem' }
28. // ---- offline (mission 046, components/main.hl): the note under the header, and the probe whose endless animation is
29. // the shell's 1 s tick (it must be rendered for the animation to run — not display none — so: invisible)
30. offlineNote { display = 'block' padding = '.5rem 1rem' color = black background = greyLight }
31. netProbe { position = 'fixed' left = '0' top = '0' width = '1px' height = '1px' opacity = '0' pointerEvents = 'none' animation = 'components-net-tick 1s linear infinite' }
32. '@keyframes components-net-tick' = {
33. 'from' = { opacity = '0' }
34. to = { opacity = '0' }
35. }
36. main { display = 'block' maxWidth = '40rem' margin = '0 auto' padding = '1rem' }
38. // ---- the home ---------------------------------------------------------------------------------
39. '#components' { display = 'grid' gap = '.5rem' margin = '0' padding = '0' listStyle = 'none' }
40. '#components li' { display = 'grid' gap = '.15rem' padding = '.7rem 1rem' background = greyLighter borderRadius = '.5rem' }
41. '#components p' { margin = '0' color = greyDark }
43. // ---- the Markdown editor demo ------------------------------------------------------------------
44. 'md-editor-demo h2' { margin = '1rem 0 .3rem' fontSize = '1rem' }
45. 'md-editor-demo pre' { margin = '0 0 1rem' whiteSpace = 'pre-wrap' overflowWrap = 'anywhere' }
46. 'md-editor-demo form > md-editor' { margin = '0 0 1rem' }
48. // ---- the modal demo --------------------------------------------------------------------------------
49. '.modal-openers' { display = 'flex' flexWrap = 'wrap' gap = '.5rem' }
50. 'modal-demo input' { font = 'inherit' padding = '.35rem .6rem' color = black background = greyLighter border = '0' borderRadius = '.4rem' }