From 84bcd554e5853852c8898d1648afa11d87f1eadd Mon Sep 17 00:00:00 2001
From: Michael Freno <michaelt.freno@gmail.com>
Date: Thu, 18 Dec 2025 22:55:03 -0500
Subject: [PATCH] bars guud

---
 src/app.css                                  |  40 ++++-
 src/components/Bars.tsx                      | 146 +++++++++----------
 src/components/blog/PostBodyClient.tsx       |   2 +-
 src/components/blog/SessionDependantLike.tsx |  33 ++---
 src/components/icons/CommentIcon.tsx         |   2 +-
 src/context/bars.tsx                         |  61 ++++++--
 src/routes/blog/[title]/index.tsx            |   4 +-
 7 files changed, 173 insertions(+), 115 deletions(-)

diff --git a/src/app.css b/src/app.css
index 7d5e682..c823456 100644
--- a/src/app.css
+++ b/src/app.css
@@ -449,7 +449,7 @@ input[type="checkbox"]:checked::before {
   visibility: hidden;
   min-width: fit-content;
   background-color: var(--color-mantle);
-  color: #fff;
+  color: var(--color-text);
   text-align: center;
   padding: 5px 0;
   border-radius: 6px;
@@ -548,3 +548,41 @@ input[type="checkbox"]:checked::before {
 .shaker:hover {
   animation: shaker 0.5s ease;
 }
+
+.prose {
+  --tw-prose-body: var(--color-text);
+  --tw-prose-headings: var(--color-text);
+  --tw-prose-lead: var(--color-text);
+  --tw-prose-links: var(--color-blue);
+  --tw-prose-bold: var(--color-text);
+  --tw-prose-counters: var(--color-subtext1);
+  --tw-prose-bullets: var(--color-subtext1);
+  --tw-prose-hr: var(--color-surface2);
+  --tw-prose-quotes: var(--color-text);
+  --tw-prose-quote-borders: var(--color-surface2);
+  --tw-prose-captions: var(--color-subtext1);
+  --tw-prose-code: var(--color-text);
+  --tw-prose-pre-code: var(--color-text);
+  --tw-prose-pre-bg: var(--color-surface0);
+  --tw-prose-th-borders: var(--color-surface2);
+  --tw-prose-td-borders: var(--color-surface1);
+}
+
+.prose-invert {
+  --tw-prose-body: var(--color-text);
+  --tw-prose-headings: var(--color-text);
+  --tw-prose-lead: var(--color-text);
+  --tw-prose-links: var(--color-blue);
+  --tw-prose-bold: var(--color-text);
+  --tw-prose-counters: var(--color-subtext1);
+  --tw-prose-bullets: var(--color-subtext1);
+  --tw-prose-hr: var(--color-surface2);
+  --tw-prose-quotes: var(--color-text);
+  --tw-prose-quote-borders: var(--color-surface2);
+  --tw-prose-captions: var(--color-subtext1);
+  --tw-prose-code: var(--color-text);
+  --tw-prose-pre-code: var(--color-text);
+  --tw-prose-pre-bg: var(--color-surface0);
+  --tw-prose-th-borders: var(--color-surface2);
+  --tw-prose-td-borders: var(--color-surface1);
+}
diff --git a/src/components/Bars.tsx b/src/components/Bars.tsx
index 48deef8..8038e4f 100644
--- a/src/components/Bars.tsx
+++ b/src/components/Bars.tsx
@@ -42,66 +42,61 @@ export function RightBarContent() {
   };
 
   return (
-    <div class="text-text flex h-full flex-col justify-between py-6">
-      <Typewriter keepAlive={false} class="z-50 px-4 pt-4">
-        <div class="flex flex-col gap-6">
-          <h3 class="text-subtext0 rule-around text-lg font-semibold">
-            Connect
-          </h3>
-          <ul class="flex flex-col gap-4">
-            <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
-              <a href="/contact">Contact Me</a>
-            </li>
-            <li>
-              <a
-                href="https://github.com/MikeFreno/"
-                target="_blank"
-                rel="noreferrer"
-                class="hover:text-subtext0 flex items-center gap-3 transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105"
-              >
-                <span class="shaker rounded-full p-2">
-                  <GitHub height={24} width={24} fill={undefined} />
-                </span>
-                <span>GitHub</span>
-              </a>
-            </li>
-            <li>
-              <a
-                href="https://www.linkedin.com/in/michael-freno-176001256/"
-                target="_blank"
-                rel="noreferrer"
-                class="hover:text-subtext0 flex items-center gap-3 transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105"
-              >
-                <span class="shaker rounded-full p-2">
-                  <LinkedIn height={24} width={24} fill={undefined} />
-                </span>
-                <span>LinkedIn</span>
-              </a>
-            </li>
-            <li>
-              <a
-                href="/resume"
-                class="hover:text-subtext0 flex items-center gap-3 transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105"
-              >
-                <span class="shaker rounded-full p-2">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    height={24}
-                    width={24}
-                    viewBox="0 0 384 512"
-                    class="fill-text"
-                  >
-                    <path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM112 256H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16z" />
-                  </svg>
-                </span>
-                <span>Resume</span>
-              </a>
-            </li>
-          </ul>
-        </div>
+    <div class="text-text flex h-full flex-col justify-between">
+      <Typewriter keepAlive={false} class="z-50 px-4">
+        <ul class="flex flex-col gap-4">
+          <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
+            <a href="/contact">Contact Me</a>
+          </li>
+          <li>
+            <a
+              href="https://github.com/MikeFreno/"
+              target="_blank"
+              rel="noreferrer"
+              class="hover:text-subtext0 flex items-center gap-3 transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105"
+            >
+              <span class="shaker rounded-full p-2">
+                <GitHub height={24} width={24} fill={`var(--color-text)`} />
+              </span>
+              <span>GitHub</span>
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://www.linkedin.com/in/michael-freno-176001256/"
+              target="_blank"
+              rel="noreferrer"
+              class="hover:text-subtext0 flex items-center gap-3 transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105"
+            >
+              <span class="shaker rounded-full p-2">
+                <LinkedIn height={24} width={24} fill={undefined} />
+              </span>
+              <span>LinkedIn</span>
+            </a>
+          </li>
+          <li>
+            <a
+              href="/resume"
+              class="hover:text-subtext0 flex items-center gap-3 transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105"
+            >
+              <span class="shaker rounded-full p-2">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  height={24}
+                  width={24}
+                  viewBox="0 0 384 512"
+                  class="fill-text"
+                >
+                  <path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM112 256H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16z" />
+                </svg>
+              </span>
+              <span>Resume</span>
+            </a>
+          </li>
+        </ul>
       </Typewriter>
       {/* Dark Mode Toggle */}
-      <div class="border-overlay0 border-t px-4 pt-6">
+      <div class="border-overlay0 border-t p-4">
         <button
           onClick={toggleDarkMode}
           class="hover:bg-surface0 flex w-full items-center gap-3 rounded-lg p-3 transition-all duration-200 ease-in-out hover:scale-105"
@@ -128,7 +123,8 @@ export function RightBarContent() {
 }
 
 export function LeftBar() {
-  const { setLeftBarSize, leftBarVisible, setLeftBarVisible } = useBars();
+  const { setLeftBarSize, leftBarSize, leftBarVisible, setLeftBarVisible } =
+    useBars();
   let ref: HTMLDivElement | undefined;
   let actualWidth = 0;
   let touchStartX = 0;
@@ -268,7 +264,8 @@ export function LeftBar() {
       style={{
         "transition-timing-function": leftBarVisible()
           ? "cubic-bezier(0.34, 1.56, 0.64, 1)" // Bounce out when revealing
-          : "cubic-bezier(0.4, 0, 0.2, 1)" // Smooth when hiding
+          : "cubic-bezier(0.4, 0, 0.2, 1)", // Smooth when hiding
+        "min-width": leftBarSize() > 0 ? `${leftBarSize()}px` : undefined
       }}
     >
       {/* Hamburger menu button - positioned at right edge of navbar */}
@@ -346,19 +343,17 @@ export function LeftBar() {
           {/* Navigation Links */}
           <div class="mt-auto">
             <Typewriter keepAlive={false}>
-              <div class="flex flex-col gap-4 py-6">
-                <ul class="gap-4">
-                  <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
-                    <a href="/">Home</a>
-                  </li>
-                  <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
-                    <a href="/blog">Blog</a>
-                  </li>
-                  <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
-                    <a href="/login">Login</a>
-                  </li>
-                </ul>
-              </div>
+              <ul class="flex flex-row gap-4 py-6 md:flex-col">
+                <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
+                  <a href="/">Home</a>
+                </li>
+                <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
+                  <a href="/blog">Blog</a>
+                </li>
+                <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
+                  <a href="/login">Login</a>
+                </li>
+              </ul>
             </Typewriter>
 
             {/* RightBar content on mobile */}
@@ -373,7 +368,7 @@ export function LeftBar() {
 }
 
 export function RightBar() {
-  const { setRightBarSize, rightBarVisible } = useBars();
+  const { setRightBarSize, rightBarSize, rightBarVisible } = useBars();
   let ref: HTMLDivElement | undefined;
   let actualWidth = 0;
 
@@ -415,7 +410,8 @@ export function RightBar() {
       style={{
         "transition-timing-function": rightBarVisible()
           ? "cubic-bezier(0.34, 1.56, 0.64, 1)"
-          : "cubic-bezier(0.4, 0, 0.2, 1)"
+          : "cubic-bezier(0.4, 0, 0.2, 1)",
+        "min-width": rightBarSize() > 0 ? `${rightBarSize()}px` : undefined
       }}
     >
       <RightBarContent />
diff --git a/src/components/blog/PostBodyClient.tsx b/src/components/blog/PostBodyClient.tsx
index 633e31a..4aab076 100644
--- a/src/components/blog/PostBodyClient.tsx
+++ b/src/components/blog/PostBodyClient.tsx
@@ -118,7 +118,7 @@ export default function PostBodyClient(props: PostBodyClientProps) {
     <div class="mx-auto max-w-4xl px-4 pt-32 md:pt-40">
       <div
         ref={contentRef}
-        class="prose dark:prose-invert max-w-none"
+        class="text-text prose dark:prose-invert max-w-none"
         innerHTML={props.body}
       />
     </div>
diff --git a/src/components/blog/SessionDependantLike.tsx b/src/components/blog/SessionDependantLike.tsx
index 11f08be..64ba865 100644
--- a/src/components/blog/SessionDependantLike.tsx
+++ b/src/components/blog/SessionDependantLike.tsx
@@ -36,37 +36,28 @@ export default function SessionDependantLike(props: SessionDependantLikeProps) {
       if (initialHasLiked) {
         const result = await api.database.removePostLike.mutate({
           user_id: props.currentUserID,
-          post_id: props.projectID.toString(),
+          post_id: props.projectID.toString()
         });
         setLikes(result.newLikes as PostLike[]);
       } else {
         const result = await api.database.addPostLike.mutate({
           user_id: props.currentUserID,
-          post_id: props.projectID.toString(),
+          post_id: props.projectID.toString()
         });
         setLikes(result.newLikes as PostLike[]);
       }
       setInstantOffset(0);
     } catch (error) {
-      console.error("There has been a problem with your like operation:", error);
+      console.error(
+        "There has been a problem with your like operation:",
+        error
+      );
       setHasLiked(initialHasLiked);
       setInstantOffset(0);
     }
   };
 
   const likeCount = () => likes().length + instantOffset();
-  
-  const getLikeIconColor = () => {
-    if (hasLiked()) {
-      return "fill-orange-400";
-    }
-    
-    if (hovering()) {
-      return "fill-orange-400 dark:fill-orange-500";
-    }
-    
-    return "fill-black dark:fill-white";
-  };
 
   return (
     <Show
@@ -76,12 +67,12 @@ export default function SessionDependantLike(props: SessionDependantLikeProps) {
           <div class="mx-auto">
             <LikeIcon
               strokeWidth={1}
-              color="fill-black dark:fill-white"
+              color="fill-text"
               height={32}
               width={32}
             />
           </div>
-          <div class="my-auto pl-2 pt-0.5 text-sm text-black dark:text-white">
+          <div class="my-auto pt-0.5 pl-2 text-sm text-black dark:text-white">
             {likes().length} {likes().length === 1 ? "Like" : "Likes"}
           </div>
           <div class="tooltip-text -ml-12 w-12">Must be logged in</div>
@@ -93,18 +84,18 @@ export default function SessionDependantLike(props: SessionDependantLikeProps) {
         onMouseOver={() => setHovering(true)}
         onMouseLeave={() => setHovering(false)}
       >
-        <div class="hover:text-orange-400 tooltip flex flex-col text-black dark:text-white">
-          <div class="mx-auto">
+        <div class="tooltip text-text flex flex-col hover:brightness-125">
+          <div class="mx-auto hover:brightness-125">
             <LikeIcon
               strokeWidth={1}
-              color={getLikeIconColor()}
+              color={`fill-blue`}
               height={32}
               width={32}
             />
           </div>
           <div
             class={`${
-              hasLiked() ? "text-orange-400" : ""
+              hasLiked() ? "text-blue" : ""
             } mx-auto flex pl-2 transition-colors duration-200 ease-in`}
           >
             {likeCount()} {likeCount() === 1 ? "Like" : "Likes"}
diff --git a/src/components/icons/CommentIcon.tsx b/src/components/icons/CommentIcon.tsx
index 4c09012..3a0f18a 100644
--- a/src/components/icons/CommentIcon.tsx
+++ b/src/components/icons/CommentIcon.tsx
@@ -9,7 +9,7 @@ export default function CommentIcon(props: {
       fill="none"
       viewBox="0 0 24 24"
       strokeWidth={props.strokeWidth}
-      class="fill-black dark:fill-white"
+      class="hover:fill-blue fill-text"
       height={props.height}
       width={props.width}
     >
diff --git a/src/context/bars.tsx b/src/context/bars.tsx
index f598cd1..7146dcb 100644
--- a/src/context/bars.tsx
+++ b/src/context/bars.tsx
@@ -1,4 +1,4 @@
-import { Accessor, createContext, useContext } from "solid-js";
+import { Accessor, createContext, useContext, createMemo } from "solid-js";
 import { createSignal } from "solid-js";
 import { hapticFeedback } from "~/lib/client-utils";
 
@@ -38,37 +38,70 @@ export function useBars() {
 }
 
 export function BarsProvider(props: { children: any }) {
-  const [leftBarSize, setLeftBarSize] = createSignal(0);
-  const [rightBarSize, setRightBarSize] = createSignal(0);
+  const [_leftBarNaturalSize, _setLeftBarNaturalSize] = createSignal(0);
+  const [_rightBarNaturalSize, _setRightBarNaturalSize] = createSignal(0);
+  const [syncedBarSize, setSyncedBarSize] = createSignal(0);
   const [centerWidth, setCenterWidth] = createSignal(0);
   const [leftBarVisible, _setLeftBarVisible] = createSignal(true);
   const [rightBarVisible, _setRightBarVisible] = createSignal(true);
   const [barsInitialized, setBarsInitialized] = createSignal(false);
 
-  // Track when both bars have been sized at least once
   let leftBarSized = false;
   let rightBarSized = false;
 
   const wrappedSetLeftBarSize = (size: number) => {
-    setLeftBarSize(size);
-    if (!leftBarSized && size > 0) {
-      leftBarSized = true;
-      if (rightBarSized) {
-        setBarsInitialized(true);
+    if (!barsInitialized()) {
+      // Before initialization, capture natural size
+      _setLeftBarNaturalSize(size);
+      if (!leftBarSized && size > 0) {
+        leftBarSized = true;
+        checkAndSync();
       }
+    } else {
+      // After initialization, just update the natural size for visibility handling
+      _setLeftBarNaturalSize(size);
     }
   };
 
   const wrappedSetRightBarSize = (size: number) => {
-    setRightBarSize(size);
-    if (!rightBarSized && size > 0) {
-      rightBarSized = true;
-      if (leftBarSized) {
-        setBarsInitialized(true);
+    if (!barsInitialized()) {
+      // Before initialization, capture natural size
+      _setRightBarNaturalSize(size);
+      if (!rightBarSized && size > 0) {
+        rightBarSized = true;
+        checkAndSync();
       }
+    } else {
+      // After initialization, just update the natural size for visibility handling
+      _setRightBarNaturalSize(size);
     }
   };
 
+  const checkAndSync = () => {
+    const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
+    const bothBarsReady = leftBarSized && (isMobile || rightBarSized);
+
+    if (bothBarsReady) {
+      const maxWidth = Math.max(_leftBarNaturalSize(), _rightBarNaturalSize());
+      setSyncedBarSize(maxWidth);
+      setBarsInitialized(true);
+    }
+  };
+
+  const leftBarSize = createMemo(() => {
+    // Return 0 if hidden (natural size is 0), otherwise return synced size when initialized
+    const naturalSize = _leftBarNaturalSize();
+    if (naturalSize === 0) return 0; // Hidden
+    return barsInitialized() ? syncedBarSize() : naturalSize;
+  });
+
+  const rightBarSize = createMemo(() => {
+    // Return 0 if hidden (natural size is 0), otherwise return synced size when initialized
+    const naturalSize = _rightBarNaturalSize();
+    if (naturalSize === 0) return 0; // Hidden
+    return barsInitialized() ? syncedBarSize() : naturalSize;
+  });
+
   // Wrap visibility setters with haptic feedback
   const setLeftBarVisible = (visible: boolean) => {
     hapticFeedback(50);
diff --git a/src/routes/blog/[title]/index.tsx b/src/routes/blog/[title]/index.tsx
index 17895ea..fc26362 100644
--- a/src/routes/blog/[title]/index.tsx
+++ b/src/routes/blog/[title]/index.tsx
@@ -179,7 +179,7 @@ export default function PostPage() {
                           />
                         </div>
                         <div
-                          class="text-shadow absolute top-1/3 z-10 my-auto px-4 text-center tracking-widest text-white brightness-150 select-text"
+                          class="text-shadow text-text absolute top-1/3 z-10 my-auto px-4 text-center tracking-widest brightness-150 select-text"
                           style={{
                             "pointer-events": "none",
                             width: `${centerWidth()}px`,
@@ -223,7 +223,7 @@ export default function PostPage() {
                           <div class="flex flex-row justify-center pt-4 md:pt-0 md:pr-8">
                             <a href="#comments" class="mx-2">
                               <div class="tooltip flex flex-col">
-                                <div class="mx-auto">
+                                <div class="mx-auto hover:brightness-125">
                                   <CommentIcon
                                     strokeWidth={1}
                                     height={32}