Add mobile layout

src/lib/components/CardButton.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <div class="btn btn-neutral btn-lg h-24 text-left w-full">
-  <div class="flex gap-6 flex-row justify-between items-center w-full {$$props.class}">
+  <div class="flex gap-2 flex-row justify-between items-center w-full {$$props.class}">
     <div class="flex gap-6 items-center">
       <div class="w-12 center">
         <slot name="icon" />

src/lib/components/ModalHeader.svelte

@@ -0,0 +1,4 @@
+<div class="column gap-2 py-4 max-w-xs m-auto">
+  <h1 class="heading"><slot name="title" /></h1>
+  <p class="text-center"><slot name="info" /></p>
+</div>

src/lib/components/Page.svelte

@@ -1,3 +1,3 @@
-<div class="max-h-screen flex-grow overflow-auto bg-base-200 pb-12 sm:pb-0">
+<div class="max-h-screen flex-grow overflow-auto bg-base-200 mb-2 pb-12 sm:mb-0 sm:pb-0">
   <slot />
 </div>

src/lib/components/PageBar.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Icon from '@lib/components/Icon.svelte'
+  import Button from '@lib/components/Button.svelte'
+
+  const back = () => history.back()
+</script>
+
+<div class="relative z-feature mx-2 rounded-xl pt-4">
+  <div
+    class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
+    <div class="flex items-center gap-4">
+      <slot name="icon" />
+      <slot name="title" />
+    </div>
+    <slot name="action" />
+  </div>
+</div>

src/lib/components/PageHeader.svelte

@@ -0,0 +1,5 @@
+<div class="column gap-4 py-12">
+  <h1 class="superheading"><slot name="title" /></h1>
+  <p class="text-center"><slot name="info" /></p>
+</div>
+

src/lib/components/SecondaryNav.svelte

@@ -1,3 +1,3 @@
-<div class="flex max-h-screen w-60 flex-shrink-0 flex-col gap-1 bg-base-300">
+<div class="max-h-screen w-60 flex-shrink-0 flex-col gap-1 bg-base-300 hidden sm:flex">
   <slot />
 </div>