Implements frontend styling for issue #11: - Add .dropdown-section CSS for section headers (Popular, All Currencies) - Add .dropdown-divider CSS for visual separation between sections - Update test-index.html with dynamic currency loading from /api/currencies - Update base.tmpl with split language/currency selectors - JavaScript fetches currencies and renders with section headers - Maintains localStorage persistence for currency preference - Error handling with ERR-CURRENCY-001/002 codes Design Requirements Met: - Section headers use 11px uppercase with 0.08em letter-spacing - Divider uses 1px border with 8px vertical margins - Dropdown maintains existing hover/click behavior - Mobile responsive (stacks in hamburger menu) fixes #11 Author: Luna <luna-20250409-001> |
||
|---|---|---|
| .. | ||
| admin | ||
| fonts | ||
| templates | ||
| .DS_Store | ||
| CLAUDE.md | ||
| Makefile | ||
| OAUTH_SETUP.md | ||
| README.md | ||
| apple-touch-icon.png | ||
| clavitor-logo.svg | ||
| clavitor-web | ||
| clavitor-web-linux-amd64 | ||
| clavitor.css | ||
| clavitor.db | ||
| clavitor.db.backup-prod-20260408_001632 | ||
| clavitor.db.backup-prod-20260408_001632.gz | ||
| clavitor.db.backup-prod-20260408_001632.xz | ||
| clavitor.db.backup-prod-20260408_001632.zst | ||
| clavitor.db.backup-prod-20260408_001632.zst19 | ||
| clavitor.db.backup.20260407_235845 | ||
| corporate.db | ||
| favicon.svg | ||
| go.mod | ||
| go.sum | ||
| main.go | ||
| oauth.go | ||
| onboarding.go | ||
| schema.sql | ||
| test-for-mme.html | ||
| test-hosted.html | ||
| test-index.html | ||
| test-mobile.html | ||
| test-signup.html | ||
| tlw.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.