Better hamburger menu.

src/lib/header/NavBar.svelte

@@ -1,5 +1,6 @@
 <script>
   import { page } from '$app/stores';
+  import { fade } from 'svelte/transition'
 
   let dropdownVisible = false
 </script>
@@ -29,7 +30,8 @@
 <nav class="mobile">
     <button style="font-size: 3rem;" on:click={() => dropdownVisible = !dropdownVisible}>{dropdownVisible ? 'x' : '≡'}</button>
     {#if dropdownVisible}
-        <ul class="mobile">
+        <!-- TODO: Click-away layer -->
+        <ul class="mobile" transition:fade={{duration: 300}}>
             <li class:active={$page.url.pathname === '/'}>
                 <a sveltekit:prefetch href="/">Topic Search</a>
             </li>
@@ -83,14 +85,14 @@
     ul.mobile {
         flex-direction: column;
         position: absolute;
-        padding: 128px 0 0;
+        padding: 256px 0 1em;
         margin: 0;
-        height: 3em;
+        width: 50vw;
         display: flex;
         justify-content: center;
         align-items: center;
         list-style: none;
-        background: var(--background);
+        background-color: rgba(255, 255, 255);
         background-size: contain;
     }
 
@@ -125,6 +127,16 @@
       transition: color 0.2s linear;
     }
 
+    @media (max-width: 719px) {
+        nav a {
+            font-size: 1rem;
+            line-height: 200%;
+        }
+        li {
+            margin-top: 1em;
+        }
+    }
+
     a:hover {
       color: var(--accent-color);
     }
@@ -138,5 +150,8 @@
         border-radius: 0;
         border-style: none;
     }
+    button:hover {
+        background-color: white;
+    }
 
 </style>