✨ Design improvements.

src/components/svgCard.svelte

@@ -57,7 +57,7 @@
       on:click={() => {
         copyToClipboard(svgInfo.route);
       }}
-      class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-300 dark:hover:bg-neutral-700/40"
+      class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
     >
       <Copy size={17} />
     </button>
@@ -66,7 +66,7 @@
       on:click={() => {
         downloadSvg(svgInfo.route);
       }}
-      class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-300 dark:hover:bg-neutral-700/40"
+      class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
     >
       <DownloadSimple size={17} />
     </button>
@@ -74,7 +74,7 @@
       href={svgInfo.url}
       title="Website"
       target="_blank"
-      class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-300 dark:hover:bg-neutral-700/40"
+      class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
     >
       <ArrowUpRight size={17} />
     </a>

src/components/theme.svelte

@@ -53,7 +53,11 @@
   </script>
 </svelte:head>
 
-<button on:click={toggle} class="focus:outline-none" class:hidden>
+<button
+  on:click={toggle}
+  class="duration-100 hover:-translate-y-0.5 focus:outline-none"
+  aria-label="Toggle dark mode"
+>
   <!-- moon icon -->
   {#if dark}
     <Sun size={18} />

src/routes/+layout.svelte

@@ -47,6 +47,12 @@
       <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"
       >
+        <a
+          href="/"
+          class={`flex w-full items-center rounded-md p-2 transition-none duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40
+              ${data.pathname === `/` ? 'bg-neutral-200 dark:bg-neutral-700/30' : ''}`}
+          data-sveltekit-preload-data>All</a
+        >
         {#each categories as category}
           <a
             href={`/directory/${category.toLowerCase()}`}
@@ -98,7 +104,7 @@
       <Container>
         <a href="/">
           <div
-            class="flex items-center space-x-2 duration-100 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"
           >
             <ArrowLeft size={20} />
             <span>Back to home</span>