mirror of
https://github.com/jimeh/commonflow.org.git
synced 2026-02-19 05:46:40 +00:00
wip: highlight spec clauses on anchor link activation
This commit is contained in:
@@ -8,7 +8,7 @@
|
||||
document.documentElement.classList.add("dark");
|
||||
}
|
||||
})();
|
||||
</script><link rel="stylesheet" href="/_astro/index.BZi0cy7Q.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.qe8PXlQZ.css"></head> <body class="min-h-screen"> <div class="flex flex-col items-center justify-center min-h-screen p-8"> <div class="text-center"> <h1 class="text-[8rem] sm:text-[12rem] font-display font-bold leading-none
|
||||
text-gray-300 dark:text-neutral-700">
|
||||
404
|
||||
</h1> <p class="text-xl mb-2 text-gray-600 dark:text-neutral-400">
|
||||
|
||||
File diff suppressed because one or more lines are too long
1
docs/_astro/index.qe8PXlQZ.css
Normal file
1
docs/_astro/index.qe8PXlQZ.css
Normal file
File diff suppressed because one or more lines are too long
@@ -8,7 +8,7 @@
|
||||
document.documentElement.classList.add("dark");
|
||||
}
|
||||
})();
|
||||
</script><link rel="stylesheet" href="/_astro/index.BZi0cy7Q.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.qe8PXlQZ.css"></head> <body class="min-h-screen"> <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b border-transparent
|
||||
translate-y-[-100%] transition-transform duration-300
|
||||
backdrop-blur-xl bg-gray-50/85 dark:bg-neutral-950/85"> <div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"> <!-- Logo / Title + Version --> <div class="flex items-center gap-3"> <a href="#hero" class="flex items-center gap-3 no-underline
|
||||
text-gray-950 dark:text-neutral-50
|
||||
@@ -428,7 +428,7 @@ and creates a merge commit to mark the integration of the branch with
|
||||
master.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol> </section> </article> </div> </div> </div> </section> <section id="faq" 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">FAQ</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> Common questions about Git Common-Flow </p> </div> <!-- FAQ Items --> <div class="space-y-0"> <div class="border-b border-gray-200 dark:border-neutral-800" data-faq-item> <button class="flex justify-between items-center w-full py-6 text-left
|
||||
</ol> </section> </article> </div> </div> </div> </section> <script type="module">const i="clause-highlight";function a(t){t.classList.remove(i),t.offsetWidth,t.classList.add(i),setTimeout(()=>{t.classList.remove(i)},2e3)}function n(){const t=window.location.hash;if(!t||!t.startsWith("#clause-"))return;const s=t.slice(1),e=document.getElementById(s);e&&setTimeout(()=>a(e),100)}function h(){document.addEventListener("click",t=>{const s=t.target.closest('a[href^="#clause-"]');if(!s)return;const e=s.getAttribute("href");if(!e)return;const c=e.slice(1),o=document.getElementById(c);o&&setTimeout(()=>a(o),100)}),window.addEventListener("hashchange",n),window.location.hash?.startsWith("#clause-")&&(document.readyState==="complete"?n():window.addEventListener("load",n))}h();</script> <section id="faq" 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">FAQ</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> Common questions about Git Common-Flow </p> </div> <!-- FAQ Items --> <div class="space-y-0"> <div class="border-b border-gray-200 dark:border-neutral-800" data-faq-item> <button class="flex justify-between items-center w-full py-6 text-left
|
||||
font-display text-lg font-semibold cursor-pointer
|
||||
transition-colors
|
||||
text-gray-950 dark:text-neutral-50
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
document.documentElement.classList.add("dark");
|
||||
}
|
||||
})();
|
||||
</script><link rel="stylesheet" href="/_astro/index.BZi0cy7Q.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.qe8PXlQZ.css"></head> <body class="min-h-screen"> <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b border-transparent
|
||||
translate-y-[-100%] transition-transform duration-300
|
||||
backdrop-blur-xl bg-gray-50/85 dark:bg-neutral-950/85"> <div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"> <!-- Logo / Title + Version --> <div class="flex items-center gap-3"> <a href="#hero" class="flex items-center gap-3 no-underline
|
||||
text-gray-950 dark:text-neutral-50
|
||||
@@ -334,7 +334,7 @@ into the master branch, that work should have happened against the master
|
||||
branch in the first place.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol> </section> </article> </div> </div> </div> </section> <section id="faq" 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">FAQ</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> Common questions about Git Common-Flow </p> </div> <!-- FAQ Items --> <div class="space-y-0"> </div> </div> </div> </section> <script type="module">function n(){document.querySelectorAll("[data-faq-item]").forEach(r=>{const t=r.querySelector("[data-faq-trigger]"),a=r.querySelector("[data-faq-content]"),s=r.querySelector("[data-faq-icon]");!t||!a||!s||t.addEventListener("click",()=>{const e=t.getAttribute("aria-expanded")==="true";t.setAttribute("aria-expanded",e?"false":"true"),a.classList.toggle("grid-rows-[1fr]",!e),a.classList.toggle("grid-rows-[0fr]",e),s.classList.toggle("rotate-180",!e)})})}n();document.addEventListener("astro:after-swap",n);</script> </main> <footer class="pt-12 pb-6 my-28 text-sm
|
||||
</ol> </section> </article> </div> </div> </div> </section> <script type="module">const i="clause-highlight";function a(t){t.classList.remove(i),t.offsetWidth,t.classList.add(i),setTimeout(()=>{t.classList.remove(i)},2e3)}function n(){const t=window.location.hash;if(!t||!t.startsWith("#clause-"))return;const s=t.slice(1),e=document.getElementById(s);e&&setTimeout(()=>a(e),100)}function h(){document.addEventListener("click",t=>{const s=t.target.closest('a[href^="#clause-"]');if(!s)return;const e=s.getAttribute("href");if(!e)return;const c=e.slice(1),o=document.getElementById(c);o&&setTimeout(()=>a(o),100)}),window.addEventListener("hashchange",n),window.location.hash?.startsWith("#clause-")&&(document.readyState==="complete"?n():window.addEventListener("load",n))}h();</script> <section id="faq" 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">FAQ</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> Common questions about Git Common-Flow </p> </div> <!-- FAQ Items --> <div class="space-y-0"> </div> </div> </div> </section> <script type="module">function n(){document.querySelectorAll("[data-faq-item]").forEach(r=>{const t=r.querySelector("[data-faq-trigger]"),a=r.querySelector("[data-faq-content]"),s=r.querySelector("[data-faq-icon]");!t||!a||!s||t.addEventListener("click",()=>{const e=t.getAttribute("aria-expanded")==="true";t.setAttribute("aria-expanded",e?"false":"true"),a.classList.toggle("grid-rows-[1fr]",!e),a.classList.toggle("grid-rows-[0fr]",e),s.classList.toggle("rotate-180",!e)})})}n();document.addEventListener("astro:after-swap",n);</script> </main> <footer class="pt-12 pb-6 my-28 text-sm
|
||||
text-gray-500 dark:text-neutral-500
|
||||
border-t border-gray-200 dark:border-neutral-800"> <div class="section-container flex flex-col sm:flex-row
|
||||
sm:justify-between sm:items-center gap-2"> <p>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
document.documentElement.classList.add("dark");
|
||||
}
|
||||
})();
|
||||
</script><link rel="stylesheet" href="/_astro/index.BZi0cy7Q.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.qe8PXlQZ.css"></head> <body class="min-h-screen"> <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b border-transparent
|
||||
translate-y-[-100%] transition-transform duration-300
|
||||
backdrop-blur-xl bg-gray-50/85 dark:bg-neutral-950/85"> <div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"> <!-- Logo / Title + Version --> <div class="flex items-center gap-3"> <a href="#hero" class="flex items-center gap-3 no-underline
|
||||
text-gray-950 dark:text-neutral-50
|
||||
@@ -368,7 +368,7 @@ and creates a merge commit to mark the integration of the branch with
|
||||
master.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol> </section> </article> </div> </div> </div> </section> <section id="faq" 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">FAQ</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> Common questions about Git Common-Flow </p> </div> <!-- FAQ Items --> <div class="space-y-0"> </div> </div> </div> </section> <script type="module">function n(){document.querySelectorAll("[data-faq-item]").forEach(r=>{const t=r.querySelector("[data-faq-trigger]"),a=r.querySelector("[data-faq-content]"),s=r.querySelector("[data-faq-icon]");!t||!a||!s||t.addEventListener("click",()=>{const e=t.getAttribute("aria-expanded")==="true";t.setAttribute("aria-expanded",e?"false":"true"),a.classList.toggle("grid-rows-[1fr]",!e),a.classList.toggle("grid-rows-[0fr]",e),s.classList.toggle("rotate-180",!e)})})}n();document.addEventListener("astro:after-swap",n);</script> </main> <footer class="pt-12 pb-6 my-28 text-sm
|
||||
</ol> </section> </article> </div> </div> </div> </section> <script type="module">const i="clause-highlight";function a(t){t.classList.remove(i),t.offsetWidth,t.classList.add(i),setTimeout(()=>{t.classList.remove(i)},2e3)}function n(){const t=window.location.hash;if(!t||!t.startsWith("#clause-"))return;const s=t.slice(1),e=document.getElementById(s);e&&setTimeout(()=>a(e),100)}function h(){document.addEventListener("click",t=>{const s=t.target.closest('a[href^="#clause-"]');if(!s)return;const e=s.getAttribute("href");if(!e)return;const c=e.slice(1),o=document.getElementById(c);o&&setTimeout(()=>a(o),100)}),window.addEventListener("hashchange",n),window.location.hash?.startsWith("#clause-")&&(document.readyState==="complete"?n():window.addEventListener("load",n))}h();</script> <section id="faq" 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">FAQ</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> Common questions about Git Common-Flow </p> </div> <!-- FAQ Items --> <div class="space-y-0"> </div> </div> </div> </section> <script type="module">function n(){document.querySelectorAll("[data-faq-item]").forEach(r=>{const t=r.querySelector("[data-faq-trigger]"),a=r.querySelector("[data-faq-content]"),s=r.querySelector("[data-faq-icon]");!t||!a||!s||t.addEventListener("click",()=>{const e=t.getAttribute("aria-expanded")==="true";t.setAttribute("aria-expanded",e?"false":"true"),a.classList.toggle("grid-rows-[1fr]",!e),a.classList.toggle("grid-rows-[0fr]",e),s.classList.toggle("rotate-180",!e)})})}n();document.addEventListener("astro:after-swap",n);</script> </main> <footer class="pt-12 pb-6 my-28 text-sm
|
||||
text-gray-500 dark:text-neutral-500
|
||||
border-t border-gray-200 dark:border-neutral-800"> <div class="section-container flex flex-col sm:flex-row
|
||||
sm:justify-between sm:items-center gap-2"> <p>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
document.documentElement.classList.add("dark");
|
||||
}
|
||||
})();
|
||||
</script><link rel="stylesheet" href="/_astro/index.BZi0cy7Q.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.qe8PXlQZ.css"></head> <body class="min-h-screen"> <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b border-transparent
|
||||
translate-y-[-100%] transition-transform duration-300
|
||||
backdrop-blur-xl bg-gray-50/85 dark:bg-neutral-950/85"> <div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"> <!-- Logo / Title + Version --> <div class="flex items-center gap-3"> <a href="#hero" class="flex items-center gap-3 no-underline
|
||||
text-gray-950 dark:text-neutral-50
|
||||
@@ -377,7 +377,7 @@ and creates a merge commit to mark the integration of the branch with
|
||||
master.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol> </section> </article> </div> </div> </div> </section> <section id="faq" 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">FAQ</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> Common questions about Git Common-Flow </p> </div> <!-- FAQ Items --> <div class="space-y-0"> </div> </div> </div> </section> <script type="module">function n(){document.querySelectorAll("[data-faq-item]").forEach(r=>{const t=r.querySelector("[data-faq-trigger]"),a=r.querySelector("[data-faq-content]"),s=r.querySelector("[data-faq-icon]");!t||!a||!s||t.addEventListener("click",()=>{const e=t.getAttribute("aria-expanded")==="true";t.setAttribute("aria-expanded",e?"false":"true"),a.classList.toggle("grid-rows-[1fr]",!e),a.classList.toggle("grid-rows-[0fr]",e),s.classList.toggle("rotate-180",!e)})})}n();document.addEventListener("astro:after-swap",n);</script> </main> <footer class="pt-12 pb-6 my-28 text-sm
|
||||
</ol> </section> </article> </div> </div> </div> </section> <script type="module">const i="clause-highlight";function a(t){t.classList.remove(i),t.offsetWidth,t.classList.add(i),setTimeout(()=>{t.classList.remove(i)},2e3)}function n(){const t=window.location.hash;if(!t||!t.startsWith("#clause-"))return;const s=t.slice(1),e=document.getElementById(s);e&&setTimeout(()=>a(e),100)}function h(){document.addEventListener("click",t=>{const s=t.target.closest('a[href^="#clause-"]');if(!s)return;const e=s.getAttribute("href");if(!e)return;const c=e.slice(1),o=document.getElementById(c);o&&setTimeout(()=>a(o),100)}),window.addEventListener("hashchange",n),window.location.hash?.startsWith("#clause-")&&(document.readyState==="complete"?n():window.addEventListener("load",n))}h();</script> <section id="faq" 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">FAQ</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> Common questions about Git Common-Flow </p> </div> <!-- FAQ Items --> <div class="space-y-0"> </div> </div> </div> </section> <script type="module">function n(){document.querySelectorAll("[data-faq-item]").forEach(r=>{const t=r.querySelector("[data-faq-trigger]"),a=r.querySelector("[data-faq-content]"),s=r.querySelector("[data-faq-icon]");!t||!a||!s||t.addEventListener("click",()=>{const e=t.getAttribute("aria-expanded")==="true";t.setAttribute("aria-expanded",e?"false":"true"),a.classList.toggle("grid-rows-[1fr]",!e),a.classList.toggle("grid-rows-[0fr]",e),s.classList.toggle("rotate-180",!e)})})}n();document.addEventListener("astro:after-swap",n);</script> </main> <footer class="pt-12 pb-6 my-28 text-sm
|
||||
text-gray-500 dark:text-neutral-500
|
||||
border-t border-gray-200 dark:border-neutral-800"> <div class="section-container flex flex-col sm:flex-row
|
||||
sm:justify-between sm:items-center gap-2"> <p>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
document.documentElement.classList.add("dark");
|
||||
}
|
||||
})();
|
||||
</script><link rel="stylesheet" href="/_astro/index.BZi0cy7Q.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.qe8PXlQZ.css"></head> <body class="min-h-screen"> <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b border-transparent
|
||||
translate-y-[-100%] transition-transform duration-300
|
||||
backdrop-blur-xl bg-gray-50/85 dark:bg-neutral-950/85"> <div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"> <!-- Logo / Title + Version --> <div class="flex items-center gap-3"> <a href="#hero" class="flex items-center gap-3 no-underline
|
||||
text-gray-950 dark:text-neutral-50
|
||||
@@ -416,7 +416,7 @@ and creates a merge commit to mark the integration of the branch with
|
||||
master.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol> </section> </article> </div> </div> </div> </section> <section id="faq" 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">FAQ</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> Common questions about Git Common-Flow </p> </div> <!-- FAQ Items --> <div class="space-y-0"> <div class="border-b border-gray-200 dark:border-neutral-800" data-faq-item> <button class="flex justify-between items-center w-full py-6 text-left
|
||||
</ol> </section> </article> </div> </div> </div> </section> <script type="module">const i="clause-highlight";function a(t){t.classList.remove(i),t.offsetWidth,t.classList.add(i),setTimeout(()=>{t.classList.remove(i)},2e3)}function n(){const t=window.location.hash;if(!t||!t.startsWith("#clause-"))return;const s=t.slice(1),e=document.getElementById(s);e&&setTimeout(()=>a(e),100)}function h(){document.addEventListener("click",t=>{const s=t.target.closest('a[href^="#clause-"]');if(!s)return;const e=s.getAttribute("href");if(!e)return;const c=e.slice(1),o=document.getElementById(c);o&&setTimeout(()=>a(o),100)}),window.addEventListener("hashchange",n),window.location.hash?.startsWith("#clause-")&&(document.readyState==="complete"?n():window.addEventListener("load",n))}h();</script> <section id="faq" 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">FAQ</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> Common questions about Git Common-Flow </p> </div> <!-- FAQ Items --> <div class="space-y-0"> <div class="border-b border-gray-200 dark:border-neutral-800" data-faq-item> <button class="flex justify-between items-center w-full py-6 text-left
|
||||
font-display text-lg font-semibold cursor-pointer
|
||||
transition-colors
|
||||
text-gray-950 dark:text-neutral-50
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
document.documentElement.classList.add("dark");
|
||||
}
|
||||
})();
|
||||
</script><link rel="stylesheet" href="/_astro/index.BZi0cy7Q.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.qe8PXlQZ.css"></head> <body class="min-h-screen"> <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b border-transparent
|
||||
translate-y-[-100%] transition-transform duration-300
|
||||
backdrop-blur-xl bg-gray-50/85 dark:bg-neutral-950/85"> <div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"> <!-- Logo / Title + Version --> <div class="flex items-center gap-3"> <a href="#hero" class="flex items-center gap-3 no-underline
|
||||
text-gray-950 dark:text-neutral-50
|
||||
@@ -428,7 +428,7 @@ and creates a merge commit to mark the integration of the branch with
|
||||
master.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol> </section> </article> </div> </div> </div> </section> <section id="faq" 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">FAQ</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> Common questions about Git Common-Flow </p> </div> <!-- FAQ Items --> <div class="space-y-0"> <div class="border-b border-gray-200 dark:border-neutral-800" data-faq-item> <button class="flex justify-between items-center w-full py-6 text-left
|
||||
</ol> </section> </article> </div> </div> </div> </section> <script type="module">const i="clause-highlight";function a(t){t.classList.remove(i),t.offsetWidth,t.classList.add(i),setTimeout(()=>{t.classList.remove(i)},2e3)}function n(){const t=window.location.hash;if(!t||!t.startsWith("#clause-"))return;const s=t.slice(1),e=document.getElementById(s);e&&setTimeout(()=>a(e),100)}function h(){document.addEventListener("click",t=>{const s=t.target.closest('a[href^="#clause-"]');if(!s)return;const e=s.getAttribute("href");if(!e)return;const c=e.slice(1),o=document.getElementById(c);o&&setTimeout(()=>a(o),100)}),window.addEventListener("hashchange",n),window.location.hash?.startsWith("#clause-")&&(document.readyState==="complete"?n():window.addEventListener("load",n))}h();</script> <section id="faq" 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">FAQ</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> Common questions about Git Common-Flow </p> </div> <!-- FAQ Items --> <div class="space-y-0"> <div class="border-b border-gray-200 dark:border-neutral-800" data-faq-item> <button class="flex justify-between items-center w-full py-6 text-left
|
||||
font-display text-lg font-semibold cursor-pointer
|
||||
transition-colors
|
||||
text-gray-950 dark:text-neutral-50
|
||||
|
||||
@@ -47,3 +47,8 @@ const { terminology, terminologyTitle, specification, tocItems } = Astro.props;
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
import { initClauseHighlight } from "../scripts/clauseHighlight";
|
||||
initClauseHighlight();
|
||||
</script>
|
||||
|
||||
75
src/scripts/clauseHighlight.ts
Normal file
75
src/scripts/clauseHighlight.ts
Normal file
@@ -0,0 +1,75 @@
|
||||
/**
|
||||
* Highlights clause elements when navigating to them via anchor links.
|
||||
* Works on both initial page load with hash and when clicking anchor links.
|
||||
*/
|
||||
|
||||
const HIGHLIGHT_DURATION = 2000;
|
||||
const HIGHLIGHT_CLASS = "clause-highlight";
|
||||
|
||||
/**
|
||||
* Highlight a clause element briefly
|
||||
*/
|
||||
function highlightClause(element: Element): void {
|
||||
// Remove any existing highlight
|
||||
element.classList.remove(HIGHLIGHT_CLASS);
|
||||
|
||||
// Force reflow to restart animation if needed
|
||||
void (element as HTMLElement).offsetWidth;
|
||||
|
||||
// Add highlight class
|
||||
element.classList.add(HIGHLIGHT_CLASS);
|
||||
|
||||
// Remove after animation completes
|
||||
setTimeout(() => {
|
||||
element.classList.remove(HIGHLIGHT_CLASS);
|
||||
}, HIGHLIGHT_DURATION);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle hash change and highlight target clause
|
||||
*/
|
||||
function handleHashChange(): void {
|
||||
const hash = window.location.hash;
|
||||
if (!hash || !hash.startsWith("#clause-")) return;
|
||||
|
||||
const targetId = hash.slice(1);
|
||||
const element = document.getElementById(targetId);
|
||||
if (element) {
|
||||
// Small delay to let scroll complete
|
||||
setTimeout(() => highlightClause(element), 100);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize clause highlight behavior
|
||||
*/
|
||||
export function initClauseHighlight(): void {
|
||||
// Handle clicks on clause links
|
||||
document.addEventListener("click", (e) => {
|
||||
const link = (e.target as Element).closest('a[href^="#clause-"]');
|
||||
if (!link) return;
|
||||
|
||||
const href = link.getAttribute("href");
|
||||
if (!href) return;
|
||||
|
||||
const targetId = href.slice(1);
|
||||
const element = document.getElementById(targetId);
|
||||
if (element) {
|
||||
// Small delay to let scroll complete
|
||||
setTimeout(() => highlightClause(element), 100);
|
||||
}
|
||||
});
|
||||
|
||||
// Handle hash changes (back/forward navigation)
|
||||
window.addEventListener("hashchange", handleHashChange);
|
||||
|
||||
// Handle initial page load with hash
|
||||
if (window.location.hash?.startsWith("#clause-")) {
|
||||
// Wait for page to be fully ready
|
||||
if (document.readyState === "complete") {
|
||||
handleHashChange();
|
||||
} else {
|
||||
window.addEventListener("load", handleHashChange);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -212,6 +212,26 @@ html {
|
||||
}
|
||||
|
||||
/* Keyframe animations - defined outside layers for proper cascade */
|
||||
@keyframes clause-highlight-pulse {
|
||||
0% {
|
||||
background-color: theme(colors.sky.500 / 15%);
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes clause-highlight-pulse-dark {
|
||||
0% {
|
||||
background-color: theme(colors.sky.700 / 20%);
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
@@ -422,6 +442,26 @@ html {
|
||||
color: theme(colors.neutral.500);
|
||||
}
|
||||
|
||||
/* Clause highlight effect using ::after pseudo-element */
|
||||
.prose-spec ol>li::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -0.25rem -0.5rem;
|
||||
left: -2.75rem;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.prose-spec ol>li.clause-highlight::after {
|
||||
animation: clause-highlight-pulse 2s ease-out forwards;
|
||||
}
|
||||
|
||||
.dark .prose-spec ol>li.clause-highlight::after {
|
||||
animation: clause-highlight-pulse-dark 2s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Anchor link with clause number - hidden by default, shown on hover */
|
||||
.prose-spec .clause-link {
|
||||
position: absolute;
|
||||
|
||||
Reference in New Issue
Block a user