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 hero nav buttons on small mobile screens

Browse Source
This commit is contained in:
Jim Myhrberg
2026-01-11 23:07:52 +00:00
parent de3fae26ca
commit 14ca625d5e
9 changed files with 130 additions and 146 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"); document.documentElement.classList.add("dark");
} }
})(); })();
</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 </script><link rel="stylesheet" href="/_astro/index.qbco1PP4.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"> text-gray-300 dark:text-neutral-700">
404 404
</h1> <p class="text-xl mb-2 text-gray-600 dark:text-neutral-400"> </h1> <p class="text-xl mb-2 text-gray-600 dark:text-neutral-400">

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

File diff suppressed because one or more lines are too long

35
docs/index.html
View File

@@ -8,7 +8,7 @@
document.documentElement.classList.add("dark"); document.documentElement.classList.add("dark");
} }
})(); })();
</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 </script><link rel="stylesheet" href="/_astro/index.qbco1PP4.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 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 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 text-gray-950 dark:text-neutral-50
@@ -119,24 +119,21 @@ v1.0.0-rc.5 </span> </div> <!-- SVG Diagram --> <div class="animate-fade-in-up d
rounded-2xl shadow-lg dark:shadow-none 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 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
dark:invert dark:hue-rotate-180 dark:contrast-90"> </div> <!-- Navigation links --> <nav class="animate-fade-in-up delay-400 dark:invert dark:hue-rotate-180 dark:contrast-90"> </div> <!-- Navigation links --> <nav class="animate-fade-in-up delay-400
flex flex-wrap items-center justify-center gap-4"> <a href="#about" class="inline-flex items-center justify-center gap-2 px-6 py-3 flex flex-nowrap items-center justify-center gap-2 sm:gap-4"> <a href="#about" class="inline-flex items-center justify-center gap-2
text-base font-medium rounded-lg transition-all cursor-pointer px-4 py-2.5 sm:px-6 sm:py-3
text-gray-600 dark:text-neutral-400 text-sm sm:text-base font-medium rounded-lg
hover:bg-gray-100 hover:text-gray-950 transition-all cursor-pointer text-gray-600 dark:text-neutral-400
dark:hover:bg-neutral-800 dark:hover:text-neutral-50"> hover:bg-gray-100 hover:text-gray-950
About dark:hover:bg-neutral-800 dark:hover:text-neutral-50"> About </a><a href="#spec" class="inline-flex items-center justify-center gap-2
</a> <a href="#spec" class="inline-flex items-center justify-center gap-2 px-6 py-3 px-4 py-2.5 sm:px-6 sm:py-3
text-base font-medium rounded-lg transition-all cursor-pointer text-sm sm:text-base font-medium rounded-lg
bg-sky-600 text-white transition-all cursor-pointer bg-sky-600 text-white
hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md"> hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md"> Read the Spec </a><a href="#faq" class="inline-flex items-center justify-center gap-2
Read the Spec px-4 py-2.5 sm:px-6 sm:py-3
</a> <a href="#faq" class="inline-flex items-center justify-center gap-2 px-6 py-3 text-sm sm:text-base font-medium rounded-lg
text-base font-medium rounded-lg transition-all cursor-pointer transition-all cursor-pointer text-gray-600 dark:text-neutral-400
text-gray-600 dark:text-neutral-400 hover:bg-gray-100 hover:text-gray-950
hover:bg-gray-100 hover:text-gray-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50"> FAQ </a> </nav> </div> <!-- Scroll indicator --> <a href="#about" class="absolute bottom-8 left-1/2 -translate-x-1/2
dark:hover:bg-neutral-800 dark:hover:text-neutral-50">
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 animate-fade-in delay-700
text-gray-500 dark:text-neutral-500 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> <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 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

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

@@ -8,7 +8,7 @@
document.documentElement.classList.add("dark"); document.documentElement.classList.add("dark");
} }
})(); })();
</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 </script><link rel="stylesheet" href="/_astro/index.qbco1PP4.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 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 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 text-gray-950 dark:text-neutral-50
@@ -119,24 +119,21 @@ v1.0.0-rc.1 </span> </div> <!-- SVG Diagram --> <div class="animate-fade-in-up d
rounded-2xl shadow-lg dark:shadow-none 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 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
dark:invert dark:hue-rotate-180 dark:contrast-90"> </div> <!-- Navigation links --> <nav class="animate-fade-in-up delay-400 dark:invert dark:hue-rotate-180 dark:contrast-90"> </div> <!-- Navigation links --> <nav class="animate-fade-in-up delay-400
flex flex-wrap items-center justify-center gap-4"> <a href="#about" class="inline-flex items-center justify-center gap-2 px-6 py-3 flex flex-nowrap items-center justify-center gap-2 sm:gap-4"> <a href="#about" class="inline-flex items-center justify-center gap-2
text-base font-medium rounded-lg transition-all cursor-pointer px-4 py-2.5 sm:px-6 sm:py-3
text-gray-600 dark:text-neutral-400 text-sm sm:text-base font-medium rounded-lg
hover:bg-gray-100 hover:text-gray-950 transition-all cursor-pointer text-gray-600 dark:text-neutral-400
dark:hover:bg-neutral-800 dark:hover:text-neutral-50"> hover:bg-gray-100 hover:text-gray-950
About dark:hover:bg-neutral-800 dark:hover:text-neutral-50"> About </a><a href="#spec" class="inline-flex items-center justify-center gap-2
</a> <a href="#spec" class="inline-flex items-center justify-center gap-2 px-6 py-3 px-4 py-2.5 sm:px-6 sm:py-3
text-base font-medium rounded-lg transition-all cursor-pointer text-sm sm:text-base font-medium rounded-lg
bg-sky-600 text-white transition-all cursor-pointer bg-sky-600 text-white
hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md"> hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md"> Read the Spec </a><a href="#faq" class="inline-flex items-center justify-center gap-2
Read the Spec px-4 py-2.5 sm:px-6 sm:py-3
</a> <a href="#faq" class="inline-flex items-center justify-center gap-2 px-6 py-3 text-sm sm:text-base font-medium rounded-lg
text-base font-medium rounded-lg transition-all cursor-pointer transition-all cursor-pointer text-gray-600 dark:text-neutral-400
text-gray-600 dark:text-neutral-400 hover:bg-gray-100 hover:text-gray-950
hover:bg-gray-100 hover:text-gray-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50"> FAQ </a> </nav> </div> <!-- Scroll indicator --> <a href="#about" class="absolute bottom-8 left-1/2 -translate-x-1/2
dark:hover:bg-neutral-800 dark:hover:text-neutral-50">
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 animate-fade-in delay-700
text-gray-500 dark:text-neutral-500 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> <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 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

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

@@ -8,7 +8,7 @@
document.documentElement.classList.add("dark"); document.documentElement.classList.add("dark");
} }
})(); })();
</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 </script><link rel="stylesheet" href="/_astro/index.qbco1PP4.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 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 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 text-gray-950 dark:text-neutral-50
@@ -119,24 +119,21 @@ v1.0.0-rc.2 </span> </div> <!-- SVG Diagram --> <div class="animate-fade-in-up d
rounded-2xl shadow-lg dark:shadow-none 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 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
dark:invert dark:hue-rotate-180 dark:contrast-90"> </div> <!-- Navigation links --> <nav class="animate-fade-in-up delay-400 dark:invert dark:hue-rotate-180 dark:contrast-90"> </div> <!-- Navigation links --> <nav class="animate-fade-in-up delay-400
flex flex-wrap items-center justify-center gap-4"> <a href="#about" class="inline-flex items-center justify-center gap-2 px-6 py-3 flex flex-nowrap items-center justify-center gap-2 sm:gap-4"> <a href="#about" class="inline-flex items-center justify-center gap-2
text-base font-medium rounded-lg transition-all cursor-pointer px-4 py-2.5 sm:px-6 sm:py-3
text-gray-600 dark:text-neutral-400 text-sm sm:text-base font-medium rounded-lg
hover:bg-gray-100 hover:text-gray-950 transition-all cursor-pointer text-gray-600 dark:text-neutral-400
dark:hover:bg-neutral-800 dark:hover:text-neutral-50"> hover:bg-gray-100 hover:text-gray-950
About dark:hover:bg-neutral-800 dark:hover:text-neutral-50"> About </a><a href="#spec" class="inline-flex items-center justify-center gap-2
</a> <a href="#spec" class="inline-flex items-center justify-center gap-2 px-6 py-3 px-4 py-2.5 sm:px-6 sm:py-3
text-base font-medium rounded-lg transition-all cursor-pointer text-sm sm:text-base font-medium rounded-lg
bg-sky-600 text-white transition-all cursor-pointer bg-sky-600 text-white
hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md"> hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md"> Read the Spec </a><a href="#faq" class="inline-flex items-center justify-center gap-2
Read the Spec px-4 py-2.5 sm:px-6 sm:py-3
</a> <a href="#faq" class="inline-flex items-center justify-center gap-2 px-6 py-3 text-sm sm:text-base font-medium rounded-lg
text-base font-medium rounded-lg transition-all cursor-pointer transition-all cursor-pointer text-gray-600 dark:text-neutral-400
text-gray-600 dark:text-neutral-400 hover:bg-gray-100 hover:text-gray-950
hover:bg-gray-100 hover:text-gray-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50"> FAQ </a> </nav> </div> <!-- Scroll indicator --> <a href="#about" class="absolute bottom-8 left-1/2 -translate-x-1/2
dark:hover:bg-neutral-800 dark:hover:text-neutral-50">
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 animate-fade-in delay-700
text-gray-500 dark:text-neutral-500 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> <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 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

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

@@ -8,7 +8,7 @@
document.documentElement.classList.add("dark"); document.documentElement.classList.add("dark");
} }
})(); })();
</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 </script><link rel="stylesheet" href="/_astro/index.qbco1PP4.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 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 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 text-gray-950 dark:text-neutral-50
@@ -119,24 +119,21 @@ v1.0.0-rc.3 </span> </div> <!-- SVG Diagram --> <div class="animate-fade-in-up d
rounded-2xl shadow-lg dark:shadow-none 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 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
dark:invert dark:hue-rotate-180 dark:contrast-90"> </div> <!-- Navigation links --> <nav class="animate-fade-in-up delay-400 dark:invert dark:hue-rotate-180 dark:contrast-90"> </div> <!-- Navigation links --> <nav class="animate-fade-in-up delay-400
flex flex-wrap items-center justify-center gap-4"> <a href="#about" class="inline-flex items-center justify-center gap-2 px-6 py-3 flex flex-nowrap items-center justify-center gap-2 sm:gap-4"> <a href="#about" class="inline-flex items-center justify-center gap-2
text-base font-medium rounded-lg transition-all cursor-pointer px-4 py-2.5 sm:px-6 sm:py-3
text-gray-600 dark:text-neutral-400 text-sm sm:text-base font-medium rounded-lg
hover:bg-gray-100 hover:text-gray-950 transition-all cursor-pointer text-gray-600 dark:text-neutral-400
dark:hover:bg-neutral-800 dark:hover:text-neutral-50"> hover:bg-gray-100 hover:text-gray-950
About dark:hover:bg-neutral-800 dark:hover:text-neutral-50"> About </a><a href="#spec" class="inline-flex items-center justify-center gap-2
</a> <a href="#spec" class="inline-flex items-center justify-center gap-2 px-6 py-3 px-4 py-2.5 sm:px-6 sm:py-3
text-base font-medium rounded-lg transition-all cursor-pointer text-sm sm:text-base font-medium rounded-lg
bg-sky-600 text-white transition-all cursor-pointer bg-sky-600 text-white
hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md"> hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md"> Read the Spec </a><a href="#faq" class="inline-flex items-center justify-center gap-2
Read the Spec px-4 py-2.5 sm:px-6 sm:py-3
</a> <a href="#faq" class="inline-flex items-center justify-center gap-2 px-6 py-3 text-sm sm:text-base font-medium rounded-lg
text-base font-medium rounded-lg transition-all cursor-pointer transition-all cursor-pointer text-gray-600 dark:text-neutral-400
text-gray-600 dark:text-neutral-400 hover:bg-gray-100 hover:text-gray-950
hover:bg-gray-100 hover:text-gray-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50"> FAQ </a> </nav> </div> <!-- Scroll indicator --> <a href="#about" class="absolute bottom-8 left-1/2 -translate-x-1/2
dark:hover:bg-neutral-800 dark:hover:text-neutral-50">
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 animate-fade-in delay-700
text-gray-500 dark:text-neutral-500 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> <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 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

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

@@ -8,7 +8,7 @@
document.documentElement.classList.add("dark"); document.documentElement.classList.add("dark");
} }
})(); })();
</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 </script><link rel="stylesheet" href="/_astro/index.qbco1PP4.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 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 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 text-gray-950 dark:text-neutral-50
@@ -119,24 +119,21 @@ v1.0.0-rc.4 </span> </div> <!-- SVG Diagram --> <div class="animate-fade-in-up d
rounded-2xl shadow-lg dark:shadow-none 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 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
dark:invert dark:hue-rotate-180 dark:contrast-90"> </div> <!-- Navigation links --> <nav class="animate-fade-in-up delay-400 dark:invert dark:hue-rotate-180 dark:contrast-90"> </div> <!-- Navigation links --> <nav class="animate-fade-in-up delay-400
flex flex-wrap items-center justify-center gap-4"> <a href="#about" class="inline-flex items-center justify-center gap-2 px-6 py-3 flex flex-nowrap items-center justify-center gap-2 sm:gap-4"> <a href="#about" class="inline-flex items-center justify-center gap-2
text-base font-medium rounded-lg transition-all cursor-pointer px-4 py-2.5 sm:px-6 sm:py-3
text-gray-600 dark:text-neutral-400 text-sm sm:text-base font-medium rounded-lg
hover:bg-gray-100 hover:text-gray-950 transition-all cursor-pointer text-gray-600 dark:text-neutral-400
dark:hover:bg-neutral-800 dark:hover:text-neutral-50"> hover:bg-gray-100 hover:text-gray-950
About dark:hover:bg-neutral-800 dark:hover:text-neutral-50"> About </a><a href="#spec" class="inline-flex items-center justify-center gap-2
</a> <a href="#spec" class="inline-flex items-center justify-center gap-2 px-6 py-3 px-4 py-2.5 sm:px-6 sm:py-3
text-base font-medium rounded-lg transition-all cursor-pointer text-sm sm:text-base font-medium rounded-lg
bg-sky-600 text-white transition-all cursor-pointer bg-sky-600 text-white
hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md"> hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md"> Read the Spec </a><a href="#faq" class="inline-flex items-center justify-center gap-2
Read the Spec px-4 py-2.5 sm:px-6 sm:py-3
</a> <a href="#faq" class="inline-flex items-center justify-center gap-2 px-6 py-3 text-sm sm:text-base font-medium rounded-lg
text-base font-medium rounded-lg transition-all cursor-pointer transition-all cursor-pointer text-gray-600 dark:text-neutral-400
text-gray-600 dark:text-neutral-400 hover:bg-gray-100 hover:text-gray-950
hover:bg-gray-100 hover:text-gray-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50"> FAQ </a> </nav> </div> <!-- Scroll indicator --> <a href="#about" class="absolute bottom-8 left-1/2 -translate-x-1/2
dark:hover:bg-neutral-800 dark:hover:text-neutral-50">
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 animate-fade-in delay-700
text-gray-500 dark:text-neutral-500 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> <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 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

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

@@ -8,7 +8,7 @@
document.documentElement.classList.add("dark"); document.documentElement.classList.add("dark");
} }
})(); })();
</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 </script><link rel="stylesheet" href="/_astro/index.qbco1PP4.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 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 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 text-gray-950 dark:text-neutral-50
@@ -119,24 +119,21 @@ v1.0.0-rc.5 </span> </div> <!-- SVG Diagram --> <div class="animate-fade-in-up d
rounded-2xl shadow-lg dark:shadow-none 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 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
dark:invert dark:hue-rotate-180 dark:contrast-90"> </div> <!-- Navigation links --> <nav class="animate-fade-in-up delay-400 dark:invert dark:hue-rotate-180 dark:contrast-90"> </div> <!-- Navigation links --> <nav class="animate-fade-in-up delay-400
flex flex-wrap items-center justify-center gap-4"> <a href="#about" class="inline-flex items-center justify-center gap-2 px-6 py-3 flex flex-nowrap items-center justify-center gap-2 sm:gap-4"> <a href="#about" class="inline-flex items-center justify-center gap-2
text-base font-medium rounded-lg transition-all cursor-pointer px-4 py-2.5 sm:px-6 sm:py-3
text-gray-600 dark:text-neutral-400 text-sm sm:text-base font-medium rounded-lg
hover:bg-gray-100 hover:text-gray-950 transition-all cursor-pointer text-gray-600 dark:text-neutral-400
dark:hover:bg-neutral-800 dark:hover:text-neutral-50"> hover:bg-gray-100 hover:text-gray-950
About dark:hover:bg-neutral-800 dark:hover:text-neutral-50"> About </a><a href="#spec" class="inline-flex items-center justify-center gap-2
</a> <a href="#spec" class="inline-flex items-center justify-center gap-2 px-6 py-3 px-4 py-2.5 sm:px-6 sm:py-3
text-base font-medium rounded-lg transition-all cursor-pointer text-sm sm:text-base font-medium rounded-lg
bg-sky-600 text-white transition-all cursor-pointer bg-sky-600 text-white
hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md"> hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md"> Read the Spec </a><a href="#faq" class="inline-flex items-center justify-center gap-2
Read the Spec px-4 py-2.5 sm:px-6 sm:py-3
</a> <a href="#faq" class="inline-flex items-center justify-center gap-2 px-6 py-3 text-sm sm:text-base font-medium rounded-lg
text-base font-medium rounded-lg transition-all cursor-pointer transition-all cursor-pointer text-gray-600 dark:text-neutral-400
text-gray-600 dark:text-neutral-400 hover:bg-gray-100 hover:text-gray-950
hover:bg-gray-100 hover:text-gray-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50"> FAQ </a> </nav> </div> <!-- Scroll indicator --> <a href="#about" class="absolute bottom-8 left-1/2 -translate-x-1/2
dark:hover:bg-neutral-800 dark:hover:text-neutral-50">
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 animate-fade-in delay-700
text-gray-500 dark:text-neutral-500 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> <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 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

62
src/components/Hero.astro
View File

@@ -11,6 +11,24 @@ interface Props {
} }
const { version, versions, svgPath } = Astro.props; const { version, versions, svgPath } = Astro.props;
const navItems = [
{ id: "about", label: "About" },
{ id: "spec", label: "Read the Spec", primary: true },
{ id: "faq", label: "FAQ" },
];
const baseClasses = `inline-flex items-center justify-center gap-2
px-4 py-2.5 sm:px-6 sm:py-3
text-sm sm:text-base font-medium rounded-lg
transition-all cursor-pointer`;
const primaryClasses = `bg-sky-600 text-white
hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md`;
const secondaryClasses = `text-gray-600 dark:text-neutral-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-neutral-800 dark:hover:text-neutral-50`;
--- ---
<section <section
@@ -112,37 +130,21 @@ const { version, versions, svgPath } = Astro.props;
<!-- Navigation links --> <!-- Navigation links -->
<nav <nav
class="animate-fade-in-up delay-400 class="animate-fade-in-up delay-400
flex flex-wrap items-center justify-center gap-4" flex flex-nowrap items-center justify-center gap-2 sm:gap-4"
> >
<a {
href="#about" navItems.map((item) => (
class="inline-flex items-center justify-center gap-2 px-6 py-3 <a
text-base font-medium rounded-lg transition-all cursor-pointer href={`#${item.id}`}
text-gray-600 dark:text-neutral-400 class:list={[
hover:bg-gray-100 hover:text-gray-950 baseClasses,
dark:hover:bg-neutral-800 dark:hover:text-neutral-50" item.primary ? primaryClasses : secondaryClasses,
> ]}
About >
</a> {item.label}
<a </a>
href="#spec" ))
class="inline-flex items-center justify-center gap-2 px-6 py-3 }
text-base font-medium rounded-lg transition-all cursor-pointer
bg-sky-600 text-white
hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md"
>
Read the Spec
</a>
<a
href="#faq"
class="inline-flex items-center justify-center gap-2 px-6 py-3
text-base font-medium rounded-lg transition-all cursor-pointer
text-gray-600 dark:text-neutral-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
>
FAQ
</a>
</nav> </nav>
</div> </div>