wip: fix flicering and styling of hero section

src/components/Hero.astro

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

src/styles/global.css

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

src/utils/parseSpecContent.ts

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