|
|
||
|---|---|---|
| .. | ||
| templates | ||
| .DS_Store | ||
| CLAUDE.md | ||
| Makefile | ||
| README.md | ||
| apple-touch-icon.png | ||
| clavitor-logo.svg | ||
| clavitor-web | ||
| clavitor-web-linux-amd64 | ||
| clavitor.css | ||
| clavitor.db | ||
| favicon.svg | ||
| go.mod | ||
| go.sum | ||
| main.go | ||
| worldmap.svg | ||
README.md
Styleguide
clavitor.css is the single global stylesheet for all clavitor web surfaces — marketing site (clavitor-web) and the app UI (clavitor).
- Live: https://clavitor.com/styleguide.html
- Source:
clavitor-web/clavitor.css
Rules (no exceptions)
- One stylesheet.
clavitor.cssonly. No Tailwind, no inline styles, no<style>blocks. - One rule per class. If you need a variant, add a modifier class (e.g.
.card.gold), not a new inline style. - One width.
--width: 1280pxvia.container. Never hardcode a max-width anywhere else. - One padding.
--pad: 2remvia.container. Never hardcode horizontal padding. - CSS variables for everything. Colors, spacing, radius, fonts — all via
var(--*).
To use in clavitor app
Copy or symlink clavitor.css into clavitor/web/ and embed it. The token set (colors, fonts, radius) is shared — app UI should feel identical to the marketing site.