From fe0e2f671f682f4d2abe1cfeb8cb2087a4d71f2d Mon Sep 17 00:00:00 2001 From: Alex Urevick-Ackelsberg Date: Mon, 26 Jan 2026 11:14:39 -0500 Subject: [PATCH 1/7] Add Drupal-branded interactive timeline with GUI block styling 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 --- index.html | 991 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 991 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..0591e70 --- /dev/null +++ b/index.html @@ -0,0 +1,991 @@ + + + + + + Drupal Timeline - A History of Drupal + + + + + + + + + + +
+ +
+
+
+
+ +
+ +

Drupal Timeline

+

Celebrating over two decades of building an open web for everyone

+
+
+ +
+ 0 Events + 0 Years of History + 0 Contributors +
+ + + +
+
+ +

Loading Drupal history...

+
+
+ + + + + + From 23085c68edb612575f889efb1869009db10ab25b Mon Sep 17 00:00:00 2001 From: Alex Urevick-Ackelsberg Date: Mon, 26 Jan 2026 11:16:03 -0500 Subject: [PATCH 2/7] Change timeline order to display oldest events first 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 --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 0591e70..aa8485e 100644 --- a/index.html +++ b/index.html @@ -821,7 +821,7 @@

Drupal Timeline

init() { this.events = [...TIMELINE_DATA]; - this.events.sort((a, b) => new Date(b.date) - new Date(a.date)); + this.events.sort((a, b) => new Date(a.date) - new Date(b.date)); this.filteredEvents = [...this.events]; this.updateStats(); this.render(); @@ -924,7 +924,7 @@

No events found

}); // Render eras in order - const eraOrder = ['modern', 'growth', 'early']; + const eraOrder = ['early', 'growth', 'modern']; let html = ''; eraOrder.forEach(eraName => { From f6244ce6389f9ed2e7067a80272e5717696afd29 Mon Sep 17 00:00:00 2001 From: Alex Urevick-Ackelsberg Date: Mon, 26 Jan 2026 11:22:10 -0500 Subject: [PATCH 3/7] Simplify card styling with border accent instead of full GUI blocks - 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 --- index.html | 112 +++++++++++++++-------------------------------------- 1 file changed, 31 insertions(+), 81 deletions(-) diff --git a/index.html b/index.html index aa8485e..62f17e1 100644 --- a/index.html +++ b/index.html @@ -349,92 +349,52 @@ border-radius: 3px; } - /* Timeline Event Card - GUI Block style */ + /* Timeline Event Card - Clean style with border accent */ .event-card { position: relative; background: var(--drupal-white); - border-radius: 16px; - padding: 1rem 1.25rem 1.25rem 1.25rem; + border-radius: 12px; + padding: 1.25rem; margin-bottom: 1.5rem; - border: 2px solid var(--drupal-blue); - transition: transform 0.2s ease, box-shadow 0.2s ease; + border-left: 5px solid var(--drupal-blue); + box-shadow: 0 4px 16px rgba(18, 40, 95, 0.08); + transition: transform 0.3s ease, box-shadow 0.3s ease; animation: slideIn 0.3s ease forwards; opacity: 0; } - /* GUI Block shadow layer for cards */ - .event-card::after { - content: ''; - position: absolute; - top: 5px; - left: 5px; - right: -5px; - bottom: -5px; - border-radius: 16px; - border: 2px solid var(--drupal-blue); - opacity: 0.25; - z-index: -1; - transition: opacity 0.2s ease; - } - .event-card:hover { - transform: translate(2px, -2px); - } - - .event-card:hover::after { - opacity: 0.4; + transform: translateY(-4px); + box-shadow: 0 8px 32px rgba(18, 40, 95, 0.15); } @keyframes slideIn { from { opacity: 0; - transform: translateX(-20px); + transform: translateY(20px); } to { opacity: 1; - transform: translateX(0); + transform: translateY(0); } } - /* Priority-based card colors */ + /* Priority-based card accents */ .event-card.priority-1 { - border-color: var(--drupal-yellow); - } - .event-card.priority-1::after { - border-color: var(--drupal-yellow); - } - .event-card.priority-1 .gui-controls { - color: var(--drupal-yellow); + border-left-color: var(--drupal-blue); + background: linear-gradient(135deg, var(--drupal-white) 0%, var(--drupal-light-blue) 100%); } .event-card.priority-2 { - border-color: var(--drupal-blue); - } - .event-card.priority-2::after { - border-color: var(--drupal-blue); - } - .event-card.priority-2 .gui-controls { - color: var(--drupal-blue); + border-left-color: var(--drupal-dark-blue); } .event-card.priority-3 { - border-color: var(--drupal-dark-blue); - } - .event-card.priority-3::after { - border-color: var(--drupal-dark-blue); - } - .event-card.priority-3 .gui-controls { - color: var(--drupal-dark-blue); + border-left-color: var(--drupal-purple); } .event-card.priority-4 { - border-color: var(--drupal-purple); - } - .event-card.priority-4::after { - border-color: var(--drupal-purple); - } - .event-card.priority-4 .gui-controls { - color: var(--drupal-purple); + border-left-color: #a8d8ea; } /* Timeline Dot */ @@ -442,24 +402,19 @@ position: absolute; left: -2.5rem; top: 1.5rem; - width: 14px; - height: 14px; - background: var(--drupal-white); - border: 3px solid var(--drupal-blue); + width: 12px; + height: 12px; + background: linear-gradient(135deg, var(--drupal-navy), var(--drupal-blue)); + border: 2px solid var(--drupal-white); border-radius: 50%; transform: translateX(-50%); z-index: 1; + box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .event-card.priority-1 .event-card-dot { - width: 18px; - height: 18px; - background: var(--drupal-yellow); - border-color: var(--drupal-navy); - } - - .event-card.priority-2 .event-card-dot { - background: var(--drupal-light-blue); + width: 16px; + height: 16px; } /* Event Date */ @@ -510,11 +465,11 @@ } .event-avatar { - width: 32px; - height: 32px; - border-radius: 50%; + width: 40px; + height: 40px; + border-radius: 12px; object-fit: cover; - border: 2px solid var(--drupal-light-blue); + box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .event-username { @@ -524,11 +479,11 @@ } .event-thumbnail { - width: 100%; - max-width: 300px; - border-radius: 12px; + max-width: 100%; + height: auto; + border-radius: 8px; margin-top: 1rem; - border: 2px solid var(--drupal-light-blue); + border: 1px solid var(--drupal-light-blue); } /* Priority Badges */ @@ -952,11 +907,6 @@

${era.title}

html += `
-
- - - -

${event.href ? `${event.title}` : event.title} From 06a228864b663a4886dca1cda657ab959fefff17 Mon Sep 17 00:00:00 2001 From: Alex Urevick-Ackelsberg Date: Mon, 26 Jan 2026 11:39:59 -0500 Subject: [PATCH 4/7] Fetch timeline data from jsdelivr CDN instead of embedding 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 --- index.html | 32 ++++++++++++++++++++++---------- 1 file changed, 22 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 62f17e1..9fe5de8 100644 --- a/index.html +++ b/index.html @@ -764,23 +764,35 @@

Drupal Timeline