💄 Design improvements, update layout content.

src/routes/+layout.svelte

@@ -13,7 +13,6 @@
 
   // Icons:
   import Heart from 'phosphor-svelte/lib/Heart';
-  import ArrowLeft from 'phosphor-svelte/lib/ArrowLeft';
   import { ArrowUpRight } from 'lucide-svelte';
 
   // Toaster:
@@ -21,7 +20,6 @@
 
   // Components for all pages:
   import Transition from '@/components/transition.svelte';
-  import Container from '@/components/container.svelte';
 
   // Layout:
   import Navbar from '@/components/navbar.svelte';
@@ -79,19 +77,7 @@
       </a>
     </div>
   </aside>
-  <div class="py-2 md:ml-56 md:py-2">
+  <div class="md:ml-56 pb-6">
-    {#if data.pathname !== '/' && data.pathname !== 'directory'}
-      <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"
-          >
-            <ArrowLeft size={20} />
-            <span>View all</span>
-          </div>
-        </a>
-      </Container>
-    {/if}
     <Transition pathname={data.pathname}>
       <slot />
     </Transition>

src/routes/+page.svelte

@@ -11,6 +11,7 @@
   import SvgCard from '@/components/svgCard.svelte';
   import Grid from '@/components/grid.svelte';
   import NotFound from '@/components/notFound.svelte';
+  import { cn } from '@/utils/cn';
 
   // Search:
   let searchTerm = '';
@@ -39,13 +40,14 @@
   <title>A beautiful library with SVG logos - Svgl</title>
 </svelte:head>
 
+<Search
+  bind:searchTerm
+  on:input={searchSvgs}
+  clearSearch={() => clearSearch()}
+  placeholder={`Search ${filteredSvgs.length} logos...`}
+/>
+
 <Container>
-  <Search
-    bind:searchTerm
-    on:input={searchSvgs}
-    clearSearch={() => clearSearch()}
-    placeholder={`Search ${filteredSvgs.length} logos...`}
-  />
   <Grid>
     {#each filteredSvgs as svg}
       <SvgCard svgInfo={svg} />

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

@@ -0,0 +1,16 @@
+<script>
+  import Container from '@/components/container.svelte';
+  import { ArrowLeft } from 'lucide-svelte';
+</script>
+
+<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"
+    >
+      <ArrowLeft size={20} />
+      <span>View all</span>
+    </div>
+  </a>
+</Container>
+<slot />