From ba948e4181063b20bab614ae98dc13d19bed103e Mon Sep 17 00:00:00 2001
From: Corwin Perren <caperren@gmail.com>
Date: Tue, 11 Nov 2025 22:53:05 -0800
Subject: [PATCH] Fixed Timeline svg draws making window too wide, adjusted
 navbar to perform responsive transition at a larger screen size, removed more
 obsolete attrs

---
 src/components/Navbar.astro              |  8 ++--
 src/components/NestedNavbarEntries.astro | 12 +++---
 src/components/Timeline/Timeline.astro   | 47 ++++++++++++-----------
 src/components/Timeline/timeline.ts      | 48 ++++++++++++++++++------
 src/layouts/BaseLayout.astro             |  4 +-
 src/styles/global.css                    |  4 --
 6 files changed, 74 insertions(+), 49 deletions(-)

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 7b95b93..335c1b9 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -11,21 +11,21 @@ import {Image} from "astro:assets";
     <div class="flex flex-wrap items-center justify-between mx-auto p-6">
         <a href="/">
             <Image src={logo_title_large}
-                   class="h-10 sm:h-14 w-auto"
+                   class="h-10 lg:h-14 w-auto"
                    alt="logo title"
                    loading="eager"
             />
         </a>
         <button data-collapse-toggle="navbar-multi-level" type="button"
-                class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm md:hidden focus:ring-2 focus:ring-caperren-green"
+                class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm lg:hidden focus:ring-2 focus:ring-caperren-green"
                 aria-controls="navbar-multi-level" aria-expanded="false">
             <span class="sr-only">Open main menu</span>
-            <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+            <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 14">
                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                       d="M1 1h15M1 7h15M1 13h15"/>
             </svg>
         </button>
-        <div class="z-40 hidden w-full md:block md:w-auto" id="navbar-multi-level">
+        <div class="z-40 hidden w-full lg:block lg:w-auto" id="navbar-multi-level">
             <NestedNavbarEntry items={siteLayout}/>
         </div>
     </div>
diff --git a/src/components/NestedNavbarEntries.astro b/src/components/NestedNavbarEntries.astro
index a6d43c9..fd597fd 100644
--- a/src/components/NestedNavbarEntries.astro
+++ b/src/components/NestedNavbarEntries.astro
@@ -12,20 +12,20 @@ const getHrefPath = (entry: navLink): string => {
     return entry.pubpath ? entry.pubpath : ("/" + (paths && paths.length ? [...paths, entry.path].join("/") : entry.path));
 }
 ---
-<ul class={"flex flex-col p-4 bg-black border-caperren-green " + (depth ? "space-y-2" : "md:flex-row md:space-x-8 md:mt-0")}>
+<ul class={"flex flex-col p-4 bg-black border-caperren-green " + (depth ? "space-y-2" : "items-start lg:flex-row lg:space-x-8 lg:mt-0 ")}>
     {
-        items.map((entry, index) => (
+        items.map((entry) => (
             (entry.enabled ?? true) && (
                     <li>
                         {Array.isArray(entry.children) && entry.children.length ? (
                                 <button id={"dropdownNavbarLink" + getNavLinkSuffix(entry)}
                                         data-dropdown-toggle={"dropdownNavbar" + getNavLinkSuffix(entry)}
                                         data-dropdown-placement="bottom"
-                                        class="flex items-center justify-between py-2 px-3 w-full hover:text-caperren-green-light md:hover:bg-transparent md:border-0 md:hover:text-caperren-green-light md:p-0 ">
+                                        class="flex items-center justify-between py-2 px-3 w-full hover:text-caperren-green-light lg:hover:bg-transparent lg:border-0 lg:hover:text-caperren-green-light lg:p-0 ">
                                     {entry.navText}
                                     <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true"
                                          xmlns="http://www.w3.org/2000/svg"
-                                         fill="none" viewBox="0 0 10 6">
+                                         viewBox="0 0 10 6">
                                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                               stroke-width="2"
                                               d="m1 1 4 4 4-4"/>
@@ -33,7 +33,7 @@ const getHrefPath = (entry: navLink): string => {
                                 </button>
 
                                 <div id={"dropdownNavbar" + getNavLinkSuffix(entry)}
-                                     class="z-10 hidden  bg-black border border-caperren-green shadow-sm w-screen md:w-max">
+                                     class="z-10 hidden  bg-black border border-caperren-green shadow-sm w-screen lg:w-max">
                                     <Astro.self items={entry.children} paths={[...paths, entry.path]}
                                                 depth={depth + 1}/>
                                 </div>
@@ -41,7 +41,7 @@ const getHrefPath = (entry: navLink): string => {
                         ) : (
 
                                 <a href={getHrefPath(entry)}
-                                   class="block py-2 px-3 bg-transparent hover:text-caperren-green-light ring-caperren-green-dark md:p-0"
+                                   class="block py-2 px-3 bg-transparent hover:text-caperren-green-light ring-caperren-green-dark lg:p-0"
                                    aria-current="page">{entry.navText}</a>
 
                         )}
diff --git a/src/components/Timeline/Timeline.astro b/src/components/Timeline/Timeline.astro
index 40d5b77..6d1577d 100644
--- a/src/components/Timeline/Timeline.astro
+++ b/src/components/Timeline/Timeline.astro
@@ -5,28 +5,31 @@ const timeline: timelineEntry[] = Astro.props.timeline || [];
 ---
 
 <custom-timeline>
-    <div class="relative z-10 grid gap-6 grid-flow-row sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-6"
-         data-timeline>
-        {timeline.map((entry, index) => (
-                <div class="pt-1 border bg-black border-caperren-green rounded-lg min-w-s max-w-s px-2 pb-2"
-                     data-timeline-node-index={index}
-                >
-                    <h3 class="text-lg font-bold">
-                        {entry.event}
-                    </h3>
-                    <h4 class="font-semibold leading-none">
-                        {entry.eventDetail}
-                    </h4>
-                    <time class="mb-2 mt-1 text-sm italic leading-none">
-                        {entry.date}
-                    </time>
-                    {entry.description && (
-                            <p class="text-sm font-normal">
-                                {entry.description}
-                            </p>
-                    )}
-                </div>
-        ))}
+    <div class="flex flex-col w-full">
+        <div class="z-10 grid gap-6 grid-flow-row max-w-full sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-6"
+             data-timeline>
+            {timeline.map((entry, index) => (
+                    <div class="pt-1 border bg-black border-caperren-green rounded-lg min-w-s max-w-s px-2 pb-2"
+                         data-timeline-node-index={index}
+                    >
+                        <h3 class="text-lg font-bold">
+                            {entry.event}
+                        </h3>
+                        <h4 class="font-semibold leading-none">
+                            {entry.eventDetail}
+                        </h4>
+                        <time class="mb-2 mt-1 text-sm italic leading-none">
+                            {entry.date}
+                        </time>
+                        {entry.description && (
+                                <p class="text-sm font-normal">
+                                    {entry.description}
+                                </p>
+                        )}
+                    </div>
+            ))}
+        </div>
+        <div class="z-0 h-10 w-full max-w-full overflow-x-visible" data-custom-timeline-line-wrapper/>
     </div>
 </custom-timeline>
 
diff --git a/src/components/Timeline/timeline.ts b/src/components/Timeline/timeline.ts
index 57095c9..ec3c272 100644
--- a/src/components/Timeline/timeline.ts
+++ b/src/components/Timeline/timeline.ts
@@ -25,21 +25,47 @@ class CustomTimeline extends HTMLElement {
             }
         }).filter(pair => pair !== undefined)
 
-        let contentBodyScrolling = document.getElementById("content-body-scrolling")
+        let contentBodyScrolling = document.getElementById("content-body-scrolling");
+        let wrapper = this.querySelector("[data-custom-timeline-line-wrapper]") as HTMLElement;
+
+        const position = (line: LeaderLine) => {
+            wrapper.style.transform = "none";
+            let rectWrapper = wrapper.getBoundingClientRect();
+
+            wrapper.style.transform = "translate(-" +
+                (Number(rectWrapper.left)) + "px, -"
+                +
+                (Number(rectWrapper.top)) + "px)"
+
+            console.log(wrapper.style.transform)
+            line.position()
+
+        }
 
         pairs.forEach(pair => {
             let line = new LeaderLine({
-                    start: pair[0],
-                    end: pair[1],
-                    color: '#10ac25',
-                    size: 3,
-                    startSocket: "right",
-                    endSocket: "left",
-                    startPlug: "square",
-                    endPlug: "arrow3"
-                });
-            contentBodyScrolling?.addEventListener("scroll", () => line.position())
+                start: pair[0],
+                end: pair[1],
+                color: '#10ac25',
+                size: 3,
+                startSocket: "right",
+                endSocket: "left",
+                startPlug: "square",
+                endPlug: "arrow3"
+            });
+
+            // Find new element by hidden id and add to wrapper div
+            const newLineEl = document.querySelector(`body .leader-line:has(path#leader-line-${line._id}-line-path)`);
+            if (newLineEl) wrapper.appendChild(newLineEl);
+
+            // Add position updaters for scrolling and resize events
+            contentBodyScrolling?.addEventListener("scroll", () => position(line));
+            window.addEventListener("resize", () => position(line));
+
+            // Perform the initial positioning
+            position(line);
         });
+
     }
 }
 
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index b2187e9..d4b1dad 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -28,8 +28,8 @@ const pageEnabled = pathToMetadata(Astro.url.pathname).enabled ?? true;
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>{pageEnabled ? pageTitle : "Corwin Perren"}</title>
 </head>
-<body class="flex flex-col bg-black text-white h-dvh">
-<div id="content-body-scrolling" class="grow overflow-y-scroll">
+<body class="flex flex-col bg-black text-white h-dvh w-full max-w-full">
+<div id="content-body-scrolling" class="grow overflow-x-hidden overflow-y-scroll">
     <Navbar/>
     <main class="mx-6 my-6">
         {(Astro.props.title && showTitle && pageEnabled) && (
diff --git a/src/styles/global.css b/src/styles/global.css
index 0a04d43..acd1d5a 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -11,7 +11,3 @@
     --color-caperren-green-light: #00ff2a;
     --color-caperren-green-dark: #06370e;
 }
-
-.leader-line {
-    z-index: 0;
-}