✨ Design improvements for light/dark mode theme.

src/routes/+layout.svelte

@@ -37,9 +37,9 @@
       'border-r border-neutral-200 dark:border-neutral-800'
     )}
   >
-    <div class="px-6 py-6">
-      <div
-        class="flex items-center space-x-1 overflow-y-auto border-b border-neutral-300 pb-3 dark:border-neutral-700/40 md:mb-3 md:flex-col md:space-x-0 md:space-y-1 md:overflow-y-visible"
+    <div class="md:px-6 md:py-6">
+      <nav
+        class="flex items-center space-x-1 overflow-y-auto border-b border-neutral-300 dark:border-neutral-700/40 md:mb-3 md:flex-col md:space-x-0 md:space-y-1 md:overflow-y-visible px-5 md:px-0 pb-2 pt-3 md:pt-0"
       >
         <a
           href="/"
@@ -64,7 +64,7 @@
             <span>{category}</span>
           </a>
         {/each}
-      </div>
+      </nav>
       <div></div>
       <a
         href="https://twitter.com/pheralb_"
@@ -82,7 +82,7 @@
       </a>
     </div>
   </aside>
-  <div class="md:ml-56 pb-6">
+  <div class="ml-0 md:ml-56 pb-6">
     <Transition pathname={data.pathname}>
       <slot />
     </Transition>

src/routes/api/+page.svelte

@@ -25,7 +25,7 @@
           class="absolute inset-[-1000%] animate-[spin_4s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#f4f4f5_0%,#f4f4f5_50%,#737373_100%)] dark:bg-[conic-gradient(from_90deg_at_50%_50%,#121212_0%,#121212_50%,#737373_100%)]"
         />
         <div
-          class="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-neutral-100 dark:bg-neutral-900 px-3 py-1 text-xs font-medium dark:text-white backdrop-blur-3xl border border-neutral-100 dark:border-neutral-800 font-mono"
+          class="inline-flex h-full w-full cursor-default items-center justify-center rounded-full bg-neutral-100 dark:bg-neutral-900 px-3 py-1 text-xs font-medium dark:text-white backdrop-blur-3xl border border-neutral-100 dark:border-neutral-800 font-mono"
         >
           beta
         </div>

src/routes/directory/[slug]/+layout.svelte

@@ -6,9 +6,9 @@
 <Container>
   <a href="/">
     <div
-      class="flex items-center space-x-2 duration-100 hover:text-neutral-500 dark:text-neutral-400 dark:hover:text-white"
+      class="flex items-center space-x-2 duration-100 hover:text-neutral-500 dark:text-neutral-400 dark:hover:text-white group md:mt-2"
     >
-      <ArrowLeft size={20} />
+      <ArrowLeft size={20} class="group-hover:-translate-x-[2px] group-hover:duration-200" />
       <span>View all</span>
     </div>
   </a>