2 files changed, 100 insertions, 16 deletions

diff --git a/static/app.css b/static/app.css
index 7b2d083..2b86f97 100644
--- a/static/app.css
+++ b/static/app.css
@@ -1,5 +1,5 @@
 header {
-    padding: 0rem 2rem 0rem 2rem;
+    padding: 0em 2em 0em 2em;
     
     display: flex;
     flex-direction: row;
@@ -7,8 +7,8 @@ header {
 }
 
 header > h1 {
-    padding: 0.5rem;
-    font-size: 2rem;
+    padding: 0.25em;
+    font-size: 2em;
 }
 
 header > nav {
@@ -17,9 +17,17 @@ header > nav {
     margin-left: 2em;
 }
 
-.flex-between {
+.flex_between {
     display: flex;
     flex-direction: row;
+    padding: 0.5rem;
+}
+
+.flex_end {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    padding: 0.5rem;
 }
 
 .spacer {
@@ -89,22 +97,16 @@ a:hover::after {
     margin: 2em;
 }
 
+.topline_apart {
+    justify-content: space-between;
+}
+
 .topline > p {
     margin-top: auto;
     margin-bottom: auto;
     margin-left: 2em;
 }
 
-@media only screen and (max-width: 768px) {
-    header > h1 {
-        font-size: 1em;        
-    }    
-    
-    .topline > p {
-        display: none;
-    }
-}
-
 .card {
     border-top: 1px solid #fff;
 
@@ -161,10 +163,40 @@ a:hover::after {
     margin: 2rem;
 }
 
+.login_form .markdown_form {
+    margin-top: 2em;
+    margin-bottom: 2em;
+    padding: 0.5em;
+}
+
 .login_form {
-    margin-top: 2rem;
+    display: flex;
+    flex-direction: column;    
+}
+
+.login_form > input {
+    margin: auto;
+    margin-top: 0.5em;
+    margin-bottom: 2em;
+    width: 95%;
+}
+
+.markdown_form {
+    margin-left: 2em;
+    margin-right: 2em;
+}
+
+.bottom_elem {
     margin-bottom: 2rem;
-    padding: 0.5rem;
+}
+
+.white {
+    background-color: white;
+    opacity: 1;
+}
+
+.text_left {
+    text-align: left;
 }
 
 .vert_align {
@@ -181,3 +213,26 @@ a:hover::after {
     width: 100%;
     height: 5%;
 }
+
+@media only screen and (max-width: 768px) {
+    header {
+        display: flex;
+        flex-direction: column;
+    }
+    
+    header > h1 {
+        font-size: 1.5em;        
+    }
+
+    header > nav {
+        margin-left: 0em;
+    }
+    
+    .topline > p {
+        display: none;
+    }
+
+    .bottom_elem {
+        margin-bottom: 2.5em;
+    }
+}
diff --git a/static/mde.js b/static/mde.js
new file mode 100644
index 0000000..a716ee4
--- /dev/null
+++ b/static/mde.js
@@ -0,0 +1,29 @@
+const form = document.getElementById('md_form');
+const textarea = document.getElementById('raw');
+textarea.value = "";
+
+const editor = new EasyMDE({
+    element: textarea,
+    autosave: {
+        enabled: true,
+        uniqueId: "paterissa-post-editor",
+        text: "Autosaved: ",
+    },
+    placeholder: "Post...",
+    promptURLs: true,
+});
+
+form.addEventListener('submit', function(event) {
+    event.preventDefault();
+    
+    const formData = new FormData();
+    formData.set("raw", editor.value());
+
+    fetch('/post/new', {
+        method: 'POST',
+        body: formData
+    }).then(_ => {
+        window.location.reload();
+    });
+});
+