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: more tweaks

Browse Source
This commit is contained in:
Jim Myhrberg
2026-01-11 00:19:33 +00:00
parent f47ea792aa
commit 8c91e2028a
12 changed files with 97 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/404.html
View File

@@ -9,7 +9,7 @@
document.documentElement.classList.add("dark"); document.documentElement.classList.add("dark");
} }
})(); })();
</script><link rel="stylesheet" href="/_astro/index.wetyOYsY.css"></head> <body class="min-h-screen flex flex-col items-center justify-center 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.DWf95GRa.css"></head> <body class="min-h-screen flex flex-col items-center justify-center 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">

1
docs/_astro/index.DWf95GRa.css Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/_astro/index.wetyOYsY.css
View File

File diff suppressed because one or more lines are too long

24
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.wetyOYsY.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.DWf95GRa.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
@@ -80,13 +80,15 @@ Spec
</a> <a href="#faq" class="nav-link block py-2 text-gray-600 dark:text-neutral-400 </a> <a href="#faq" class="nav-link block py-2 text-gray-600 dark:text-neutral-400
hover:text-sky-600" data-nav-link data-section-id="faq"> hover:text-sky-600" data-nav-link data-section-id="faq">
FAQ FAQ
</a> </div> </nav> </header> <script type="module">function f(){const n=document.getElementById("site-header"),g=document.getElementById("hero"),o=document.getElementById("mobile-menu-btn"),s=document.getElementById("mobile-nav");if(!n||!g)return;const v=64;function c(){window.scrollY>=v?(n.classList.remove("translate-y-[-100%]"),n.classList.add("border-gray-200","dark:border-neutral-800")):(n.classList.add("translate-y-[-100%]"),n.classList.remove("border-gray-200","dark:border-neutral-800"))}window.addEventListener("scroll",c,{passive:!0}),c(),o&&s&&(o.addEventListener("click",()=>{s.classList.toggle("hidden")}),s.querySelectorAll("a").forEach(i=>{i.addEventListener("click",()=>{s.classList.add("hidden")})}));const r=document.querySelectorAll("[data-nav-link]"),l=[],u=new Set;r.forEach(i=>{const e=i.getAttribute("data-section-id");if(e&&!u.has(e)){u.add(e);const t=document.getElementById(e);t&&l.push({id:e,element:t})}});function m(){let e=null;for(const{id:t,element:d}of l)d.getBoundingClientRect().top<=100&&(e=t);r.forEach(t=>{const d=t.getAttribute("data-section-id");t.classList.toggle("active",d===e)})}let a=!1;window.addEventListener("scroll",()=>{a||(requestAnimationFrame(()=>{m(),a=!1}),a=!0)}),m()}f();document.addEventListener("astro:after-swap",f);</script> <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center </a> </div> </nav> </header> <script type="module">function f(){const n=document.getElementById("site-header"),g=document.getElementById("hero"),r=document.getElementById("mobile-menu-btn"),s=document.getElementById("mobile-nav");if(!n||!g)return;const v=64;function o(){window.scrollY>=v?(n.classList.remove("translate-y-[-100%]","border-transparent"),n.classList.add("border-gray-200","dark:border-neutral-800")):(n.classList.add("translate-y-[-100%]","border-transparent"),n.classList.remove("border-gray-200","dark:border-neutral-800"))}window.addEventListener("scroll",o,{passive:!0}),o(),r&&s&&(r.addEventListener("click",()=>{s.classList.toggle("hidden")}),s.querySelectorAll("a").forEach(a=>{a.addEventListener("click",()=>{s.classList.add("hidden")})}));const c=document.querySelectorAll("[data-nav-link]"),l=[],u=new Set;c.forEach(a=>{const e=a.getAttribute("data-section-id");if(e&&!u.has(e)){u.add(e);const t=document.getElementById(e);t&&l.push({id:e,element:t})}});function m(){let e=null;for(const{id:t,element:i}of l)i.getBoundingClientRect().top<=100&&(e=t);c.forEach(t=>{const i=t.getAttribute("data-section-id");t.classList.toggle("active",i===e)})}let d=!1;window.addEventListener("scroll",()=>{d||(requestAnimationFrame(()=>{m(),d=!1}),d=!0)}),m()}f();document.addEventListener("astro:after-swap",f);</script> <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center
px-6 py-16 overflow-hidden"> <!-- Background gradient/texture --> <div class="absolute inset-0 bg-gradient-to-b px-6 pt-16 pb-24 overflow-hidden"> <!-- Background gradient/texture --> <div class="absolute inset-0 bg-gradient-to-b
from-gray-100 to-gray-50 from-gray-100 to-gray-50
dark:from-neutral-900 dark:to-neutral-950"></div> <!-- Subtle grid pattern --> <div class="absolute inset-0 opacity-[0.03] dark:opacity-[0.05] dark:from-neutral-900 dark:to-neutral-950"></div> <!-- Subtle grid pattern with fade --> <div class="absolute inset-0 opacity-[0.06] dark:opacity-[0.12]
bg-[linear-gradient(theme(colors.gray.950)_1px,transparent_1px),linear-gradient(90deg,theme(colors.gray.950)_1px,transparent_1px)] bg-[linear-gradient(theme(colors.gray.950)_1px,transparent_1px),linear-gradient(90deg,theme(colors.gray.950)_1px,transparent_1px)]
dark:bg-[linear-gradient(theme(colors.neutral.600)_1px,transparent_1px),linear-gradient(90deg,theme(colors.neutral.600)_1px,transparent_1px)] dark:bg-[linear-gradient(theme(colors.neutral.600)_1px,transparent_1px),linear-gradient(90deg,theme(colors.neutral.600)_1px,transparent_1px)]
bg-[size:60px_60px]"></div> <!-- Top bar with version & theme --> <div class="absolute top-0 inset-x-0 flex items-center justify-between bg-[size:60px_60px]
[-webkit-mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]
[mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]"></div> <!-- Top bar with version & theme --> <div class="absolute top-0 inset-x-0 flex items-center justify-between
px-6 py-4 animate-fade-in-down"> <div class="flex items-center gap-3"> <div class="relative" data-version-selector> <!-- Trigger button --> <button type="button" data-version-trigger aria-haspopup="listbox" aria-expanded="false" class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono px-6 py-4 animate-fade-in-down"> <div class="flex items-center gap-3"> <div class="relative" data-version-selector> <!-- Trigger button --> <button type="button" data-version-trigger aria-haspopup="listbox" aria-expanded="false" class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono
border border-gray-200 dark:border-neutral-700 border border-gray-200 dark:border-neutral-700
rounded-md bg-transparent cursor-pointer transition-colors rounded-md bg-transparent cursor-pointer transition-colors
@@ -127,19 +129,19 @@ 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-5 py-2.5 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
text-sm font-medium rounded-lg transition-all cursor-pointer text-base font-medium rounded-lg 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"> dark:hover:bg-neutral-800 dark:hover:text-neutral-50">
About About
</a> <a href="#spec" class="inline-flex items-center justify-center gap-2 px-5 py-2.5 </a> <a href="#spec" class="inline-flex items-center justify-center gap-2 px-6 py-3
text-sm font-medium rounded-lg transition-all cursor-pointer text-base font-medium rounded-lg transition-all cursor-pointer
bg-sky-600 text-white 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 Read the Spec
</a> <a href="#faq" class="inline-flex items-center justify-center gap-2 px-5 py-2.5 </a> <a href="#faq" class="inline-flex items-center justify-center gap-2 px-6 py-3
text-sm font-medium rounded-lg transition-all cursor-pointer text-base font-medium rounded-lg 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"> dark:hover:bg-neutral-800 dark:hover:text-neutral-50">

24
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.wetyOYsY.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.DWf95GRa.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
@@ -80,13 +80,15 @@ Spec
</a> <a href="#faq" class="nav-link block py-2 text-gray-600 dark:text-neutral-400 </a> <a href="#faq" class="nav-link block py-2 text-gray-600 dark:text-neutral-400
hover:text-sky-600" data-nav-link data-section-id="faq"> hover:text-sky-600" data-nav-link data-section-id="faq">
FAQ FAQ
</a> </div> </nav> </header> <script type="module">function f(){const n=document.getElementById("site-header"),g=document.getElementById("hero"),o=document.getElementById("mobile-menu-btn"),s=document.getElementById("mobile-nav");if(!n||!g)return;const v=64;function c(){window.scrollY>=v?(n.classList.remove("translate-y-[-100%]"),n.classList.add("border-gray-200","dark:border-neutral-800")):(n.classList.add("translate-y-[-100%]"),n.classList.remove("border-gray-200","dark:border-neutral-800"))}window.addEventListener("scroll",c,{passive:!0}),c(),o&&s&&(o.addEventListener("click",()=>{s.classList.toggle("hidden")}),s.querySelectorAll("a").forEach(i=>{i.addEventListener("click",()=>{s.classList.add("hidden")})}));const r=document.querySelectorAll("[data-nav-link]"),l=[],u=new Set;r.forEach(i=>{const e=i.getAttribute("data-section-id");if(e&&!u.has(e)){u.add(e);const t=document.getElementById(e);t&&l.push({id:e,element:t})}});function m(){let e=null;for(const{id:t,element:d}of l)d.getBoundingClientRect().top<=100&&(e=t);r.forEach(t=>{const d=t.getAttribute("data-section-id");t.classList.toggle("active",d===e)})}let a=!1;window.addEventListener("scroll",()=>{a||(requestAnimationFrame(()=>{m(),a=!1}),a=!0)}),m()}f();document.addEventListener("astro:after-swap",f);</script> <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center </a> </div> </nav> </header> <script type="module">function f(){const n=document.getElementById("site-header"),g=document.getElementById("hero"),r=document.getElementById("mobile-menu-btn"),s=document.getElementById("mobile-nav");if(!n||!g)return;const v=64;function o(){window.scrollY>=v?(n.classList.remove("translate-y-[-100%]","border-transparent"),n.classList.add("border-gray-200","dark:border-neutral-800")):(n.classList.add("translate-y-[-100%]","border-transparent"),n.classList.remove("border-gray-200","dark:border-neutral-800"))}window.addEventListener("scroll",o,{passive:!0}),o(),r&&s&&(r.addEventListener("click",()=>{s.classList.toggle("hidden")}),s.querySelectorAll("a").forEach(a=>{a.addEventListener("click",()=>{s.classList.add("hidden")})}));const c=document.querySelectorAll("[data-nav-link]"),l=[],u=new Set;c.forEach(a=>{const e=a.getAttribute("data-section-id");if(e&&!u.has(e)){u.add(e);const t=document.getElementById(e);t&&l.push({id:e,element:t})}});function m(){let e=null;for(const{id:t,element:i}of l)i.getBoundingClientRect().top<=100&&(e=t);c.forEach(t=>{const i=t.getAttribute("data-section-id");t.classList.toggle("active",i===e)})}let d=!1;window.addEventListener("scroll",()=>{d||(requestAnimationFrame(()=>{m(),d=!1}),d=!0)}),m()}f();document.addEventListener("astro:after-swap",f);</script> <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center
px-6 py-16 overflow-hidden"> <!-- Background gradient/texture --> <div class="absolute inset-0 bg-gradient-to-b px-6 pt-16 pb-24 overflow-hidden"> <!-- Background gradient/texture --> <div class="absolute inset-0 bg-gradient-to-b
from-gray-100 to-gray-50 from-gray-100 to-gray-50
dark:from-neutral-900 dark:to-neutral-950"></div> <!-- Subtle grid pattern --> <div class="absolute inset-0 opacity-[0.03] dark:opacity-[0.05] dark:from-neutral-900 dark:to-neutral-950"></div> <!-- Subtle grid pattern with fade --> <div class="absolute inset-0 opacity-[0.06] dark:opacity-[0.12]
bg-[linear-gradient(theme(colors.gray.950)_1px,transparent_1px),linear-gradient(90deg,theme(colors.gray.950)_1px,transparent_1px)] bg-[linear-gradient(theme(colors.gray.950)_1px,transparent_1px),linear-gradient(90deg,theme(colors.gray.950)_1px,transparent_1px)]
dark:bg-[linear-gradient(theme(colors.neutral.600)_1px,transparent_1px),linear-gradient(90deg,theme(colors.neutral.600)_1px,transparent_1px)] dark:bg-[linear-gradient(theme(colors.neutral.600)_1px,transparent_1px),linear-gradient(90deg,theme(colors.neutral.600)_1px,transparent_1px)]
bg-[size:60px_60px]"></div> <!-- Top bar with version & theme --> <div class="absolute top-0 inset-x-0 flex items-center justify-between bg-[size:60px_60px]
[-webkit-mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]
[mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]"></div> <!-- Top bar with version & theme --> <div class="absolute top-0 inset-x-0 flex items-center justify-between
px-6 py-4 animate-fade-in-down"> <div class="flex items-center gap-3"> <div class="relative" data-version-selector> <!-- Trigger button --> <button type="button" data-version-trigger aria-haspopup="listbox" aria-expanded="false" class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono px-6 py-4 animate-fade-in-down"> <div class="flex items-center gap-3"> <div class="relative" data-version-selector> <!-- Trigger button --> <button type="button" data-version-trigger aria-haspopup="listbox" aria-expanded="false" class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono
border border-gray-200 dark:border-neutral-700 border border-gray-200 dark:border-neutral-700
rounded-md bg-transparent cursor-pointer transition-colors rounded-md bg-transparent cursor-pointer transition-colors
@@ -127,19 +129,19 @@ 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-5 py-2.5 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
text-sm font-medium rounded-lg transition-all cursor-pointer text-base font-medium rounded-lg 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"> dark:hover:bg-neutral-800 dark:hover:text-neutral-50">
About About
</a> <a href="#spec" class="inline-flex items-center justify-center gap-2 px-5 py-2.5 </a> <a href="#spec" class="inline-flex items-center justify-center gap-2 px-6 py-3
text-sm font-medium rounded-lg transition-all cursor-pointer text-base font-medium rounded-lg transition-all cursor-pointer
bg-sky-600 text-white 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 Read the Spec
</a> <a href="#faq" class="inline-flex items-center justify-center gap-2 px-5 py-2.5 </a> <a href="#faq" class="inline-flex items-center justify-center gap-2 px-6 py-3
text-sm font-medium rounded-lg transition-all cursor-pointer text-base font-medium rounded-lg 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"> dark:hover:bg-neutral-800 dark:hover:text-neutral-50">

24
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.wetyOYsY.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.DWf95GRa.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
@@ -80,13 +80,15 @@ Spec
</a> <a href="#faq" class="nav-link block py-2 text-gray-600 dark:text-neutral-400 </a> <a href="#faq" class="nav-link block py-2 text-gray-600 dark:text-neutral-400
hover:text-sky-600" data-nav-link data-section-id="faq"> hover:text-sky-600" data-nav-link data-section-id="faq">
FAQ FAQ
</a> </div> </nav> </header> <script type="module">function f(){const n=document.getElementById("site-header"),g=document.getElementById("hero"),o=document.getElementById("mobile-menu-btn"),s=document.getElementById("mobile-nav");if(!n||!g)return;const v=64;function c(){window.scrollY>=v?(n.classList.remove("translate-y-[-100%]"),n.classList.add("border-gray-200","dark:border-neutral-800")):(n.classList.add("translate-y-[-100%]"),n.classList.remove("border-gray-200","dark:border-neutral-800"))}window.addEventListener("scroll",c,{passive:!0}),c(),o&&s&&(o.addEventListener("click",()=>{s.classList.toggle("hidden")}),s.querySelectorAll("a").forEach(i=>{i.addEventListener("click",()=>{s.classList.add("hidden")})}));const r=document.querySelectorAll("[data-nav-link]"),l=[],u=new Set;r.forEach(i=>{const e=i.getAttribute("data-section-id");if(e&&!u.has(e)){u.add(e);const t=document.getElementById(e);t&&l.push({id:e,element:t})}});function m(){let e=null;for(const{id:t,element:d}of l)d.getBoundingClientRect().top<=100&&(e=t);r.forEach(t=>{const d=t.getAttribute("data-section-id");t.classList.toggle("active",d===e)})}let a=!1;window.addEventListener("scroll",()=>{a||(requestAnimationFrame(()=>{m(),a=!1}),a=!0)}),m()}f();document.addEventListener("astro:after-swap",f);</script> <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center </a> </div> </nav> </header> <script type="module">function f(){const n=document.getElementById("site-header"),g=document.getElementById("hero"),r=document.getElementById("mobile-menu-btn"),s=document.getElementById("mobile-nav");if(!n||!g)return;const v=64;function o(){window.scrollY>=v?(n.classList.remove("translate-y-[-100%]","border-transparent"),n.classList.add("border-gray-200","dark:border-neutral-800")):(n.classList.add("translate-y-[-100%]","border-transparent"),n.classList.remove("border-gray-200","dark:border-neutral-800"))}window.addEventListener("scroll",o,{passive:!0}),o(),r&&s&&(r.addEventListener("click",()=>{s.classList.toggle("hidden")}),s.querySelectorAll("a").forEach(a=>{a.addEventListener("click",()=>{s.classList.add("hidden")})}));const c=document.querySelectorAll("[data-nav-link]"),l=[],u=new Set;c.forEach(a=>{const e=a.getAttribute("data-section-id");if(e&&!u.has(e)){u.add(e);const t=document.getElementById(e);t&&l.push({id:e,element:t})}});function m(){let e=null;for(const{id:t,element:i}of l)i.getBoundingClientRect().top<=100&&(e=t);c.forEach(t=>{const i=t.getAttribute("data-section-id");t.classList.toggle("active",i===e)})}let d=!1;window.addEventListener("scroll",()=>{d||(requestAnimationFrame(()=>{m(),d=!1}),d=!0)}),m()}f();document.addEventListener("astro:after-swap",f);</script> <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center
px-6 py-16 overflow-hidden"> <!-- Background gradient/texture --> <div class="absolute inset-0 bg-gradient-to-b px-6 pt-16 pb-24 overflow-hidden"> <!-- Background gradient/texture --> <div class="absolute inset-0 bg-gradient-to-b
from-gray-100 to-gray-50 from-gray-100 to-gray-50
dark:from-neutral-900 dark:to-neutral-950"></div> <!-- Subtle grid pattern --> <div class="absolute inset-0 opacity-[0.03] dark:opacity-[0.05] dark:from-neutral-900 dark:to-neutral-950"></div> <!-- Subtle grid pattern with fade --> <div class="absolute inset-0 opacity-[0.06] dark:opacity-[0.12]
bg-[linear-gradient(theme(colors.gray.950)_1px,transparent_1px),linear-gradient(90deg,theme(colors.gray.950)_1px,transparent_1px)] bg-[linear-gradient(theme(colors.gray.950)_1px,transparent_1px),linear-gradient(90deg,theme(colors.gray.950)_1px,transparent_1px)]
dark:bg-[linear-gradient(theme(colors.neutral.600)_1px,transparent_1px),linear-gradient(90deg,theme(colors.neutral.600)_1px,transparent_1px)] dark:bg-[linear-gradient(theme(colors.neutral.600)_1px,transparent_1px),linear-gradient(90deg,theme(colors.neutral.600)_1px,transparent_1px)]
bg-[size:60px_60px]"></div> <!-- Top bar with version & theme --> <div class="absolute top-0 inset-x-0 flex items-center justify-between bg-[size:60px_60px]
[-webkit-mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]
[mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]"></div> <!-- Top bar with version & theme --> <div class="absolute top-0 inset-x-0 flex items-center justify-between
px-6 py-4 animate-fade-in-down"> <div class="flex items-center gap-3"> <div class="relative" data-version-selector> <!-- Trigger button --> <button type="button" data-version-trigger aria-haspopup="listbox" aria-expanded="false" class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono px-6 py-4 animate-fade-in-down"> <div class="flex items-center gap-3"> <div class="relative" data-version-selector> <!-- Trigger button --> <button type="button" data-version-trigger aria-haspopup="listbox" aria-expanded="false" class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono
border border-gray-200 dark:border-neutral-700 border border-gray-200 dark:border-neutral-700
rounded-md bg-transparent cursor-pointer transition-colors rounded-md bg-transparent cursor-pointer transition-colors
@@ -127,19 +129,19 @@ 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-5 py-2.5 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
text-sm font-medium rounded-lg transition-all cursor-pointer text-base font-medium rounded-lg 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"> dark:hover:bg-neutral-800 dark:hover:text-neutral-50">
About About
</a> <a href="#spec" class="inline-flex items-center justify-center gap-2 px-5 py-2.5 </a> <a href="#spec" class="inline-flex items-center justify-center gap-2 px-6 py-3
text-sm font-medium rounded-lg transition-all cursor-pointer text-base font-medium rounded-lg transition-all cursor-pointer
bg-sky-600 text-white 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 Read the Spec
</a> <a href="#faq" class="inline-flex items-center justify-center gap-2 px-5 py-2.5 </a> <a href="#faq" class="inline-flex items-center justify-center gap-2 px-6 py-3
text-sm font-medium rounded-lg transition-all cursor-pointer text-base font-medium rounded-lg 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"> dark:hover:bg-neutral-800 dark:hover:text-neutral-50">

24
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.wetyOYsY.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.DWf95GRa.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
@@ -80,13 +80,15 @@ Spec
</a> <a href="#faq" class="nav-link block py-2 text-gray-600 dark:text-neutral-400 </a> <a href="#faq" class="nav-link block py-2 text-gray-600 dark:text-neutral-400
hover:text-sky-600" data-nav-link data-section-id="faq"> hover:text-sky-600" data-nav-link data-section-id="faq">
FAQ FAQ
</a> </div> </nav> </header> <script type="module">function f(){const n=document.getElementById("site-header"),g=document.getElementById("hero"),o=document.getElementById("mobile-menu-btn"),s=document.getElementById("mobile-nav");if(!n||!g)return;const v=64;function c(){window.scrollY>=v?(n.classList.remove("translate-y-[-100%]"),n.classList.add("border-gray-200","dark:border-neutral-800")):(n.classList.add("translate-y-[-100%]"),n.classList.remove("border-gray-200","dark:border-neutral-800"))}window.addEventListener("scroll",c,{passive:!0}),c(),o&&s&&(o.addEventListener("click",()=>{s.classList.toggle("hidden")}),s.querySelectorAll("a").forEach(i=>{i.addEventListener("click",()=>{s.classList.add("hidden")})}));const r=document.querySelectorAll("[data-nav-link]"),l=[],u=new Set;r.forEach(i=>{const e=i.getAttribute("data-section-id");if(e&&!u.has(e)){u.add(e);const t=document.getElementById(e);t&&l.push({id:e,element:t})}});function m(){let e=null;for(const{id:t,element:d}of l)d.getBoundingClientRect().top<=100&&(e=t);r.forEach(t=>{const d=t.getAttribute("data-section-id");t.classList.toggle("active",d===e)})}let a=!1;window.addEventListener("scroll",()=>{a||(requestAnimationFrame(()=>{m(),a=!1}),a=!0)}),m()}f();document.addEventListener("astro:after-swap",f);</script> <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center </a> </div> </nav> </header> <script type="module">function f(){const n=document.getElementById("site-header"),g=document.getElementById("hero"),r=document.getElementById("mobile-menu-btn"),s=document.getElementById("mobile-nav");if(!n||!g)return;const v=64;function o(){window.scrollY>=v?(n.classList.remove("translate-y-[-100%]","border-transparent"),n.classList.add("border-gray-200","dark:border-neutral-800")):(n.classList.add("translate-y-[-100%]","border-transparent"),n.classList.remove("border-gray-200","dark:border-neutral-800"))}window.addEventListener("scroll",o,{passive:!0}),o(),r&&s&&(r.addEventListener("click",()=>{s.classList.toggle("hidden")}),s.querySelectorAll("a").forEach(a=>{a.addEventListener("click",()=>{s.classList.add("hidden")})}));const c=document.querySelectorAll("[data-nav-link]"),l=[],u=new Set;c.forEach(a=>{const e=a.getAttribute("data-section-id");if(e&&!u.has(e)){u.add(e);const t=document.getElementById(e);t&&l.push({id:e,element:t})}});function m(){let e=null;for(const{id:t,element:i}of l)i.getBoundingClientRect().top<=100&&(e=t);c.forEach(t=>{const i=t.getAttribute("data-section-id");t.classList.toggle("active",i===e)})}let d=!1;window.addEventListener("scroll",()=>{d||(requestAnimationFrame(()=>{m(),d=!1}),d=!0)}),m()}f();document.addEventListener("astro:after-swap",f);</script> <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center
px-6 py-16 overflow-hidden"> <!-- Background gradient/texture --> <div class="absolute inset-0 bg-gradient-to-b px-6 pt-16 pb-24 overflow-hidden"> <!-- Background gradient/texture --> <div class="absolute inset-0 bg-gradient-to-b
from-gray-100 to-gray-50 from-gray-100 to-gray-50
dark:from-neutral-900 dark:to-neutral-950"></div> <!-- Subtle grid pattern --> <div class="absolute inset-0 opacity-[0.03] dark:opacity-[0.05] dark:from-neutral-900 dark:to-neutral-950"></div> <!-- Subtle grid pattern with fade --> <div class="absolute inset-0 opacity-[0.06] dark:opacity-[0.12]
bg-[linear-gradient(theme(colors.gray.950)_1px,transparent_1px),linear-gradient(90deg,theme(colors.gray.950)_1px,transparent_1px)] bg-[linear-gradient(theme(colors.gray.950)_1px,transparent_1px),linear-gradient(90deg,theme(colors.gray.950)_1px,transparent_1px)]
dark:bg-[linear-gradient(theme(colors.neutral.600)_1px,transparent_1px),linear-gradient(90deg,theme(colors.neutral.600)_1px,transparent_1px)] dark:bg-[linear-gradient(theme(colors.neutral.600)_1px,transparent_1px),linear-gradient(90deg,theme(colors.neutral.600)_1px,transparent_1px)]
bg-[size:60px_60px]"></div> <!-- Top bar with version & theme --> <div class="absolute top-0 inset-x-0 flex items-center justify-between bg-[size:60px_60px]
[-webkit-mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]
[mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]"></div> <!-- Top bar with version & theme --> <div class="absolute top-0 inset-x-0 flex items-center justify-between
px-6 py-4 animate-fade-in-down"> <div class="flex items-center gap-3"> <div class="relative" data-version-selector> <!-- Trigger button --> <button type="button" data-version-trigger aria-haspopup="listbox" aria-expanded="false" class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono px-6 py-4 animate-fade-in-down"> <div class="flex items-center gap-3"> <div class="relative" data-version-selector> <!-- Trigger button --> <button type="button" data-version-trigger aria-haspopup="listbox" aria-expanded="false" class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono
border border-gray-200 dark:border-neutral-700 border border-gray-200 dark:border-neutral-700
rounded-md bg-transparent cursor-pointer transition-colors rounded-md bg-transparent cursor-pointer transition-colors
@@ -127,19 +129,19 @@ 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-5 py-2.5 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
text-sm font-medium rounded-lg transition-all cursor-pointer text-base font-medium rounded-lg 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"> dark:hover:bg-neutral-800 dark:hover:text-neutral-50">
About About
</a> <a href="#spec" class="inline-flex items-center justify-center gap-2 px-5 py-2.5 </a> <a href="#spec" class="inline-flex items-center justify-center gap-2 px-6 py-3
text-sm font-medium rounded-lg transition-all cursor-pointer text-base font-medium rounded-lg transition-all cursor-pointer
bg-sky-600 text-white 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 Read the Spec
</a> <a href="#faq" class="inline-flex items-center justify-center gap-2 px-5 py-2.5 </a> <a href="#faq" class="inline-flex items-center justify-center gap-2 px-6 py-3
text-sm font-medium rounded-lg transition-all cursor-pointer text-base font-medium rounded-lg 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"> dark:hover:bg-neutral-800 dark:hover:text-neutral-50">

24
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.wetyOYsY.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.DWf95GRa.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
@@ -80,13 +80,15 @@ Spec
</a> <a href="#faq" class="nav-link block py-2 text-gray-600 dark:text-neutral-400 </a> <a href="#faq" class="nav-link block py-2 text-gray-600 dark:text-neutral-400
hover:text-sky-600" data-nav-link data-section-id="faq"> hover:text-sky-600" data-nav-link data-section-id="faq">
FAQ FAQ
</a> </div> </nav> </header> <script type="module">function f(){const n=document.getElementById("site-header"),g=document.getElementById("hero"),o=document.getElementById("mobile-menu-btn"),s=document.getElementById("mobile-nav");if(!n||!g)return;const v=64;function c(){window.scrollY>=v?(n.classList.remove("translate-y-[-100%]"),n.classList.add("border-gray-200","dark:border-neutral-800")):(n.classList.add("translate-y-[-100%]"),n.classList.remove("border-gray-200","dark:border-neutral-800"))}window.addEventListener("scroll",c,{passive:!0}),c(),o&&s&&(o.addEventListener("click",()=>{s.classList.toggle("hidden")}),s.querySelectorAll("a").forEach(i=>{i.addEventListener("click",()=>{s.classList.add("hidden")})}));const r=document.querySelectorAll("[data-nav-link]"),l=[],u=new Set;r.forEach(i=>{const e=i.getAttribute("data-section-id");if(e&&!u.has(e)){u.add(e);const t=document.getElementById(e);t&&l.push({id:e,element:t})}});function m(){let e=null;for(const{id:t,element:d}of l)d.getBoundingClientRect().top<=100&&(e=t);r.forEach(t=>{const d=t.getAttribute("data-section-id");t.classList.toggle("active",d===e)})}let a=!1;window.addEventListener("scroll",()=>{a||(requestAnimationFrame(()=>{m(),a=!1}),a=!0)}),m()}f();document.addEventListener("astro:after-swap",f);</script> <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center </a> </div> </nav> </header> <script type="module">function f(){const n=document.getElementById("site-header"),g=document.getElementById("hero"),r=document.getElementById("mobile-menu-btn"),s=document.getElementById("mobile-nav");if(!n||!g)return;const v=64;function o(){window.scrollY>=v?(n.classList.remove("translate-y-[-100%]","border-transparent"),n.classList.add("border-gray-200","dark:border-neutral-800")):(n.classList.add("translate-y-[-100%]","border-transparent"),n.classList.remove("border-gray-200","dark:border-neutral-800"))}window.addEventListener("scroll",o,{passive:!0}),o(),r&&s&&(r.addEventListener("click",()=>{s.classList.toggle("hidden")}),s.querySelectorAll("a").forEach(a=>{a.addEventListener("click",()=>{s.classList.add("hidden")})}));const c=document.querySelectorAll("[data-nav-link]"),l=[],u=new Set;c.forEach(a=>{const e=a.getAttribute("data-section-id");if(e&&!u.has(e)){u.add(e);const t=document.getElementById(e);t&&l.push({id:e,element:t})}});function m(){let e=null;for(const{id:t,element:i}of l)i.getBoundingClientRect().top<=100&&(e=t);c.forEach(t=>{const i=t.getAttribute("data-section-id");t.classList.toggle("active",i===e)})}let d=!1;window.addEventListener("scroll",()=>{d||(requestAnimationFrame(()=>{m(),d=!1}),d=!0)}),m()}f();document.addEventListener("astro:after-swap",f);</script> <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center
px-6 py-16 overflow-hidden"> <!-- Background gradient/texture --> <div class="absolute inset-0 bg-gradient-to-b px-6 pt-16 pb-24 overflow-hidden"> <!-- Background gradient/texture --> <div class="absolute inset-0 bg-gradient-to-b
from-gray-100 to-gray-50 from-gray-100 to-gray-50
dark:from-neutral-900 dark:to-neutral-950"></div> <!-- Subtle grid pattern --> <div class="absolute inset-0 opacity-[0.03] dark:opacity-[0.05] dark:from-neutral-900 dark:to-neutral-950"></div> <!-- Subtle grid pattern with fade --> <div class="absolute inset-0 opacity-[0.06] dark:opacity-[0.12]
bg-[linear-gradient(theme(colors.gray.950)_1px,transparent_1px),linear-gradient(90deg,theme(colors.gray.950)_1px,transparent_1px)] bg-[linear-gradient(theme(colors.gray.950)_1px,transparent_1px),linear-gradient(90deg,theme(colors.gray.950)_1px,transparent_1px)]
dark:bg-[linear-gradient(theme(colors.neutral.600)_1px,transparent_1px),linear-gradient(90deg,theme(colors.neutral.600)_1px,transparent_1px)] dark:bg-[linear-gradient(theme(colors.neutral.600)_1px,transparent_1px),linear-gradient(90deg,theme(colors.neutral.600)_1px,transparent_1px)]
bg-[size:60px_60px]"></div> <!-- Top bar with version & theme --> <div class="absolute top-0 inset-x-0 flex items-center justify-between bg-[size:60px_60px]
[-webkit-mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]
[mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]"></div> <!-- Top bar with version & theme --> <div class="absolute top-0 inset-x-0 flex items-center justify-between
px-6 py-4 animate-fade-in-down"> <div class="flex items-center gap-3"> <div class="relative" data-version-selector> <!-- Trigger button --> <button type="button" data-version-trigger aria-haspopup="listbox" aria-expanded="false" class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono px-6 py-4 animate-fade-in-down"> <div class="flex items-center gap-3"> <div class="relative" data-version-selector> <!-- Trigger button --> <button type="button" data-version-trigger aria-haspopup="listbox" aria-expanded="false" class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono
border border-gray-200 dark:border-neutral-700 border border-gray-200 dark:border-neutral-700
rounded-md bg-transparent cursor-pointer transition-colors rounded-md bg-transparent cursor-pointer transition-colors
@@ -127,19 +129,19 @@ 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-5 py-2.5 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
text-sm font-medium rounded-lg transition-all cursor-pointer text-base font-medium rounded-lg 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"> dark:hover:bg-neutral-800 dark:hover:text-neutral-50">
About About
</a> <a href="#spec" class="inline-flex items-center justify-center gap-2 px-5 py-2.5 </a> <a href="#spec" class="inline-flex items-center justify-center gap-2 px-6 py-3
text-sm font-medium rounded-lg transition-all cursor-pointer text-base font-medium rounded-lg transition-all cursor-pointer
bg-sky-600 text-white 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 Read the Spec
</a> <a href="#faq" class="inline-flex items-center justify-center gap-2 px-5 py-2.5 </a> <a href="#faq" class="inline-flex items-center justify-center gap-2 px-6 py-3
text-sm font-medium rounded-lg transition-all cursor-pointer text-base font-medium rounded-lg 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"> dark:hover:bg-neutral-800 dark:hover:text-neutral-50">

24
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.wetyOYsY.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.DWf95GRa.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
@@ -80,13 +80,15 @@ Spec
</a> <a href="#faq" class="nav-link block py-2 text-gray-600 dark:text-neutral-400 </a> <a href="#faq" class="nav-link block py-2 text-gray-600 dark:text-neutral-400
hover:text-sky-600" data-nav-link data-section-id="faq"> hover:text-sky-600" data-nav-link data-section-id="faq">
FAQ FAQ
</a> </div> </nav> </header> <script type="module">function f(){const n=document.getElementById("site-header"),g=document.getElementById("hero"),o=document.getElementById("mobile-menu-btn"),s=document.getElementById("mobile-nav");if(!n||!g)return;const v=64;function c(){window.scrollY>=v?(n.classList.remove("translate-y-[-100%]"),n.classList.add("border-gray-200","dark:border-neutral-800")):(n.classList.add("translate-y-[-100%]"),n.classList.remove("border-gray-200","dark:border-neutral-800"))}window.addEventListener("scroll",c,{passive:!0}),c(),o&&s&&(o.addEventListener("click",()=>{s.classList.toggle("hidden")}),s.querySelectorAll("a").forEach(i=>{i.addEventListener("click",()=>{s.classList.add("hidden")})}));const r=document.querySelectorAll("[data-nav-link]"),l=[],u=new Set;r.forEach(i=>{const e=i.getAttribute("data-section-id");if(e&&!u.has(e)){u.add(e);const t=document.getElementById(e);t&&l.push({id:e,element:t})}});function m(){let e=null;for(const{id:t,element:d}of l)d.getBoundingClientRect().top<=100&&(e=t);r.forEach(t=>{const d=t.getAttribute("data-section-id");t.classList.toggle("active",d===e)})}let a=!1;window.addEventListener("scroll",()=>{a||(requestAnimationFrame(()=>{m(),a=!1}),a=!0)}),m()}f();document.addEventListener("astro:after-swap",f);</script> <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center </a> </div> </nav> </header> <script type="module">function f(){const n=document.getElementById("site-header"),g=document.getElementById("hero"),r=document.getElementById("mobile-menu-btn"),s=document.getElementById("mobile-nav");if(!n||!g)return;const v=64;function o(){window.scrollY>=v?(n.classList.remove("translate-y-[-100%]","border-transparent"),n.classList.add("border-gray-200","dark:border-neutral-800")):(n.classList.add("translate-y-[-100%]","border-transparent"),n.classList.remove("border-gray-200","dark:border-neutral-800"))}window.addEventListener("scroll",o,{passive:!0}),o(),r&&s&&(r.addEventListener("click",()=>{s.classList.toggle("hidden")}),s.querySelectorAll("a").forEach(a=>{a.addEventListener("click",()=>{s.classList.add("hidden")})}));const c=document.querySelectorAll("[data-nav-link]"),l=[],u=new Set;c.forEach(a=>{const e=a.getAttribute("data-section-id");if(e&&!u.has(e)){u.add(e);const t=document.getElementById(e);t&&l.push({id:e,element:t})}});function m(){let e=null;for(const{id:t,element:i}of l)i.getBoundingClientRect().top<=100&&(e=t);c.forEach(t=>{const i=t.getAttribute("data-section-id");t.classList.toggle("active",i===e)})}let d=!1;window.addEventListener("scroll",()=>{d||(requestAnimationFrame(()=>{m(),d=!1}),d=!0)}),m()}f();document.addEventListener("astro:after-swap",f);</script> <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center
px-6 py-16 overflow-hidden"> <!-- Background gradient/texture --> <div class="absolute inset-0 bg-gradient-to-b px-6 pt-16 pb-24 overflow-hidden"> <!-- Background gradient/texture --> <div class="absolute inset-0 bg-gradient-to-b
from-gray-100 to-gray-50 from-gray-100 to-gray-50
dark:from-neutral-900 dark:to-neutral-950"></div> <!-- Subtle grid pattern --> <div class="absolute inset-0 opacity-[0.03] dark:opacity-[0.05] dark:from-neutral-900 dark:to-neutral-950"></div> <!-- Subtle grid pattern with fade --> <div class="absolute inset-0 opacity-[0.06] dark:opacity-[0.12]
bg-[linear-gradient(theme(colors.gray.950)_1px,transparent_1px),linear-gradient(90deg,theme(colors.gray.950)_1px,transparent_1px)] bg-[linear-gradient(theme(colors.gray.950)_1px,transparent_1px),linear-gradient(90deg,theme(colors.gray.950)_1px,transparent_1px)]
dark:bg-[linear-gradient(theme(colors.neutral.600)_1px,transparent_1px),linear-gradient(90deg,theme(colors.neutral.600)_1px,transparent_1px)] dark:bg-[linear-gradient(theme(colors.neutral.600)_1px,transparent_1px),linear-gradient(90deg,theme(colors.neutral.600)_1px,transparent_1px)]
bg-[size:60px_60px]"></div> <!-- Top bar with version & theme --> <div class="absolute top-0 inset-x-0 flex items-center justify-between bg-[size:60px_60px]
[-webkit-mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]
[mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]"></div> <!-- Top bar with version & theme --> <div class="absolute top-0 inset-x-0 flex items-center justify-between
px-6 py-4 animate-fade-in-down"> <div class="flex items-center gap-3"> <div class="relative" data-version-selector> <!-- Trigger button --> <button type="button" data-version-trigger aria-haspopup="listbox" aria-expanded="false" class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono px-6 py-4 animate-fade-in-down"> <div class="flex items-center gap-3"> <div class="relative" data-version-selector> <!-- Trigger button --> <button type="button" data-version-trigger aria-haspopup="listbox" aria-expanded="false" class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono
border border-gray-200 dark:border-neutral-700 border border-gray-200 dark:border-neutral-700
rounded-md bg-transparent cursor-pointer transition-colors rounded-md bg-transparent cursor-pointer transition-colors
@@ -127,19 +129,19 @@ 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-5 py-2.5 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
text-sm font-medium rounded-lg transition-all cursor-pointer text-base font-medium rounded-lg 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"> dark:hover:bg-neutral-800 dark:hover:text-neutral-50">
About About
</a> <a href="#spec" class="inline-flex items-center justify-center gap-2 px-5 py-2.5 </a> <a href="#spec" class="inline-flex items-center justify-center gap-2 px-6 py-3
text-sm font-medium rounded-lg transition-all cursor-pointer text-base font-medium rounded-lg transition-all cursor-pointer
bg-sky-600 text-white 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 Read the Spec
</a> <a href="#faq" class="inline-flex items-center justify-center gap-2 px-5 py-2.5 </a> <a href="#faq" class="inline-flex items-center justify-center gap-2 px-6 py-3
text-sm font-medium rounded-lg transition-all cursor-pointer text-base font-medium rounded-lg 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"> dark:hover:bg-neutral-800 dark:hover:text-neutral-50">

4
src/components/Header.astro
View File

@@ -183,10 +183,10 @@ const { version } = Astro.props;
function updateHeaderVisibility() { function updateHeaderVisibility() {
if (window.scrollY >= navbarHeight) { if (window.scrollY >= navbarHeight) {
header.classList.remove("translate-y-[-100%]"); header.classList.remove("translate-y-[-100%]", "border-transparent");
header.classList.add("border-gray-200", "dark:border-neutral-800"); header.classList.add("border-gray-200", "dark:border-neutral-800");
} else { } else {
header.classList.add("translate-y-[-100%]"); header.classList.add("translate-y-[-100%]", "border-transparent");
header.classList.remove("border-gray-200", "dark:border-neutral-800"); header.classList.remove("border-gray-200", "dark:border-neutral-800");
} }
} }

22
src/components/Hero.astro
View File

@@ -14,7 +14,7 @@ const { version, svgPath } = Astro.props;
<section <section
id="hero" id="hero"
class="relative min-h-[75vh] flex flex-col items-center justify-center class="relative min-h-[75vh] flex flex-col items-center justify-center
px-6 py-16 overflow-hidden" px-6 pt-16 pb-24 overflow-hidden"
> >
<!-- Background gradient/texture --> <!-- Background gradient/texture -->
<div <div
@@ -24,12 +24,14 @@ const { version, svgPath } = Astro.props;
> >
</div> </div>
<!-- Subtle grid pattern --> <!-- Subtle grid pattern with fade -->
<div <div
class="absolute inset-0 opacity-[0.03] dark:opacity-[0.05] class="absolute inset-0 opacity-[0.06] dark:opacity-[0.12]
bg-[linear-gradient(theme(colors.gray.950)_1px,transparent_1px),linear-gradient(90deg,theme(colors.gray.950)_1px,transparent_1px)] bg-[linear-gradient(theme(colors.gray.950)_1px,transparent_1px),linear-gradient(90deg,theme(colors.gray.950)_1px,transparent_1px)]
dark:bg-[linear-gradient(theme(colors.neutral.600)_1px,transparent_1px),linear-gradient(90deg,theme(colors.neutral.600)_1px,transparent_1px)] dark:bg-[linear-gradient(theme(colors.neutral.600)_1px,transparent_1px),linear-gradient(90deg,theme(colors.neutral.600)_1px,transparent_1px)]
bg-[size:60px_60px]" bg-[size:60px_60px]
[-webkit-mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]
[mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]"
> >
</div> </div>
@@ -120,8 +122,8 @@ const { version, svgPath } = Astro.props;
> >
<a <a
href="#about" href="#about"
class="inline-flex items-center justify-center gap-2 px-5 py-2.5 class="inline-flex items-center justify-center gap-2 px-6 py-3
text-sm font-medium rounded-lg transition-all cursor-pointer text-base font-medium rounded-lg 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" dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
@@ -130,8 +132,8 @@ const { version, svgPath } = Astro.props;
</a> </a>
<a <a
href="#spec" href="#spec"
class="inline-flex items-center justify-center gap-2 px-5 py-2.5 class="inline-flex items-center justify-center gap-2 px-6 py-3
text-sm font-medium rounded-lg transition-all cursor-pointer text-base font-medium rounded-lg transition-all cursor-pointer
bg-sky-600 text-white 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"
> >
@@ -139,8 +141,8 @@ const { version, svgPath } = Astro.props;
</a> </a>
<a <a
href="#faq" href="#faq"
class="inline-flex items-center justify-center gap-2 px-5 py-2.5 class="inline-flex items-center justify-center gap-2 px-6 py-3
text-sm font-medium rounded-lg transition-all cursor-pointer text-base font-medium rounded-lg 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" dark:hover:bg-neutral-800 dark:hover:text-neutral-50"

7
src/components/VersionSelector.astro
View File

@@ -86,9 +86,7 @@ const { currentVersion, versions } = Astro.props;
const dropdown = selector.querySelector( const dropdown = selector.querySelector(
"[data-version-dropdown]" "[data-version-dropdown]"
) as HTMLElement; ) as HTMLElement;
const arrow = selector.querySelector( const arrow = selector.querySelector("[data-arrow-icon]") as HTMLElement;
"[data-arrow-icon]"
) as HTMLElement;
if (!trigger || !dropdown) return; if (!trigger || !dropdown) return;
@@ -109,7 +107,8 @@ const { currentVersion, versions } = Astro.props;
const isOpen = dropdown.dataset.open === "true"; const isOpen = dropdown.dataset.open === "true";
// Close all other dropdowns // Close all other dropdowns
document.querySelectorAll("[data-version-dropdown][data-open]") document
.querySelectorAll("[data-version-dropdown][data-open]")
.forEach((d) => { .forEach((d) => {
delete (d as HTMLElement).dataset.open; delete (d as HTMLElement).dataset.open;
const t = d.previousElementSibling as HTMLElement; const t = d.previousElementSibling as HTMLElement;