working settings

static/css/main.css

@@ -1,36 +1,76 @@
 body {
-  font-family: 'Roboto', sans-serif;
-  padding-top: 3em;
+    font-family: 'Roboto', sans-serif;
+    color: #212121;
+    height: 100%;
+    width: 100%;
 }
-
-/* SITE HEADER */
-
-.site-header {
-  height: 3em;
-  width: 100%;
-  background-color: #263238;
-  color: #fff;
-  padding: 0 2em;
-  box-sizing: border-box;
-  position: fixed;
-  top: 0;
-  left: 0;
+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;
+}
+header nav {} header nav ul {
+    margin: 0;
+    padding: 0;
+}
+header nav ul li {
+    list-style-type: none;
+    display: inline-block;
+    vertical-align: middle;
+}
+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;
+}
+header nav ul li a:hover {
+    background-color: rgba(255, 255, 255, 0.3);
+}
+main {
+    top: 3em;
+    position: relative;
 }
-
 .content {
-  margin: 1.5em auto;
-  width: 80%;
-  max-width: 960px;
+    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;
 }
 
-.block {
-  margin: 1em 0;
+/* FORMS */
+
+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;}
+
+form input:focus {
+    color: inherit;
+    outline: 0;
+    border-bottom: 1px solid #2196F3;
+}
+
+form label {
+width: 10.5em;display: inline-block;}

static/js/app.js

@@ -0,0 +1,38 @@
+$(document).ready(function() {
+  $('form').submit(function(event) {
+    var data = JSON.stringify($(this).serializeField())
+    var url = $(this).attr('action')
+
+    $.ajax({
+      type        : 'POST',
+      url         : url,
+      data        : data,
+      dataType    : 'json',
+      encode      : true
+    }).done(function(data) {
+      console.log(data);
+    });
+
+    event.preventDefault();
+  });
+});
+
+$.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;
+};