generated from coulomb/repo-seed
feat: add clean timeline example without swimlanes
Created example-1 directory with minimalist timeline template that uses vertical anchor lines to connect items to a central horizontal timeline bar. This demonstrates an alternative visualization style without the swimlane-based layout. Features: - Clean template-v2.svg with vertical dashed anchor lines - Central horizontal timeline bar at y=190 - Items positioned above/below timeline with circle markers - Minimal styling with clean typography - 12-month timeline configuration - Sample data with milestones, development, and research items - Uses standard ITEM_ID and ITEM_TITLE placeholders Files: - template-v2.svg: Clean SVG template with anchor line design - project.json: Configuration for 12-month timeline - sample.csv: Sample timeline data with 14 items - style.css: Minimal CSS styling - output.svg: Generated timeline (for reference) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
73
example-1/style.css
Normal file
73
example-1/style.css
Normal file
@@ -0,0 +1,73 @@
|
||||
/* Clean Timeline Example - Minimal Styling */
|
||||
|
||||
body {
|
||||
font-family: 'Arial', 'Helvetica', sans-serif;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#svgContainer {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
margin: 20px auto;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* SVG styling enhancements */
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Timeline elements */
|
||||
.months text {
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-size: 11px;
|
||||
fill: #666;
|
||||
}
|
||||
|
||||
.timeline-content line {
|
||||
stroke: #333;
|
||||
}
|
||||
|
||||
.timeline-content circle {
|
||||
cursor: pointer;
|
||||
transition: r 0.2s ease;
|
||||
}
|
||||
|
||||
.timeline-content circle:hover {
|
||||
r: 6;
|
||||
}
|
||||
|
||||
.timeline-content text {
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-size: 12px;
|
||||
fill: #333;
|
||||
}
|
||||
|
||||
.item-id {
|
||||
font-weight: 600;
|
||||
fill: #4a90e2;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
fill: #333;
|
||||
}
|
||||
|
||||
/* Responsive container */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#svgContainer {
|
||||
padding: 10px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user