Design: Compose styling

src/routes/(app)/compose/+page.svelte

@@ -15,22 +15,87 @@
   .composeForm {
     display: flex;
     flex-flow: column nowrap;
+    gap: 32px;
+  }
+
+  .formContent {
+    display: flex;
+    flex-flow: column nowrap;
+    width: 100%;
     gap: 16px;
   }
+
+  .title {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: baseline;
+    justify-content: start;
+    width: 100%;
+    gap: 16px;
+  }
+
+  .top {
+    display: flex;
+    flex-flow: row;
+    gap: 16px;
+    width: 100%;
+  }
+
+  #category {
+    width: 100%;
+  }
+
+  #content {
+    resize: vertical;
+  }
+
+  .labelInput {
+    display: flex;
+    flex-flow: column;
+    width: 100%;
+
+    > label {
+      width: min-content;
+    }
+
+    &.shrink {
+      max-width: 250px;
+    }
+  }
 </style>
 
+<svelte:head>
+  <link rel="stylesheet" href="/css/form.scss">
+</svelte:head>
+
 <form action="/compose" method="post" class="composeForm" use:enhance>
-  <h1>Compose</h1>
-  {#if $page.form}
-    <span>{JSON.stringify($page.form)}</span>
-  {/if}
-  <span>{JSON.stringify($toasts)}</span>
-  <select name="category" id="category">
-    {#each data.categories as category}
-    <option value={category.id}></option>
-    {/each}
-  </select>
-  <input type="text" name="name" id="name">
-  <textarea name="content" id="content" rows="4"></textarea>
-  <button type="submit">Post!</button>
+  <div class="title">
+    <h1 class="typeHead">Compose</h1>
+    <span>your voice ~ your post</span>
+  </div>
+  
+  <div class="formContent">
+    <div class="top">
+      <div class="labelInput">
+        <label for="name">Title</label>
+        <input type="text" name="name" id="name" placeholder="your new topic...">
+      </div>
+  
+      <div class="labelInput shrink">
+        <label for="category">Category</label>
+        <select name="category" id="category">
+          {#each data.categories as category}
+          <option value={category.id}>{category.name}</option>
+          {/each}
+        </select>
+      </div>
+    </div>
+  
+    <div class="labelInput">
+      <label for="content">Content</label>
+      <textarea name="content" id="content" rows="4" placeholder="write something nice..."></textarea>
+    </div>
+  </div>
+
+  <button type="submit" class="typeTitle">Post!</button>
 </form>