styling a bit..

public/global.css

@@ -25,10 +25,6 @@ a:visited {
 	color: rgb(0,80,160);
 }
 
-label {
-	display: block;
-}
-
 input, button, select, textarea {
 	font-family: inherit;
 	font-size: inherit;
@@ -61,3 +57,30 @@ button:not(:disabled):active {
 button:focus {
 	border-color: #666;
 }
+
+/* custom part */
+
+form {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 1rem;
+}
+
+#sandpoints {
+  width: 80%;
+  margin-left: 1rem;
+  margin-top: 1rem;
+}
+
+label {
+  grid-column: 1/2;
+  text-transform: capitalize;
+}
+
+input, button, textarea {
+  grid-column: 2/3;
+}
+
+textarea {
+  height: 10rem;
+}

src/App.svelte

@@ -59,6 +59,9 @@
    el.onload = ()=> {
      console.log("loading...")
      v = repo.content;
+     if (v.startsWith("\n")) {
+       v = v.substring(1)
+     }
      path = repo.path;
      console.log(JSON.stringify(repo))
      generateFrontMatter(repo.frontmatter, path, document.location.protocol.substring(0,4))
@@ -77,12 +80,14 @@
 <svelte:window on:hashchange={hashChanged} />
 <main id="sandpoints">
   <form>
-    <div class="content"><textarea>{v}</textarea></div>
-    <div class="meta">Path: {path}</div>
-    <label for="publish">Publish</label>
-    <input type="checkbox" id="publish" name="publish" />
+      <label for="content">Content:</label>
+      <textarea bind:value={v} oninput='this.style.height = "";this.style.height = this.scrollHeight + 3 + "px"'></textarea>
+    {#if document.location.protocol.substring(0,4) != "file"}
+      <label for="publish">Publish</label>
+      <input type="checkbox" id="publish" name="publish" />
+    {/if}
     <label for="offline">Offline</label>
     <input type="checkbox" id="offline" name="offline" />
-    <div class="btns"><button id="sandpointsButton">BANG</button></div>
+    <button id="sandpointsButton">COMMIT/SAVE</button>
   </form>
 </main>