bars guud

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);
+}

src/components/Bars.tsx

@@ -42,12 +42,8 @@ export function RightBarContent() {
   };
 
   return (
-    <div class="text-text flex h-full flex-col justify-between py-6">
+    <div class="text-text flex h-full flex-col justify-between">
-      <Typewriter keepAlive={false} class="z-50 px-4 pt-4">
+      <Typewriter keepAlive={false} class="z-50 px-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>
@@ -60,7 +56,7 @@ export function RightBarContent() {
               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} />
+                <GitHub height={24} width={24} fill={`var(--color-text)`} />
               </span>
               <span>GitHub</span>
             </a>
@@ -98,10 +94,9 @@ export function RightBarContent() {
             </a>
           </li>
         </ul>
-        </div>
       </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,8 +343,7 @@ export function LeftBar() {
           {/* Navigation Links */}
           <div class="mt-auto">
             <Typewriter keepAlive={false}>
-              <div class="flex flex-col gap-4 py-6">
+              <ul class="flex flex-row gap-4 py-6 md:flex-col">
-                <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>
@@ -358,7 +354,6 @@ export function LeftBar() {
                   <a href="/login">Login</a>
                 </li>
               </ul>
-              </div>
             </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 />

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>

src/components/blog/SessionDependantLike.tsx

@@ -36,19 +36,22 @@ 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);
     }
@@ -56,18 +59,6 @@ export default function SessionDependantLike(props: SessionDependantLikeProps) {
 
   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
       when={props.privilegeLevel !== "anonymous"}
@@ -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="tooltip text-text flex flex-col hover:brightness-125">
-          <div class="mx-auto">
+          <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"}

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}
     >

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 [_leftBarNaturalSize, _setLeftBarNaturalSize] = createSignal(0);
-  const [rightBarSize, setRightBarSize] = 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 (!barsInitialized()) {
+      // Before initialization, capture natural size
+      _setLeftBarNaturalSize(size);
       if (!leftBarSized && size > 0) {
         leftBarSized = true;
-      if (rightBarSized) {
+        checkAndSync();
-        setBarsInitialized(true);
       }
+    } else {
+      // After initialization, just update the natural size for visibility handling
+      _setLeftBarNaturalSize(size);
     }
   };
 
   const wrappedSetRightBarSize = (size: number) => {
-    setRightBarSize(size);
+    if (!barsInitialized()) {
+      // Before initialization, capture natural size
+      _setRightBarNaturalSize(size);
       if (!rightBarSized && size > 0) {
         rightBarSized = true;
-      if (leftBarSized) {
+        checkAndSync();
-        setBarsInitialized(true);
       }
+    } 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);

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}