diff --git a/submissions/examples/git-commit-timeline/README.md b/submissions/examples/git-commit-timeline/README.md new file mode 100644 index 00000000..3a936f45 --- /dev/null +++ b/submissions/examples/git-commit-timeline/README.md @@ -0,0 +1,71 @@ +# Git Commit Timeline Component + +A developer-focused timeline component that visually represents commit history, merges, and release milestones. Each node shows a branch badge, commit hash, title, description, and date with a connecting vertical line and color-coded dot indicators. + +## Classes + +| Class | Description | +|---|---| +| `ease-git-timeline` | Vertical timeline container with connecting line | +| `ease-git-node` | Individual commit node with staggered reveal | +| `ease-git-node-release` | Green dot and border for release/tag nodes | +| `ease-git-node-merge` | Purple dot with diamond icon for merge nodes | +| `ease-git-dot` | Circular indicator dot | +| `ease-git-head` | Row for branch badge and commit hash | +| `ease-git-branch` | Branch name badge | +| `ease-git-branch-main` | Green badge for main branch | +| `ease-git-branch-feat` | Purple badge for feature branches | +| `ease-git-hash` | Monospace commit hash | +| `ease-git-content` | Content card with hover lift | +| `ease-git-title` | Commit message title | +| `ease-git-desc` | Commit description | +| `ease-git-meta` | Date metadata | + +## Usage + +```html +
+
+ +
+
+ main + a1b2c3d +
+

v2.0.0 — Production Deployment

+

Stable release with authentication and dashboard features.

+ Jun 4, 2026 +
+
+ +
+ +
+
+ feat/auth + e4f5g6h +
+

Merge pull request #42

+

Add user authentication system with JWT support.

+ Jun 2, 2026 +
+
+ +
+ +
+
+ main + m0n1o2p +
+

Initial Commit

+

Project structure created with core framework setup.

+ May 28, 2026 +
+
+
+``` + +## Why it fits EaseMotion CSS + +Pure CSS Git timeline with staggered reveal animations, color-coded node variants (commit, merge, release), branch badges, monospace commit hashes, and hover lift on content cards. Uses design tokens for colors and spacing. Respects `prefers-reduced-motion`. diff --git a/submissions/examples/git-commit-timeline/demo.html b/submissions/examples/git-commit-timeline/demo.html new file mode 100644 index 00000000..0ebe178a --- /dev/null +++ b/submissions/examples/git-commit-timeline/demo.html @@ -0,0 +1,88 @@ + + + + + + Git Commit Timeline — EaseMotion CSS + + + + +

Git Commit Timeline

+

Commit history and release timeline component — Issue #1159

+ +
+ + +
+ +
+
+ main + a1b2c3d +
+

v2.0.0 — Production Deployment

+

Stable release with authentication and dashboard features.

+ Jun 4, 2026 +
+
+ + +
+ +
+
+ feat/auth + e4f5g6h +
+

Merge pull request #42

+

Add user authentication system with JWT support.

+ Jun 2, 2026 +
+
+ + +
+ +
+
+ feat/auth + i7j8k9l +
+

Implement login flow

+

Add email/password login, OAuth buttons, and session management.

+ Jun 1, 2026 +
+
+ + +
+ +
+
+ main + m0n1o2p +
+

Initial Commit

+

Project structure created with core framework setup.

+ May 28, 2026 +
+
+ +
+ + diff --git a/submissions/examples/git-commit-timeline/style.css b/submissions/examples/git-commit-timeline/style.css new file mode 100644 index 00000000..8a342e9a --- /dev/null +++ b/submissions/examples/git-commit-timeline/style.css @@ -0,0 +1,225 @@ +/* ============================================================ + EaseMotion CSS — Git Commit Timeline Component + Issue #1159 + ============================================================ */ + +/* ── Timeline container ──────────────────────────────────── */ + +.ease-git-timeline { + position: relative; + display: flex; + flex-direction: column; + gap: var(--ease-space-5, 1.25rem); + max-width: 520px; + width: 100%; + padding-left: var(--ease-space-3, 0.75rem); +} + +/* Connecting vertical line */ +.ease-git-timeline::before { + content: ''; + position: absolute; + left: 11px; + top: 14px; + bottom: 14px; + width: 2px; + background: linear-gradient( + to bottom, + rgba(255, 255, 255, 0.2) 0%, + rgba(255, 255, 255, 0.05) 100% + ); + border-radius: 1px; +} + +/* ── Commit node ─────────────────────────────────────────── */ + +.ease-git-node { + position: relative; + display: flex; + align-items: flex-start; + gap: var(--ease-space-4, 1rem); + animation: ease-kf-git-reveal var(--ease-speed-slow, 600ms) var(--ease-ease-out, cubic-bezier(0,0,0.2,1)) both; +} + +.ease-git-node:nth-child(2) { animation-delay: 120ms; } +.ease-git-node:nth-child(3) { animation-delay: 240ms; } +.ease-git-node:nth-child(4) { animation-delay: 360ms; } + +/* ── Dot ─────────────────────────────────────────────────── */ + +.ease-git-dot { + flex-shrink: 0; + width: 24px; + height: 24px; + border-radius: 50%; + border: 2px solid rgba(255, 255, 255, 0.2); + background: rgba(255, 255, 255, 0.05); + position: relative; + z-index: 1; + margin-top: 4px; + display: flex; + align-items: center; + justify-content: center; + transition: + background var(--ease-speed-medium, 300ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1)), + border-color var(--ease-speed-medium, 300ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1)); +} + +/* ── Content card ────────────────────────────────────────── */ + +.ease-git-content { + flex: 1; + background: rgba(255, 255, 255, 0.04); + border: 1.5px solid rgba(255, 255, 255, 0.08); + border-radius: var(--ease-radius-md, 0.5rem); + padding: var(--ease-space-3, 0.75rem) var(--ease-space-4, 1rem); + transition: + transform var(--ease-speed-medium, 300ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1)), + border-color var(--ease-speed-medium, 300ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1)); +} + +.ease-git-content:hover { + transform: translateX(4px); + border-color: rgba(255, 255, 255, 0.2); +} + +/* ── Head row (branch + hash) ────────────────────────────── */ + +.ease-git-head { + display: flex; + align-items: center; + gap: var(--ease-space-2, 0.5rem); + margin-bottom: var(--ease-space-1, 0.25rem); +} + +/* ── Branch badge ────────────────────────────────────────── */ + +.ease-git-branch { + display: inline-block; + font-size: 0.625rem; + font-weight: 600; + font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; + padding: 0.125rem 0.5rem; + border-radius: var(--ease-radius-full, 999px); + text-transform: lowercase; +} + +.ease-git-branch-main { + background: rgba(34, 197, 94, 0.15); + color: var(--ease-color-success, #22c55e); +} + +.ease-git-branch-feat { + background: rgba(108, 99, 255, 0.15); + color: var(--ease-color-primary-light, #a09af8); +} + +/* ── Commit hash ─────────────────────────────────────────── */ + +.ease-git-hash { + font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; + font-size: 0.6875rem; + color: rgba(255, 255, 255, 0.35); +} + +/* ── Title and description ───────────────────────────────── */ + +.ease-git-title { + margin: 0 0 var(--ease-space-1, 0.25rem); + font-size: var(--ease-text-sm, 0.875rem); + font-weight: 600; + line-height: 1.4; +} + +.ease-git-desc { + margin: 0; + font-size: var(--ease-text-xs, 0.75rem); + color: rgba(255, 255, 255, 0.55); + line-height: 1.5; +} + +/* ── Meta (date) ─────────────────────────────────────────── */ + +.ease-git-meta { + display: inline-block; + margin-top: var(--ease-space-1, 0.25rem); + font-size: 0.6875rem; + color: rgba(255, 255, 255, 0.3); +} + +/* ── Node variants ───────────────────────────────────────── */ + +/* Default commit */ +.ease-git-node .ease-git-dot::after { + content: ''; + width: 8px; + height: 8px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.4); +} + +/* Release / tag node */ +.ease-git-node-release .ease-git-dot { + border-color: var(--ease-color-success, #22c55e); + background: rgba(34, 197, 94, 0.1); +} +.ease-git-node-release .ease-git-dot::after { + content: ''; + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--ease-color-success, #22c55e); +} +.ease-git-node-release .ease-git-content { + border-color: rgba(34, 197, 94, 0.25); +} +.ease-git-node-release .ease-git-title { + color: var(--ease-color-success, #22c55e); +} + +/* Merge node */ +.ease-git-node-merge .ease-git-dot { + border-color: var(--ease-color-primary, #6c63ff); + background: rgba(108, 99, 255, 0.1); +} +.ease-git-node-merge .ease-git-dot::after { + content: ''; + width: 10px; + height: 10px; + border-radius: 2px; + transform: rotate(45deg); + background: var(--ease-color-primary, #6c63ff); +} +.ease-git-node-merge .ease-git-content { + border-color: rgba(108, 99, 255, 0.25); +} +.ease-git-node-merge .ease-git-title { + color: var(--ease-color-primary-light, #a09af8); +} + +/* ── Keyframes ───────────────────────────────────────────── */ + +@keyframes ease-kf-git-reveal { + from { + opacity: 0; + transform: translateX(-12px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +/* ── Reduced motion ──────────────────────────────────────── */ + +@media (prefers-reduced-motion: reduce) { + .ease-git-node { + animation: none; + } + .ease-git-content { + transition: none; + } + .ease-git-content:hover { + transform: none; + } +}