Initial: pi-skill — 68 skills, 43 extensions, 11 themes for Pi
This commit is contained in:
20
skills/references/type-timeline.md
Normal file
20
skills/references/type-timeline.md
Normal file
@@ -0,0 +1,20 @@
|
||||
# Timeline
|
||||
|
||||
**Best for:** release history, project milestones, incident timelines, roadmaps, changelog visualizations.
|
||||
|
||||
## Layout conventions
|
||||
- Horizontal hairline baseline across the middle (`stroke-width=1`).
|
||||
- Tick marks at time boundaries (quarters, months, sprints) with date labels below in Geist Mono.
|
||||
- Events: small filled circles (`r=4`) on the baseline. Labels alternate above and below to prevent collision, connected to the circle with a 1px hairline drop.
|
||||
- Major milestones: coral circle (`r=6`) + bold Geist label.
|
||||
- Time scale must be honest: if intervals are non-equal, space the circles non-equally. Don't fake linear spacing for aesthetics. Break the axis visibly if a region is too dense.
|
||||
|
||||
## Anti-patterns
|
||||
- Equal-spacing events that aren't equally spaced in time.
|
||||
- Missing axis labels ("what unit is this?").
|
||||
- Crowded labels without vertical offset — illegible.
|
||||
|
||||
## Examples
|
||||
- `assets/example-timeline.html` — minimal light
|
||||
- `assets/example-timeline-dark.html` — minimal dark
|
||||
- `assets/example-timeline-full.html` — full editorial
|
||||
Reference in New Issue
Block a user