Did a lot of screwing around with the layout, actually starting to look decent now

src/lib/components/utility/footer.svelte

@@ -1,12 +0,0 @@
-<footer class="sticky bottom-0 flex flex-col-reverse">
-    <slot name="content" />
-</footer>
-
-<style>
-    footer {
-        padding-top: 16px;
-        padding-bottom: 16px;
-        font-size: 20px;
-        line-height: 28px;
-    }
-</style>

src/lib/components/utility/navbar.svelte

@@ -1,37 +1,25 @@
 <script>
     import IconButton from './iconButton.svelte'
+    import SearchBar from './searchBar.svelte'
     import { goto } from '$app/navigation'
     import { page } from '$app/stores'
 </script>
 
-<nav class="sticky top-0 z-10 grid grid-cols-[1fr_auto_1fr] items-center duration-300">
-    <section class="flex h-full">
-        <IconButton on:click={() => goto('/settings')}>
-            <i slot="icon" class="fa-solid fa-user-gear" />
+<nav class="sticky top-0 z-10 flex items-center justify-between p-3 text-base duration-300" style="height: 4rem;">
+    <SearchBar />
+    <!-- <section class="flex h-14">
+        <IconButton halo={false} on:click={() => goto('/settings')}>
+            <i slot="icon" class="fa-solid fa-user" />
         </IconButton>
         {#if $page.url.pathname !== '/'}
-            <IconButton on:click={() => history.back()}>
+            <IconButton halo={false} on:click={() => history.back()}>
                 <i slot="icon" class="fa-solid fa-arrow-left" />
             </IconButton>
+            <IconButton halo={false}>
+                <i slot="icon" class="fa-solid fa-magnifying-glass" />
+            </IconButton>
         {/if}
-    </section>
-    <section class="flex h-full justify-center">
-        <slot name="center-content" />
-    </section>
-    <section class="flex h-full justify-end">
-        <IconButton>
-            <i slot="icon" class="fa-solid fa-magnifying-glass" />
-        </IconButton>
-    </section>
+    </section> -->
 </nav>
 
-<style>
-    nav {
-        padding: 18px 2rem;
-        font-size: 20px;
-        line-height: 28px;
-    }
-    section {
-        gap: 24px;
-    }
-</style>
+<!-- New Idea: We're going to do a search button, but it will toggle a floating search bar that flys in from the top and autofocuses -->

src/lib/components/utility/searchBar.svelte

@@ -24,7 +24,7 @@
 <search
     role="search"
     bind:this={searchBar}
-    class="relative my-2.5 flex w-full items-center gap-2.5 justify-self-center rounded-full border-2 border-transparent px-4 py-1.5"
+    class="relative flex h-full w-full max-w-xl items-center gap-2.5 justify-self-center rounded-full border-2 border-transparent px-4 py-1.5"
     on:focusout={() => {
         setTimeout(() => {
             // This is a completely stupid thing you have to do, if there is not timeout, the active element will be the body of the document and not the newly focused element