frontmatter parsing better; edit not working

static/css/main.css

@@ -1,76 +1,106 @@
 body {
-    font-family: 'Roboto', sans-serif;
-    color: #212121;
-    height: 100%;
-    width: 100%;
+  font-family: 'Roboto', sans-serif;
+  color: #212121;
+  height: 100%;
+  width: 100%;
 }
+
 header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 3em;
-    width: 100%;
-    background-color: #212121;
-    padding: 0 2em;
-    box-sizing: border-box;
-    z-index: 999;
-    color: #fff;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 3em;
+  width: 100%;
+  background-color: #EEE;
+  padding: 0 2em;
+  box-sizing: border-box;
+  z-index: 999;
+  color: #555;
 }
-header nav {} header nav ul {
-    margin: 0;
-    padding: 0;
+
+header nav {}
+
+header nav ul {
+  margin: 0;
+  padding: 0;
+  display: -webkit-box;
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -moz-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -ms-flexbox;
+  /* TWEENER - IE 10 */
+  display: -webkit-flex;
+  /* NEW - Chrome */
+  display: flex;
 }
+
 header nav ul li {
-    list-style-type: none;
-    display: inline-block;
-    vertical-align: middle;
+  list-style-type: none;
+  display: inline-block;
+  vertical-align: middle;
 }
+
+header nav ul li:last-child {
+  margin-left: auto;
+}
+
 header nav img {
   height: 2em;
 }
+
 header nav ul li a {
-    padding: 0.5em 0.5em;
-    line-height: 2em;
-    display: block;
-    text-decoration: none;
-    color: inherit;
-    transition: .5s ease background-color;
+  padding: 0.5em 0.5em;
+  line-height: 2em;
+  display: block;
+  text-decoration: none;
+  color: inherit;
+  transition: .5s ease background-color;
 }
+
 header nav ul li a:hover {
-    background-color: rgba(255, 255, 255, 0.3);
+  background-color: rgba(255, 255, 255, 0.57);
 }
+
 main {
-    top: 3em;
-    position: relative;
+  top: 3em;
+  position: relative;
 }
+
 .content {
-    margin: 1.5em auto;
-    width: 80%;
-    max-width: 800px;
+  margin: 1.5em auto;
+  width: 80%;
+  max-width: 800px;
 }
+
 textarea {
-    width: 100%;
-    min-height: 50em;
-    resize: vertical;
-    border: 0;
-    font-family: inherit;
+  width: 100%;
+  min-height: 50em;
+  resize: vertical;
+  border: 0;
+  font-family: inherit;
 }
 
+
 /* FORMS */
 
-form {
-
-}
+form {}
 
 form input {
-
-color: rgba(0, 0, 0, 0.41);width: 15em;line-height: 1.25em;margin: .5em 0;border: 1px solid #fff;transition: .5s ease-out all;}
+  color: rgba(0, 0, 0, 0.41);
+  width: 15em;
+  line-height: 1.25em;
+  margin: .5em 0;
+  border: 1px solid #fff;
+  transition: .5s ease-out all;
+}
 
 form input:focus {
-    color: inherit;
-    outline: 0;
-    border-bottom: 1px solid #2196F3;
+  color: inherit;
+  outline: 0;
+  border-bottom: 1px solid #2196F3;
 }
 
 form label {
-width: 10.5em;display: inline-block;}
+  width: 10.5em;
+  display: inline-block;
+}

static/js/app.js

@@ -4,11 +4,11 @@ $(document).ready(function() {
     var url = $(this).attr('action')
 
     $.ajax({
-      type        : 'POST',
-      url         : url,
-      data        : data,
-      dataType    : 'json',
-      encode      : true,
+      type: 'POST',
+      url: url,
+      data: data,
+      dataType: 'json',
+      encode: true,
     }).done(function(data) {
       alert("it workss");
     }).fail(function(data) {
@@ -17,24 +17,42 @@ $(document).ready(function() {
 
     event.preventDefault();
   });
+
+  $("#logout").click(function(e) {
+    e.preventDefault();
+    jQuery.ajax({
+        type: "GET",
+        url: "/admin",
+        async: false,
+        username: "logmeout",
+        password: "123456",
+        headers: {
+          "Authorization": "Basic xxx"
+        }
+      })
+      .fail(function() {
+        window.location = "/";
+      });
+    return false;
+  });
 });
 
-$.fn.serializeField = function() {
-    var result = {};
-    this.each(function() {
-      $(this).find("> *").each(function() {
-        var $this = $(this);
-        var name = $this.attr("name");
 
-        if ($this.is("fieldset") && name) {
-           result[name] = $this.serializeField();
-        }
-        else {
-           $.each($this.serializeArray(), function() {
-               result[this.name] = this.value;
-           });
-        }
-      });
+$.fn.serializeField = function() {
+  var result = {};
+  this.each(function() {
+    $(this).find("> *").each(function() {
+      var $this = $(this);
+      var name = $this.attr("name");
+
+      if ($this.is("fieldset") && name) {
+        result[name] = $this.serializeField();
+      } else {
+        $.each($this.serializeArray(), function() {
+          result[this.name] = this.value;
+        });
+      }
     });
-    return result;
-};
+  });
+  return result;
+};