jimeh/commonflow.org
1
0
Fork 0
mirror of https://github.com/jimeh/commonflow.org.git synced 2026-02-19 05:46:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip: fix flicering and styling of hero section

Browse Source
This commit is contained in:
Jim Myhrberg
2026-01-11 22:53:16 +00:00
parent 05c8fc4aee
commit de3fae26ca
11 changed files with 63 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/404.html
View File

@@ -8,7 +8,7 @@
document.documentElement.classList.add("dark");
}
})();
</script><link rel="stylesheet" href="/_astro/index.qe8PXlQZ.css"></head> <body class="min-h-screen"> <div class="flex flex-col items-center justify-center min-h-screen p-8"> <div class="text-center"> <h1 class="text-[8rem] sm:text-[12rem] font-display font-bold leading-none
</script><link rel="stylesheet" href="/_astro/index.CP8LmReS.css"></head> <body class="min-h-screen"> <div class="flex flex-col items-center justify-center min-h-screen p-8"> <div class="text-center"> <h1 class="text-[8rem] sm:text-[12rem] font-display font-bold leading-none
text-gray-300 dark:text-neutral-700">
404
</h1> <p class="text-xl mb-2 text-gray-600 dark:text-neutral-400">

2
docs/_astro/index.qe8PXlQZ.css → docs/_astro/index.CP8LmReS.css
View File

File diff suppressed because one or more lines are too long

6
docs/index.html
View File

@@ -8,7 +8,7 @@
document.documentElement.classList.add("dark");
}
})();
</script><link rel="stylesheet" href="/_astro/index.qe8PXlQZ.css"></head> <body class="min-h-screen"> <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b border-transparent
</script><link rel="stylesheet" href="/_astro/index.CP8LmReS.css"></head> <body class="min-h-screen"> <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b border-transparent
translate-y-[-100%] transition-transform duration-300
backdrop-blur-xl bg-gray-50/85 dark:bg-neutral-950/85"> <div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"> <!-- Logo / Title + Version --> <div class="flex items-center gap-3"> <a href="#hero" class="flex items-center gap-3 no-underline
text-gray-950 dark:text-neutral-50
@@ -114,7 +114,7 @@ A sensible git workflow for teams who ship
bg-gray-100 border-gray-200 text-gray-500
dark:bg-neutral-800/50 dark:border-neutral-700 dark:text-neutral-400">
v1.0.0-rc.5 </span> </div> <!-- SVG Diagram --> <div class="animate-fade-in-up delay-300
relative mx-auto mb-12 p-4 sm:p-8
relative mx-auto mb-12 py-8 px-6 sm:py-16 sm:px-14
bg-white dark:bg-neutral-900
rounded-2xl shadow-lg dark:shadow-none
border border-gray-200 dark:border-neutral-800"> <img src="/spec/1.0.0-rc.5.svg" alt="Git Common-Flow diagram" class="w-full h-auto max-w-3xl mx-auto
@@ -139,7 +139,7 @@ FAQ
</a> </nav> </div> <!-- Scroll indicator --> <a href="#about" class="absolute bottom-8 left-1/2 -translate-x-1/2
animate-fade-in delay-700
text-gray-500 dark:text-neutral-500
hover:text-sky-600 transition-colors" aria-label="Scroll to content"> <svg width="1em" height="1em" class="w-6 h-6 animate-bounce-subtle" data-icon="heroicons:arrow-down"> <symbol id="ai:heroicons:arrow-down" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"/></symbol><use href="#ai:heroicons:arrow-down"></use> </svg> </a> </section> <section id="about" class="py-20 sm:py-28"> <div class="section-container"> <div class="max-w-3xl mx-auto"> <div class="mb-12 text-center"> <h2 class="text-3xl sm:text-4xl mb-4">About Common-Flow</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> A practical git workflow that combines the best of GitHub Flow with versioned releases </p> </div> <!-- Introduction --> <div class="prose-spec mb-12"><p>Common-Flow is an attempt to gather a sensible selection of the most common
hover:text-sky-600 transition-colors" aria-label="Scroll to content"> <svg width="1em" height="1em" class="w-6 h-6 animate-bounce-subtle" data-icon="heroicons:arrow-down"> <symbol id="ai:heroicons:arrow-down" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"/></symbol><use href="#ai:heroicons:arrow-down"></use> </svg> </a> </section> <script type="module">const a=["animate-fade-in","animate-fade-in-up","animate-fade-in-down","animate-slide-in-left"];function n(){const t=a.map(e=>`.${e}`).join(", ");document.querySelectorAll(t).forEach(e=>{e.addEventListener("animationend",()=>{a.forEach(i=>e.classList.remove(i)),e.className=e.className.replace(/\bdelay-\d+\b/g,"").trim()},{once:!0})})}n();document.addEventListener("astro:after-swap",n);</script> <section id="about" class="py-20 sm:py-28"> <div class="section-container"> <div class="max-w-3xl mx-auto"> <div class="mb-12 text-center"> <h2 class="text-3xl sm:text-4xl mb-4">About Common-Flow</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> A practical git workflow that combines the best of GitHub Flow with versioned releases </p> </div> <!-- Introduction --> <div class="prose-spec mb-12"><p>Common-Flow is an attempt to gather a sensible selection of the most common
usage patterns of git into a single and concise specification. It is based on
the <a href="http://scottchacon.com/2011/08/31/github-flow.html">original variant</a>
of <a href="https://guides.github.com/introduction/flow/">GitHub Flow</a>, while taking

6
docs/spec/1.0.0-rc.1/index.html
View File

@@ -8,7 +8,7 @@
document.documentElement.classList.add("dark");
}
})();
</script><link rel="stylesheet" href="/_astro/index.qe8PXlQZ.css"></head> <body class="min-h-screen"> <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b border-transparent
</script><link rel="stylesheet" href="/_astro/index.CP8LmReS.css"></head> <body class="min-h-screen"> <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b border-transparent
translate-y-[-100%] transition-transform duration-300
backdrop-blur-xl bg-gray-50/85 dark:bg-neutral-950/85"> <div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"> <!-- Logo / Title + Version --> <div class="flex items-center gap-3"> <a href="#hero" class="flex items-center gap-3 no-underline
text-gray-950 dark:text-neutral-50
@@ -114,7 +114,7 @@ A sensible git workflow for teams who ship
bg-gray-100 border-gray-200 text-gray-500
dark:bg-neutral-800/50 dark:border-neutral-700 dark:text-neutral-400">
v1.0.0-rc.1 </span> </div> <!-- SVG Diagram --> <div class="animate-fade-in-up delay-300
relative mx-auto mb-12 p-4 sm:p-8
relative mx-auto mb-12 py-8 px-6 sm:py-16 sm:px-14
bg-white dark:bg-neutral-900
rounded-2xl shadow-lg dark:shadow-none
border border-gray-200 dark:border-neutral-800"> <img src="/spec/1.0.0-rc.1.svg" alt="Git Common-Flow diagram" class="w-full h-auto max-w-3xl mx-auto
@@ -139,7 +139,7 @@ FAQ
</a> </nav> </div> <!-- Scroll indicator --> <a href="#about" class="absolute bottom-8 left-1/2 -translate-x-1/2
animate-fade-in delay-700
text-gray-500 dark:text-neutral-500
hover:text-sky-600 transition-colors" aria-label="Scroll to content"> <svg width="1em" height="1em" class="w-6 h-6 animate-bounce-subtle" data-icon="heroicons:arrow-down"> <symbol id="ai:heroicons:arrow-down" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"/></symbol><use href="#ai:heroicons:arrow-down"></use> </svg> </a> </section> <section id="about" class="py-20 sm:py-28"> <div class="section-container"> <div class="max-w-3xl mx-auto"> <div class="mb-12 text-center"> <h2 class="text-3xl sm:text-4xl mb-4">About Common-Flow</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> A practical git workflow that combines the best of GitHub Flow with versioned releases </p> </div> <!-- Introduction --> <div class="prose-spec mb-12"></div> <!-- Summary as feature cards --> <div class="mb-16"> <h3 class="text-xl font-display font-semibold mb-6
hover:text-sky-600 transition-colors" aria-label="Scroll to content"> <svg width="1em" height="1em" class="w-6 h-6 animate-bounce-subtle" data-icon="heroicons:arrow-down"> <symbol id="ai:heroicons:arrow-down" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"/></symbol><use href="#ai:heroicons:arrow-down"></use> </svg> </a> </section> <script type="module">const a=["animate-fade-in","animate-fade-in-up","animate-fade-in-down","animate-slide-in-left"];function n(){const t=a.map(e=>`.${e}`).join(", ");document.querySelectorAll(t).forEach(e=>{e.addEventListener("animationend",()=>{a.forEach(i=>e.classList.remove(i)),e.className=e.className.replace(/\bdelay-\d+\b/g,"").trim()},{once:!0})})}n();document.addEventListener("astro:after-swap",n);</script> <section id="about" class="py-20 sm:py-28"> <div class="section-container"> <div class="max-w-3xl mx-auto"> <div class="mb-12 text-center"> <h2 class="text-3xl sm:text-4xl mb-4">About Common-Flow</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> A practical git workflow that combines the best of GitHub Flow with versioned releases </p> </div> <!-- Introduction --> <div class="prose-spec mb-12"></div> <!-- Summary as feature cards --> <div class="mb-16"> <h3 class="text-xl font-display font-semibold mb-6
text-gray-950 dark:text-neutral-50">
Key Principles
</h3> <div class="prose-spec"><p>Common-Flow is an attempt to gather a sensible selection of the most common

6
docs/spec/1.0.0-rc.2/index.html
View File

@@ -8,7 +8,7 @@
document.documentElement.classList.add("dark");
}
})();
</script><link rel="stylesheet" href="/_astro/index.qe8PXlQZ.css"></head> <body class="min-h-screen"> <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b border-transparent
</script><link rel="stylesheet" href="/_astro/index.CP8LmReS.css"></head> <body class="min-h-screen"> <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b border-transparent
translate-y-[-100%] transition-transform duration-300
backdrop-blur-xl bg-gray-50/85 dark:bg-neutral-950/85"> <div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"> <!-- Logo / Title + Version --> <div class="flex items-center gap-3"> <a href="#hero" class="flex items-center gap-3 no-underline
text-gray-950 dark:text-neutral-50
@@ -114,7 +114,7 @@ A sensible git workflow for teams who ship
bg-gray-100 border-gray-200 text-gray-500
dark:bg-neutral-800/50 dark:border-neutral-700 dark:text-neutral-400">
v1.0.0-rc.2 </span> </div> <!-- SVG Diagram --> <div class="animate-fade-in-up delay-300
relative mx-auto mb-12 p-4 sm:p-8
relative mx-auto mb-12 py-8 px-6 sm:py-16 sm:px-14
bg-white dark:bg-neutral-900
rounded-2xl shadow-lg dark:shadow-none
border border-gray-200 dark:border-neutral-800"> <img src="/spec/1.0.0-rc.2.svg" alt="Git Common-Flow diagram" class="w-full h-auto max-w-3xl mx-auto
@@ -139,7 +139,7 @@ FAQ
</a> </nav> </div> <!-- Scroll indicator --> <a href="#about" class="absolute bottom-8 left-1/2 -translate-x-1/2
animate-fade-in delay-700
text-gray-500 dark:text-neutral-500
hover:text-sky-600 transition-colors" aria-label="Scroll to content"> <svg width="1em" height="1em" class="w-6 h-6 animate-bounce-subtle" data-icon="heroicons:arrow-down"> <symbol id="ai:heroicons:arrow-down" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"/></symbol><use href="#ai:heroicons:arrow-down"></use> </svg> </a> </section> <section id="about" class="py-20 sm:py-28"> <div class="section-container"> <div class="max-w-3xl mx-auto"> <div class="mb-12 text-center"> <h2 class="text-3xl sm:text-4xl mb-4">About Common-Flow</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> A practical git workflow that combines the best of GitHub Flow with versioned releases </p> </div> <!-- Introduction --> <div class="prose-spec mb-12"></div> <!-- Summary as feature cards --> <div class="mb-16"> <h3 class="text-xl font-display font-semibold mb-6
hover:text-sky-600 transition-colors" aria-label="Scroll to content"> <svg width="1em" height="1em" class="w-6 h-6 animate-bounce-subtle" data-icon="heroicons:arrow-down"> <symbol id="ai:heroicons:arrow-down" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"/></symbol><use href="#ai:heroicons:arrow-down"></use> </svg> </a> </section> <script type="module">const a=["animate-fade-in","animate-fade-in-up","animate-fade-in-down","animate-slide-in-left"];function n(){const t=a.map(e=>`.${e}`).join(", ");document.querySelectorAll(t).forEach(e=>{e.addEventListener("animationend",()=>{a.forEach(i=>e.classList.remove(i)),e.className=e.className.replace(/\bdelay-\d+\b/g,"").trim()},{once:!0})})}n();document.addEventListener("astro:after-swap",n);</script> <section id="about" class="py-20 sm:py-28"> <div class="section-container"> <div class="max-w-3xl mx-auto"> <div class="mb-12 text-center"> <h2 class="text-3xl sm:text-4xl mb-4">About Common-Flow</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> A practical git workflow that combines the best of GitHub Flow with versioned releases </p> </div> <!-- Introduction --> <div class="prose-spec mb-12"></div> <!-- Summary as feature cards --> <div class="mb-16"> <h3 class="text-xl font-display font-semibold mb-6
text-gray-950 dark:text-neutral-50">
Key Principles
</h3> <div class="prose-spec"><p>Common-Flow is an attempt to gather a sensible selection of the most common

6
docs/spec/1.0.0-rc.3/index.html
View File

@@ -8,7 +8,7 @@
document.documentElement.classList.add("dark");
}
})();
</script><link rel="stylesheet" href="/_astro/index.qe8PXlQZ.css"></head> <body class="min-h-screen"> <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b border-transparent
</script><link rel="stylesheet" href="/_astro/index.CP8LmReS.css"></head> <body class="min-h-screen"> <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b border-transparent
translate-y-[-100%] transition-transform duration-300
backdrop-blur-xl bg-gray-50/85 dark:bg-neutral-950/85"> <div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"> <!-- Logo / Title + Version --> <div class="flex items-center gap-3"> <a href="#hero" class="flex items-center gap-3 no-underline
text-gray-950 dark:text-neutral-50
@@ -114,7 +114,7 @@ A sensible git workflow for teams who ship
bg-gray-100 border-gray-200 text-gray-500
dark:bg-neutral-800/50 dark:border-neutral-700 dark:text-neutral-400">
v1.0.0-rc.3 </span> </div> <!-- SVG Diagram --> <div class="animate-fade-in-up delay-300
relative mx-auto mb-12 p-4 sm:p-8
relative mx-auto mb-12 py-8 px-6 sm:py-16 sm:px-14
bg-white dark:bg-neutral-900
rounded-2xl shadow-lg dark:shadow-none
border border-gray-200 dark:border-neutral-800"> <img src="/spec/1.0.0-rc.3.svg" alt="Git Common-Flow diagram" class="w-full h-auto max-w-3xl mx-auto
@@ -139,7 +139,7 @@ FAQ
</a> </nav> </div> <!-- Scroll indicator --> <a href="#about" class="absolute bottom-8 left-1/2 -translate-x-1/2
animate-fade-in delay-700
text-gray-500 dark:text-neutral-500
hover:text-sky-600 transition-colors" aria-label="Scroll to content"> <svg width="1em" height="1em" class="w-6 h-6 animate-bounce-subtle" data-icon="heroicons:arrow-down"> <symbol id="ai:heroicons:arrow-down" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"/></symbol><use href="#ai:heroicons:arrow-down"></use> </svg> </a> </section> <section id="about" class="py-20 sm:py-28"> <div class="section-container"> <div class="max-w-3xl mx-auto"> <div class="mb-12 text-center"> <h2 class="text-3xl sm:text-4xl mb-4">About Common-Flow</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> A practical git workflow that combines the best of GitHub Flow with versioned releases </p> </div> <!-- Introduction --> <div class="prose-spec mb-12"></div> <!-- Summary as feature cards --> <div class="mb-16"> <h3 class="text-xl font-display font-semibold mb-6
hover:text-sky-600 transition-colors" aria-label="Scroll to content"> <svg width="1em" height="1em" class="w-6 h-6 animate-bounce-subtle" data-icon="heroicons:arrow-down"> <symbol id="ai:heroicons:arrow-down" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"/></symbol><use href="#ai:heroicons:arrow-down"></use> </svg> </a> </section> <script type="module">const a=["animate-fade-in","animate-fade-in-up","animate-fade-in-down","animate-slide-in-left"];function n(){const t=a.map(e=>`.${e}`).join(", ");document.querySelectorAll(t).forEach(e=>{e.addEventListener("animationend",()=>{a.forEach(i=>e.classList.remove(i)),e.className=e.className.replace(/\bdelay-\d+\b/g,"").trim()},{once:!0})})}n();document.addEventListener("astro:after-swap",n);</script> <section id="about" class="py-20 sm:py-28"> <div class="section-container"> <div class="max-w-3xl mx-auto"> <div class="mb-12 text-center"> <h2 class="text-3xl sm:text-4xl mb-4">About Common-Flow</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> A practical git workflow that combines the best of GitHub Flow with versioned releases </p> </div> <!-- Introduction --> <div class="prose-spec mb-12"></div> <!-- Summary as feature cards --> <div class="mb-16"> <h3 class="text-xl font-display font-semibold mb-6
text-gray-950 dark:text-neutral-50">
Key Principles
</h3> <div class="prose-spec"><p>Common-Flow is an attempt to gather a sensible selection of the most common

6
docs/spec/1.0.0-rc.4/index.html
View File

@@ -8,7 +8,7 @@
document.documentElement.classList.add("dark");
}
})();
</script><link rel="stylesheet" href="/_astro/index.qe8PXlQZ.css"></head> <body class="min-h-screen"> <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b border-transparent
</script><link rel="stylesheet" href="/_astro/index.CP8LmReS.css"></head> <body class="min-h-screen"> <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b border-transparent
translate-y-[-100%] transition-transform duration-300
backdrop-blur-xl bg-gray-50/85 dark:bg-neutral-950/85"> <div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"> <!-- Logo / Title + Version --> <div class="flex items-center gap-3"> <a href="#hero" class="flex items-center gap-3 no-underline
text-gray-950 dark:text-neutral-50
@@ -114,7 +114,7 @@ A sensible git workflow for teams who ship
bg-gray-100 border-gray-200 text-gray-500
dark:bg-neutral-800/50 dark:border-neutral-700 dark:text-neutral-400">
v1.0.0-rc.4 </span> </div> <!-- SVG Diagram --> <div class="animate-fade-in-up delay-300
relative mx-auto mb-12 p-4 sm:p-8
relative mx-auto mb-12 py-8 px-6 sm:py-16 sm:px-14
bg-white dark:bg-neutral-900
rounded-2xl shadow-lg dark:shadow-none
border border-gray-200 dark:border-neutral-800"> <img src="/spec/1.0.0-rc.4.svg" alt="Git Common-Flow diagram" class="w-full h-auto max-w-3xl mx-auto
@@ -139,7 +139,7 @@ FAQ
</a> </nav> </div> <!-- Scroll indicator --> <a href="#about" class="absolute bottom-8 left-1/2 -translate-x-1/2
animate-fade-in delay-700
text-gray-500 dark:text-neutral-500
hover:text-sky-600 transition-colors" aria-label="Scroll to content"> <svg width="1em" height="1em" class="w-6 h-6 animate-bounce-subtle" data-icon="heroicons:arrow-down"> <symbol id="ai:heroicons:arrow-down" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"/></symbol><use href="#ai:heroicons:arrow-down"></use> </svg> </a> </section> <section id="about" class="py-20 sm:py-28"> <div class="section-container"> <div class="max-w-3xl mx-auto"> <div class="mb-12 text-center"> <h2 class="text-3xl sm:text-4xl mb-4">About Common-Flow</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> A practical git workflow that combines the best of GitHub Flow with versioned releases </p> </div> <!-- Introduction --> <div class="prose-spec mb-12"></div> <!-- Summary as feature cards --> <div class="mb-16"> <h3 class="text-xl font-display font-semibold mb-6
hover:text-sky-600 transition-colors" aria-label="Scroll to content"> <svg width="1em" height="1em" class="w-6 h-6 animate-bounce-subtle" data-icon="heroicons:arrow-down"> <symbol id="ai:heroicons:arrow-down" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"/></symbol><use href="#ai:heroicons:arrow-down"></use> </svg> </a> </section> <script type="module">const a=["animate-fade-in","animate-fade-in-up","animate-fade-in-down","animate-slide-in-left"];function n(){const t=a.map(e=>`.${e}`).join(", ");document.querySelectorAll(t).forEach(e=>{e.addEventListener("animationend",()=>{a.forEach(i=>e.classList.remove(i)),e.className=e.className.replace(/\bdelay-\d+\b/g,"").trim()},{once:!0})})}n();document.addEventListener("astro:after-swap",n);</script> <section id="about" class="py-20 sm:py-28"> <div class="section-container"> <div class="max-w-3xl mx-auto"> <div class="mb-12 text-center"> <h2 class="text-3xl sm:text-4xl mb-4">About Common-Flow</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> A practical git workflow that combines the best of GitHub Flow with versioned releases </p> </div> <!-- Introduction --> <div class="prose-spec mb-12"></div> <!-- Summary as feature cards --> <div class="mb-16"> <h3 class="text-xl font-display font-semibold mb-6
text-gray-950 dark:text-neutral-50">
Key Principles
</h3> <div class="prose-spec"><p>Common-Flow is an attempt to gather a sensible selection of the most common

6
docs/spec/1.0.0-rc.5/index.html
View File

@@ -8,7 +8,7 @@
document.documentElement.classList.add("dark");
}
})();
</script><link rel="stylesheet" href="/_astro/index.qe8PXlQZ.css"></head> <body class="min-h-screen"> <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b border-transparent
</script><link rel="stylesheet" href="/_astro/index.CP8LmReS.css"></head> <body class="min-h-screen"> <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b border-transparent
translate-y-[-100%] transition-transform duration-300
backdrop-blur-xl bg-gray-50/85 dark:bg-neutral-950/85"> <div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"> <!-- Logo / Title + Version --> <div class="flex items-center gap-3"> <a href="#hero" class="flex items-center gap-3 no-underline
text-gray-950 dark:text-neutral-50
@@ -114,7 +114,7 @@ A sensible git workflow for teams who ship
bg-gray-100 border-gray-200 text-gray-500
dark:bg-neutral-800/50 dark:border-neutral-700 dark:text-neutral-400">
v1.0.0-rc.5 </span> </div> <!-- SVG Diagram --> <div class="animate-fade-in-up delay-300
relative mx-auto mb-12 p-4 sm:p-8
relative mx-auto mb-12 py-8 px-6 sm:py-16 sm:px-14
bg-white dark:bg-neutral-900
rounded-2xl shadow-lg dark:shadow-none
border border-gray-200 dark:border-neutral-800"> <img src="/spec/1.0.0-rc.5.svg" alt="Git Common-Flow diagram" class="w-full h-auto max-w-3xl mx-auto
@@ -139,7 +139,7 @@ FAQ
</a> </nav> </div> <!-- Scroll indicator --> <a href="#about" class="absolute bottom-8 left-1/2 -translate-x-1/2
animate-fade-in delay-700
text-gray-500 dark:text-neutral-500
hover:text-sky-600 transition-colors" aria-label="Scroll to content"> <svg width="1em" height="1em" class="w-6 h-6 animate-bounce-subtle" data-icon="heroicons:arrow-down"> <symbol id="ai:heroicons:arrow-down" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"/></symbol><use href="#ai:heroicons:arrow-down"></use> </svg> </a> </section> <section id="about" class="py-20 sm:py-28"> <div class="section-container"> <div class="max-w-3xl mx-auto"> <div class="mb-12 text-center"> <h2 class="text-3xl sm:text-4xl mb-4">About Common-Flow</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> A practical git workflow that combines the best of GitHub Flow with versioned releases </p> </div> <!-- Introduction --> <div class="prose-spec mb-12"><p>Common-Flow is an attempt to gather a sensible selection of the most common
hover:text-sky-600 transition-colors" aria-label="Scroll to content"> <svg width="1em" height="1em" class="w-6 h-6 animate-bounce-subtle" data-icon="heroicons:arrow-down"> <symbol id="ai:heroicons:arrow-down" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"/></symbol><use href="#ai:heroicons:arrow-down"></use> </svg> </a> </section> <script type="module">const a=["animate-fade-in","animate-fade-in-up","animate-fade-in-down","animate-slide-in-left"];function n(){const t=a.map(e=>`.${e}`).join(", ");document.querySelectorAll(t).forEach(e=>{e.addEventListener("animationend",()=>{a.forEach(i=>e.classList.remove(i)),e.className=e.className.replace(/\bdelay-\d+\b/g,"").trim()},{once:!0})})}n();document.addEventListener("astro:after-swap",n);</script> <section id="about" class="py-20 sm:py-28"> <div class="section-container"> <div class="max-w-3xl mx-auto"> <div class="mb-12 text-center"> <h2 class="text-3xl sm:text-4xl mb-4">About Common-Flow</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> A practical git workflow that combines the best of GitHub Flow with versioned releases </p> </div> <!-- Introduction --> <div class="prose-spec mb-12"><p>Common-Flow is an attempt to gather a sensible selection of the most common
usage patterns of git into a single and concise specification. It is based on
the <a href="http://scottchacon.com/2011/08/31/github-flow.html">original variant</a>
of <a href="https://guides.github.com/introduction/flow/">GitHub Flow</a>, while taking

33
src/components/Hero.astro
View File

@@ -96,7 +96,7 @@ const { version, versions, svgPath } = Astro.props;
<!-- SVG Diagram -->
<div
class="animate-fade-in-up delay-300
relative mx-auto mb-12 p-4 sm:p-8
relative mx-auto mb-12 py-8 px-6 sm:py-16 sm:px-14
bg-white dark:bg-neutral-900
rounded-2xl shadow-lg dark:shadow-none
border border-gray-200 dark:border-neutral-800"
@@ -158,3 +158,34 @@ const { version, versions, svgPath } = Astro.props;
<Icon name="heroicons:arrow-down" class="w-6 h-6 animate-bounce-subtle" />
</a>
</section>
<script>
// Remove animation classes after they complete to prevent re-triggering
// on theme toggle.
const animationClasses = [
"animate-fade-in",
"animate-fade-in-up",
"animate-fade-in-down",
"animate-slide-in-left",
];
function cleanupAnimations() {
const selector = animationClasses.map((c) => `.${c}`).join(", ");
const animatedElements = document.querySelectorAll(selector);
animatedElements.forEach((el) => {
el.addEventListener(
"animationend",
() => {
animationClasses.forEach((cls) => el.classList.remove(cls));
// Also remove delay classes
el.className = el.className.replace(/\bdelay-\d+\b/g, "").trim();
},
{ once: true }
);
});
}
cleanupAnimations();
document.addEventListener("astro:after-swap", cleanupAnimations);
</script>

22
src/styles/global.css
View File

@@ -149,7 +149,7 @@ html {
background-color: theme(colors.neutral.900);
}
pre>code {
pre > code {
background-color: transparent !important;
padding: 0;
font-size: 0.875rem;
@@ -279,7 +279,6 @@ html {
}
@keyframes bounce-subtle {
0%,
100% {
transform: translateY(0);
@@ -350,7 +349,6 @@ html {
/* Component styles */
@layer components {
/* Section container - uses CSS vars, keep here */
.section-container {
max-width: calc(var(--content-max-width) + var(--sidebar-width) + 4rem);
@@ -422,13 +420,13 @@ html {
list-style: none;
}
.prose-spec ol>li {
.prose-spec ol > li {
counter-increment: item;
position: relative;
margin-bottom: 0.5rem;
}
.prose-spec ol>li::before {
.prose-spec ol > li::before {
content: counters(item, ".") ".";
position: absolute;
left: -2.5rem;
@@ -438,12 +436,12 @@ html {
color: theme(colors.slate.400);
}
.dark .prose-spec ol>li::before {
.dark .prose-spec ol > li::before {
color: theme(colors.neutral.500);
}
/* Clause highlight effect using ::after pseudo-element */
.prose-spec ol>li::after {
.prose-spec ol > li::after {
content: "";
position: absolute;
inset: -0.25rem -0.5rem;
@@ -454,11 +452,11 @@ html {
z-index: -1;
}
.prose-spec ol>li.clause-highlight::after {
.prose-spec ol > li.clause-highlight::after {
animation: clause-highlight-pulse 2s ease-out forwards;
}
.dark .prose-spec ol>li.clause-highlight::after {
.dark .prose-spec ol > li.clause-highlight::after {
animation: clause-highlight-pulse-dark 2s ease-out forwards;
}
@@ -489,13 +487,13 @@ html {
}
/* On hover: show anchor link, hide CSS counter */
.prose-spec ol>li:hover:not(:has(ol:hover))>.clause-link,
.prose-spec ol>li:hover:not(:has(ol:hover))>p>.clause-link,
.prose-spec ol > li:hover:not(:has(ol:hover)) > .clause-link,
.prose-spec ol > li:hover:not(:has(ol:hover)) > p > .clause-link,
.prose-spec .clause-link:hover {
opacity: 1;
}
.prose-spec ol>li:hover:not(:has(ol:hover))::before {
.prose-spec ol > li:hover:not(:has(ol:hover))::before {
opacity: 0;
}

9
src/utils/parseSpecContent.ts
View File

@@ -8,14 +8,7 @@ import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";
import { getIconData, iconToSVG, iconToHTML } from "@iconify/utils";
import heroicons from "@iconify-json/heroicons/icons.json";
import type {
Root,
RootContent,
Heading,
List,
ListItem,
Html,
} from "mdast";
import type { Root, RootContent, Heading, List, ListItem, Html } from "mdast";
import type { Root as HastRoot } from "hast";
export interface TocItem {