last ui changes

Author: cupcakearmy

src/lib/components/Clock.svelte

@@ -27,6 +27,6 @@
   }
 </script>
 
-<Click class="mono" on:click={change}>
+<Click class="mono-md" on:click={change}>
   {value}
 </Click>

src/lib/components/EventPreview.svelte

@@ -11,7 +11,7 @@
 
 <a href={`/events/${event.slug}`}>
   <div class="wrapper py-8 flex justify-center items-end">
-    <div class="details mono">
+    <div class="details mono-md">
       <div><Icon inline name="date" /> {$formatDate(event.date)}</div>
       <div><Icon inline name="location" /> {event.location}</div>
       <div><Icon inline name="type" /> {$_(`events.types.${event.type}`)}</div>

src/lib/components/EventUpcoming.svelte

@@ -11,7 +11,7 @@
 
 <a href={`/events/${event.slug}`}>
   <div class="wrapper flex flex-col justify-center items-center p-4">
-    <div class="mono mb-6">
+    <div class="mono-md mb-6">
       <div><Icon inline name="date" /> {$formatDate(event.date)}</div>
       <div><Icon inline name="location" /> {event.location}</div>
       <div><Icon inline name="type" /> {$_(`events.types.${event.type}`)}</div>

src/lib/components/LastUpdatedFooter.svelte

@@ -6,6 +6,6 @@
 
 <div class="mt-8" />
 <hr />
-<p class="mono text-sm text-center">
+<p class="mono-md text-sm text-center">
   Updated: {$formatDate(date)}
 </p>

src/lib/components/Nav.svelte

@@ -78,7 +78,7 @@
               delay: animation.menu + combined.length * animation.linkDelay,
             }}
           >
-            <Click class="mono text-base sm:hidden">→ close me ←</Click>
+            <Click class="mono-md sm:hidden">→ close me ←</Click>
           </li>
         </ul>
       {/if}

src/lib/components/RichContent.svelte

@@ -20,4 +20,8 @@
   section :global(a:hover) {
     border-width: 0.25rem;
   }
+
+  section :global(p) {
+    margin: 1rem auto;
+  }
 </style>

src/lib/components/members/Login.svelte

@@ -15,15 +15,15 @@
   }
 </script>
 
-{#if submitted}
-  <p>You got mail from us 💌</p>
-{:else}
-  <div>Enter your e-mail to login.</div>
-  <form class="flex flex-col gap-3" on:submit|preventDefault={submit}>
-    <TextInput type="email" label="E-Mail" bind:value={email} />
-    <Button type="submit" label="Login" />
-  </form>
-  <p class="mt-4">
-    or <a href="/join">join here</a>.
-  </p>
-{/if}
+<div class="flex flex-col gap-4 copy-md">
+  {#if submitted}
+    <p>You got mail from us 💌</p>
+  {:else}
+    <div class="copy-lg">Login</div>
+    <form class="flex flex-col gap-2" on:submit|preventDefault={submit}>
+      <TextInput type="email" label="E-Mail" bind:value={email} />
+      <Button type="submit" label="Login" />
+    </form>
+    <p>or <a href="/join">join here</a>.</p>
+  {/if}
+</div>

src/routes/(web)/events/[slug]/+page.svelte

@@ -19,7 +19,7 @@
 <Page title={t.title}>
   <Back to="/events" />
   <Content>
-    <header class="flex mono">
+    <header class="flex mono-md">
       <div class="flex-1">
         <div>
           <Icon inline name="date" />