Add Drupal-branded interactive timeline visualization #59
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Features official Drupal brand elements including: - GUI block styled cards with control dots and layered frames - Brand colors (Blue, Navy, Yellow, Purple) for priority levels - Decorative GUI blocks in header - 45-degree shadow line patterns - Responsive design with Noto Sans typography - Filter by priority and search functionality - Era-based grouping (Early Years, Growth, Modern) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Reverse chronological order so the timeline reads from Drupal 1.0 (2001) to present day, showing the natural progression of Drupal history. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Replace heavy GUI block frames with clean border-left accent - Remove control dots from cards (keep only on era headers) - Use subtle box-shadow for depth instead of layered frames - Add gradient background for priority-1 items - Fix image sizing to use natural dimensions - Improve hover effects with translateY instead of translate Full GUI blocks with control dots work for hero elements but create visual clutter when repeated on every card in a list. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Author
|
I decided to create a version with a "clean" application of the drupal-brand-skill. |
Use the official CDN as recommended by the upstream repository: https://cdn.jsdelivr.net/gh/weitzman/drupal-timeline/drupal-timeline.json This ensures the visualization always shows the latest timeline data without requiring updates to this repository. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Position dots precisely on the timeline line center (line at 8px, 3px wide = center at 9.5px) - Use top: 50% with transform: translate(-50%, -50%) to vertically center dots on their associated cards - Update mobile responsive styles with matching calculations Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Header becomes sticky and shrinks when scrolling past initial viewport - Compact header shows smaller logo and title in horizontal layout - Year navigation sidebar on left side for quick navigation through timeline - Sidebar highlights current year as user scrolls - Sidebar updates when filtering events - Responsive: sidebar simplifies on medium screens, hides on mobile - Smooth scroll when clicking year links Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Features
Test plan
Generated with Claude Code