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>
+  <div class="title">
-  {#if $page.form}
+    <h1 class="typeHead">Compose</h1>
-    <span>{JSON.stringify($page.form)}</span>
+    <span>your voice ~ your post</span>
-  {/if}
+  </div>
-  <span>{JSON.stringify($toasts)}</span>
+  
-  <select name="category" id="category">
+  <div class="formContent">
-    {#each data.categories as category}
+    <div class="top">
-    <option value={category.id}></option>
+      <div class="labelInput">
-    {/each}
+        <label for="name">Title</label>
-  </select>
+        <input type="text" name="name" id="name" placeholder="your new topic...">
-  <input type="text" name="name" id="name">
+      </div>
-  <textarea name="content" id="content" rows="4"></textarea>
+  
-  <button type="submit">Post!</button>
+      <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>

static/css/base.scss

@@ -53,7 +53,7 @@ a {
   }
 }
 
-h1, h2, h3, h4, h5, h6, p, span, input, textarea {
+h1, h2, h3, h4, h5, h6, p, span, input, textarea, select {
   margin: 0;
   color: white;
 }

static/css/form.scss

@@ -1,16 +1,9 @@
-form.entryForm {
+form {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   justify-content: center;
   gap: 32px;
-  padding: 32px;
-  background: #00000090;
-  border-radius: 16px;
-  backdrop-filter: blur(16px);
-
-  max-width: 350px;
-  width: calc(20dvw + 150px);
 
   button[type=submit] {
     background: var(--accent-dim);
@@ -21,13 +14,35 @@ form.entryForm {
   }
   
   input[type=text],
-  input[type=password] {
+  input[type=password],
+  select,
+  textarea {
     font-size: 1rem;
     padding: 0.6em 1.5em;
-    background: #222;
     border-radius: 8px;
     border: none;
     width: calc(100% - 3em);
+    background: var(--gray);
+  }
+
+  label {
+    color: var(--accent-light);
+  }
+}
+
+form.entryForm {
+  padding: 32px;
+
+  background: #00000090;
+  border-radius: 16px;
+  backdrop-filter: blur(16px);
+
+  max-width: 350px;
+  width: calc(20dvw + 150px);
+
+  input[type=text],
+  input[type=password] {
+    background: #222;
   }
 
   label {