Skip to content

Refactor timeline CSS to follow project conventions#594

Merged
yepzdk merged 2 commits intofeature/timeline-conversion2from
feature/timeline-css-optimization
Jan 23, 2026
Merged

Refactor timeline CSS to follow project conventions#594
yepzdk merged 2 commits intofeature/timeline-conversion2from
feature/timeline-css-optimization

Conversation

@yepzdk
Copy link
Copy Markdown
Contributor

@yepzdk yepzdk commented Jan 22, 2026

Summary

  • Replaced hardcoded hex colors with project color tokens from _color-tokens.scss
  • Removed font-family override to inherit from theme (Arial stack)
  • Created SCSS mixins for status/accent variant styles, reducing ~190 lines of repetitive code
  • Used @for loop for z-index declarations (10 rules → 1 loop)
  • Replaced magic numbers with SCSS variables ($spacer, $timeline-card-gap, etc.)

Test plan

  • Verify timeline renders correctly on project pages
  • Check all status variants (completed, current, upcoming, note) display correctly
  • Check accent variants (pink, blue) display correctly
  • Test responsive behavior (mobile carousel, tablet, desktop)
  • Verify mini-nav works correctly
  • Check print styles

🤖 Generated with Claude Code

- Replaced hardcoded hex colors with project color tokens
- Removed font-family override to inherit from theme
- Created SCSS mixins for status and accent variant styles
- Used @for loop for z-index declarations
- Replaced magic numbers with SCSS variables
- Converted CSS comments to SCSS comments
- Used SCSS nesting for better organization

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@yepzdk yepzdk requested a review from martinyde January 22, 2026 13:11
Copy link
Copy Markdown
Contributor

@martinyde martinyde left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few questions

// =============================================================================

// Layout variables
$timeline-max-width: 900px;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this right? (px width)

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed with bootstrap container widts

font-size: $font-size-base;
line-height: $line-height-base;
color: var(--text-secondary);
max-width: 600px;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

px width

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed with bootstrap container widts

Addresses PR review feedback:
- $timeline-max-width: uses lg container (960px)
- Description max-width: uses sm container (540px)
- Legend max-width: uses sm container (540px)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@yepzdk yepzdk merged commit 9d53907 into feature/timeline-conversion2 Jan 23, 2026
16 of 21 checks passed
@yepzdk yepzdk deleted the feature/timeline-css-optimization branch January 23, 2026 11:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants