feat(ui): alternate the red separator hooks down each page

Mirror every other section separator so the raised (upward) end flips
sides as you scroll (-1 1 -1 1 …) while the opposite end stays pinned
low. Odd-of-type bands and page-sections raise the right end instead of
the left, giving the landing page a continuous L R L R rhythm.

Extend the zigzag into the footer via a `mirror` prop on LandingFooter
(`.footer-alt`), set on the blog index and blog posts where one
separator precedes the footer, so no two adjacent dividers raise the
same end on any page.

Author: misonijnik

src/components/astro/LandingFooter.astro

@@ -1,4 +1,13 @@
 ---
+interface Props {
+  /* Mirror the red separator's hooks so the footer continues a page's
+     alternating zigzag. Set true on pages where an even number of separators
+     precede the footer (e.g. the blog index and blog posts). */
+  mirror?: boolean;
+}
+
+const { mirror = false } = Astro.props;
+
 const links = [
   { href: "https://github.com/seqra/opentaint", label: "GitHub", external: true },
   { href: "https://discord.gg/6BXDfbP4p9", label: "Discord", external: true },
@@ -8,7 +17,7 @@ const links = [
 ---
 
 <footer>
-  <div class="footer-links grid grid-cols-2 sm:grid-cols-4">
+  <div class:list={["footer-links grid grid-cols-2 sm:grid-cols-4", mirror && "footer-alt"]}>
     {links.map((link) => (
       <a
         href={link.href}

src/index.css

@@ -273,6 +273,37 @@
     pointer-events: none;
   }
 
+  /* Alternating separators: every other divider mirrors the hooks so the
+     raised (upward) end flips sides down the page (-1 1 -1 1 …), while the
+     other end stays pinned low. The default rule above raises the left end;
+     these odd-of-type sections raise the right end instead. `.footer-alt`
+     opts the footer rule in so it keeps the page's zigzag going — set per
+     page (see LandingFooter `mirror` prop) whenever an even number of
+     separators precedes the footer. */
+  .band:nth-of-type(odd):not(:first-child)::before,
+  .page-section:nth-of-type(odd):not(:first-child)::before,
+  .footer-links.footer-alt::before {
+    /* Rule + left-hand hook curving down. */
+    left: var(--rule-inset);
+    right: calc(var(--rule-inset) + 23px);
+    border-right: none;
+    border-left: 1px solid hsl(var(--brand));
+    border-top-right-radius: 0;
+    border-top-left-radius: 24px;
+  }
+
+  .band:nth-of-type(odd):not(:first-child)::after,
+  .page-section:nth-of-type(odd):not(:first-child)::after,
+  .footer-links.footer-alt::after {
+    /* Right-hand hook curving up, meeting the rule flush. */
+    left: auto;
+    right: var(--rule-inset);
+    border-left: none;
+    border-right: 1px solid hsl(var(--brand));
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 24px;
+  }
+
   .section-title {
     @apply font-mono text-base font-bold tracking-tight text-foreground lg:text-[17px];
   }

src/pages/blog/[slug].astro

@@ -97,7 +97,7 @@ const breadcrumbSchema = {
             <BlogPostView post={post} headings={headings}>
               {Content ? <Content /> : <Fragment set:html={post.body} />}
             </BlogPostView>
-            <LandingFooter />
+            <LandingFooter mirror />
           </div>
 
           {toc.length > 0 && (

src/pages/blog/index.astro

@@ -65,7 +65,7 @@ const breadcrumbSchema = {
           </div>
         </section>
 
-        <LandingFooter />
+        <LandingFooter mirror />
       </div>
     </main>
   </div>