generated from coulomb/repo-seed
tegwick
d5c1ca239d
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>
74 lines
1.0 KiB
CSS
74 lines
1.0 KiB
CSS
/* 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;
|
|
}
|
|
}
|