dexter/BTerminal
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(v3): add relative-units rule and convert sidebar CSS from px to rem

Browse source 
Add .claude/rules/18-relative-units.md enforcing rem/em for layout CSS
(px only for icons/borders). Convert GlobalTabBar.svelte and App.svelte
sidebar styles from px to rem. Change rail-btn color to --ctp-subtext0.
This commit is contained in:
Hibryda 2026-03-08 00:27:20 +01:00
parent 820467c029
commit 906e967aa0
3 changed files with 28 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

17
.claude/rules/18-relative-units.md Normal file
View file

@ -0,0 +1,17 @@
# Relative Units (CSS)
Use relative units (`em`, `rem`, `%`, `vh`, `vw`) for layout and spacing. Pixels are acceptable only for:
- Icon sizes (`width`/`height` on `<svg>` or icon containers)
- Borders and outlines (`1px solid ...`)
- Box shadows
## Rules
- **Layout dimensions** (width, height, max-width, min-width): use `em`, `rem`, `%`, or viewport units.
- **Padding and margin**: use `em` or `rem`.
- **Font sizes**: use `rem` or `em`, never `px`.
- **Gap, border-radius**: use `em` or `rem`.
- **Media queries**: use `em`.
- When existing code uses `px` for layout elements, convert to relative units as part of the change.
- CSS custom properties for typography (`--ui-font-size`, `--term-font-size`) store `px` values because they feed into JS APIs (xterm.js) that require pixels. This is the only exception beyond icons/borders.