Merge branch 'docs-ui-improvements-main' into docs-ui-improvements

www/src/components/footer/footer.astro

@@ -10,7 +10,7 @@ const { path, isBlog } = Astro.props;
 <footer
   class={path === "/"
     ? `mt-auto pb-8 pt-16 text-t3-purple-100 bg-[#131232] flex flex-col`
-    : `mt-auto pb-8 pt-16 text-slate-900 dark:text-t3-purple-100 bg-t3-purple-50 dark:bg-slate-900 flex flex-col`}
+    : `mt-auto pb-8 pt-16 text-slate-900 dark:text-t3-purple-100 bg-t3-purple-50 dark:bg-slate-900 transition-colors flex flex-col`}
 >
   {isBlog && <AvatarList path={path} />}
   <div

www/src/components/navigation/Search.tsx

@@ -51,9 +51,9 @@ const Search: React.FC = () => {
         type="button"
         ref={searchButtonRef}
         onClick={onOpen}
-        className="w-full flex items-center justify-between px-4 py-2 text-sm font-medium text-white dark:text-gray-700 dark:bg-t3-purple-100 bg-white/70 rounded-lg"
+        className="w-full flex items-center justify-between px-4 py-2 text-sm font-medium text-slate-900 dark:text-slate-100 dark:bg-slate-700 bg-t3-purple-200/50 rounded-lg"
       >
-        <div className="flex items-center justify-center text-slate-900 dark:stroke-slate-900">
+        <div className="flex items-center justify-center dark:text-slate-100 stroke-white">
           <svg width="24" height="24" fill="none">
             <path
               d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
@@ -64,10 +64,10 @@ const Search: React.FC = () => {
             />
           </svg>
 
-          <span className="pl-1 lg:pl-3 text-slate-900">Search</span>
+          <span className="pl-1 lg:pl-3 dark:text-slate-100">Search</span>
         </div>
 
-        <span className="border px-1 rounded-md border-slate-900 text-slate-900">
+        <span className="border px-1 rounded-md dark:text-slate-100 border-slate-900 dark:border-slate-100">
           <span className="sr-only">Press </span>
 
           <kbd>/</kbd>

www/src/components/navigation/ThemeToggleButton.tsx

@@ -56,7 +56,7 @@ export default function ThemeToggleButton() {
   }, [theme]);
 
   return (
-    <div className=" flex border border-slate-900 dark:border-slate-200 p-1 w-fit mx-auto rounded-full space-x-3">
+    <div className="flex bg-t3-purple-200/50 dark:bg-slate-700 p-1.5 w-fit mx-auto rounded-full space-x-3">
       {themes.map((t) => {
         const checked = t === theme;
         return (

www/src/components/navigation/moreMenu.astro

@@ -1,6 +1,5 @@
 ---
 import * as CONFIG from "../../config";
-import ThemeToggleButton from "./ThemeToggleButton";
 
 export interface Props {
   editHref: string;
@@ -71,7 +70,4 @@ const { editHref } = Astro.props;
       </a>
     </li>
   </ul>
-  <div class="m-8 text-center">
-    <ThemeToggleButton client:visible />
-  </div>
 </div>

www/src/components/navigation/navbar.astro

@@ -2,6 +2,7 @@
 import clsx from "clsx";
 import Search from "./Search";
 import SidebarToggle from "./SidebarToggle";
+import ThemeToggleButton from "./ThemeToggleButton";
 
 const currentPage = Astro.url.pathname;
 const isLanding = currentPage === "/";
@@ -29,7 +30,7 @@ const navbarLinks: Array<{ href: string; label: string }> = [
 <nav
   class={clsx("flex flex-col relative justify-between items-center pt-6", {
     "z-50 text-slate-50": isLanding,
-    "bg-t3-purple-50 dark:bg-slate-900": !isLanding,
+    "bg-t3-purple-50 dark:bg-slate-900 transition-colors": !isLanding,
   })}
   aria-label="Global"
 >
@@ -59,13 +60,20 @@ const navbarLinks: Array<{ href: string; label: string }> = [
         }
       </div>
     </div>
-    <div>
-      <SidebarToggle currentPage={currentPage} client:idle />
-    </div>
-    <div
-      class="hidden md:block shadow-sm dark:shadow-md shadow-slate-500 dark:shadow-slate-500/10 rounded-lg w-full max-w-xs"
-    >
-      <Search client:load />
+    <div class="flex flex-grow justify-end items-center">
+      {
+        !isLanding && (
+          <div class="m-8 text-center">
+            <ThemeToggleButton client:visible />
+          </div>
+        )
+      }
+      <div>
+        <SidebarToggle currentPage={currentPage} client:idle />
+      </div>
+      <div class="hidden md:block rounded-lg w-full max-w-xs">
+        <Search client:load />
+      </div>
     </div>
   </div>
 </nav>

www/src/layouts/blog.astro

@@ -38,11 +38,11 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
   <body class="w-full">
     <Navbar />
     <main
-      class="bg-t3-purple-50 dark:bg-slate-900 w-full justify-items-start place-content-start items-start grid grid-cols-1 sm:grid-cols-6 md:grid-cols-12 h-full relative"
+      class="bg-t3-purple-50 dark:bg-slate-900 w-full justify-items-start place-content-start items-start grid grid-cols-1 sm:grid-cols-6 md:grid-cols-12 h-full relative transition-colors"
     >
       <aside
         id="grid-left"
-        class="hidden sticky h-[100vh] bottom-0 top-8 z-10 bg-t3-purple-50 bg-blend-lighten dark:bg-slate-900 sm:w-screen md:w-full md:flex md:col-span-3 md:col-start-1 w-full"
+        class="hidden sticky h-[100vh] bottom-0 top-8 z-10 bg-t3-purple-50 bg-blend-lighten dark:bg-slate-900 sm:w-screen md:w-full md:flex md:col-span-3 md:col-start-1 w-full transition-colors"
         title="Site Navigation"
       >
         <LeftSidebar currentPage={currentPage} />

www/src/styles/global.css

@@ -86,6 +86,18 @@
     @apply font-mono my-3 p-2 rounded-md sm:pt-2 pl-3 mx-auto;
   }
 
+  .markdown ol {
+    @apply w-full;
+  }
+
+  .markdown details {
+    @apply w-full bg-t3-purple-200/50 dark:bg-slate-700 px-3 pb-0.5 rounded-md;
+  }
+
+  .markdown summary {
+    @apply py-3;
+  }
+
   .markdown p > img {
     @apply text-sm mt-8;
   }