Properly style creation page

styles/default.css

@@ -28,12 +28,23 @@ a
     color: #000;
 }
 
+input,
+textarea
+{
+    background-color: #eee;
+}
+
+textarea
+{
+    font-family: Arial, Helvetica, sans-serif;
+}
+
 .centreColumn
 {
     position: relative;
 
     width: 800px;
-    min-height: calc(100vh - 116px - 100px);
+    min-height: calc(100vh - 100px - 100px);
     margin-right: auto;
     margin-left: auto;
     padding-top: 100px;
@@ -126,7 +137,7 @@ a
 .footerContainer
 {
     width: 100%;
-    height: 60px;
+    height: 80px;
 }
 
 .centreFooterContainer
@@ -215,48 +226,100 @@ a
     color: #fffa;
 }
 
-.createForm input,
-.createForm textarea
-{
-    width: 100%;
-}
-
 .createForm .title,
-.createForm .author
+.createForm .author,
+.createForm .titleAuthorSeparator
 {
-    font-size: 18pt;
+    font-size: 16pt;
-    line-height: 25px;
+    line-height: 30px;
 
-    display: block;
+    display: inline-block;
 
+    box-sizing: border-box;
     width: 100%;
+    padding-right: 7px;
+    padding-left: 7px;
 
     border: 0;
+}
+
+.createForm .title
+{
+    float: left;
+
+    width: calc(70% - 50px);
+
     border-bottom: 5px solid #000;
 }
 
 .createForm .author
 {
-    width: 100%;
+    float: right;
+
+    width: 30%;
 
     color: #000;
+    border-bottom: 5px solid #000;
+}
+
+.createForm .titleAuthorSeparator
+{
+    width: 50px;
+
+    text-align: center;
 }
 
 .createForm .tags
 {
+    font-size: 20pt;
+    line-height: 25px;
+
     width: 100%;
 
-    color: #000;
+    background-color: #eee;
 }
 
 .createForm .content
 {
+    font-size: 12pt;
+
+    width: calc(100% - 20px);
+    height: calc(100vh - 387px - 100px);
+    min-height: 400px;
+    margin: 0;
+    margin-bottom: 10px;
+    padding: 10px;
+
     resize: vertical;
 
     color: #000;
+    border: 0;
 }
 
-.createForm .submit
+.createForm .buttonContainer
 {
-    color: #000;
+    width: 100%;
+    height: 60px;
+}
+
+.createForm button
+{
+    font-size: 16pt;
+    font-weight: bold;
+
+    display: inline-block;
+    float: right;
+
+    max-width: 100%;
+    height: calc(100% - 20px);
+    margin-bottom: 20px;
+    margin-left: 15px;
+    padding-right: 15px;
+    padding-left: 15px;
+
+    cursor: pointer;
+
+    color: #fff;
+    border: 0;
+    background-color: #000;
 }

styles/ng-tags-input.css

@@ -2,6 +2,7 @@ tags-input
 {
     display: block;
 }
+
 tags-input *,
 tags-input *:before,
 tags-input *:after
@@ -10,6 +11,7 @@ tags-input *:after
        -moz-box-sizing: border-box;
             box-sizing: border-box;
 }
+
 tags-input .host
 {
     position: relative;
@@ -17,7 +19,10 @@ tags-input .host
     height: 100%;
     margin-top: 5px;
     margin-bottom: 5px;
+
+    border-bottom: 5px solid #000;
 }
+
 tags-input .host:active
 {
     outline: none;
@@ -32,14 +37,15 @@ tags-input .tags
 
     cursor: text;
     word-wrap: break-word;
+    /* border: 1px solid darkgray; */
 
-    border: 1px solid darkgray;
     background-color: #fff;
     /* box-shadow: 1px 1px 1px 0 lightgray inset; */
 
        -moz-appearance: textfield;
     -webkit-appearance: textfield;
 }
+
 /* tags-input .tags.focused
 {
     outline: none;
@@ -47,6 +53,7 @@ tags-input .tags
        -moz-box-shadow: 0 0 3px 1px rgba(5, 139, 242, .6);
             box-shadow: 0 0 3px 1px rgba(5, 139, 242, .6);
 } */
+
 tags-input .tags .tag-list
 {
     margin: 0;
@@ -54,9 +61,10 @@ tags-input .tags .tag-list
 
     list-style-type: none;
 }
+
 tags-input .tags .tag-item
 {
-    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
     line-height: 25px;
 
     display: inline-block;
@@ -73,11 +81,13 @@ tags-input .tags .tag-item
     background:         linear-gradient(to bottom, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%); */
     background-color: #000;
 }
+
 tags-input .tags .tag-item.selected
 {
     /* background: -webkit-linear-gradient(top, #febbbb 0%, #fe9090 45%, #ff5c5c 100%);
     background:         linear-gradient(to bottom, #febbbb 0%, #fe9090 45%, #ff5c5c 100%); */
 }
+
 tags-input .tags .tag-item .remove-button
 {
     font: bold 16px Arial, sans-serif;
@@ -92,127 +102,37 @@ tags-input .tags .tag-item .remove-button
     border: none;
     background: none;
 }
+
 tags-input .tags .tag-item .remove-button:active
 {
     color: #f00;
 }
+
 tags-input .tags .input
 {
-    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
 
     float: left;
 
     height: 26px;
     margin: 2px;
     padding: 0;
+    padding-right: 5px;
     padding-left: 5px;
 
     border: 0;
+    /* border-bottom: 5px solid #000; */
     outline: none;
 }
+
 tags-input .tags .input.invalid-tag
 {
     color: #f00;
 }
+
 tags-input .tags .input::-ms-clear
 {
     display: none;
 }
-tags-input.ng-invalid .tags
-{
-    -webkit-box-shadow: 0 0 3px 1px rgba(255, 0, 0, .6);
-       -moz-box-shadow: 0 0 3px 1px rgba(255, 0, 0, .6);
-            box-shadow: 0 0 3px 1px rgba(255, 0, 0, .6);
-}
-tags-input[disabled] .host:focus
-{
-    outline: none;
-}
-tags-input[disabled] .tags
-{
-    cursor: default;
-
-    background-color: #eee;
-}
-tags-input[disabled] .tags .tag-item
-{
-    opacity: .65;
-    background: -webkit-linear-gradient(top, #f0f9ff 0%, rgba(203, 235, 255, .75) 47%, rgba(161, 219, 255, .62) 100%);
-    background:         linear-gradient(to bottom, #f0f9ff 0%, rgba(203, 235, 255, .75) 47%, rgba(161, 219, 255, .62) 100%);
-}
-tags-input[disabled] .tags .tag-item .remove-button
-{
-    cursor: default;
-}
-tags-input[disabled] .tags .tag-item .remove-button:active
-{
-    color: #585858;
-}
-tags-input[disabled] .tags .input
-{
-    cursor: default;
-
-    background-color: #eee;
-}
-
-tags-input .autocomplete
-{
-    position: absolute;
-    z-index: 999;
-
-    width: 100%;
-    margin-top: 5px;
-    padding: 5px 0;
-
-    border: 1px solid rgba(0, 0, 0, .2);
-    background-color: #fff;
-    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-       -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-            box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-}
-tags-input .autocomplete .suggestion-list
-{
-    position: relative;
-
-    overflow-y: auto;
-
-    max-height: 280px;
-    margin: 0;
-    padding: 0;
-
-    list-style-type: none;
-}
-tags-input .autocomplete .suggestion-item
-{
-    font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
-
-    overflow: hidden;
-
-    padding: 5px 10px;
-
-    cursor: pointer;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-
-    color: #000;
-    background-color: #fff;
-}
-tags-input .autocomplete .suggestion-item.selected
-{
-    color: #fff;
-    background-color: #0097cf;
-}
-tags-input .autocomplete .suggestion-item.selected em
-{
-    color: #fff;
-    background-color: #0097cf;
-}
-tags-input .autocomplete .suggestion-item em
-{
-    font: normal bold 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
-
-    color: #000;
-    background-color: #fff;
-}
 
 /*# sourceMappingURL=ng-tags-input.css.map */

views/create.html

@@ -1,8 +1,10 @@
 <h1>Create a new post</h1>
 <form class="createForm" ng-submit="onSubmit()">
-    <input type="text" class="title" ng-model="title" placeholder="Title">
+    <div>
-    <br>
+        <input type="text" class="title" ng-model="title" placeholder="Title" required>
-    <input type="text" class="author" ng-model="author" placeholder="Author">
+        <span class="titleAuthorSeparator">by</span>
+        <input type="text" class="author" ng-model="author" placeholder="Author" required>
+    </div>
     <br>
     <span><!-- Wrap <tags-input> to avoid weird behaviour with following elements -->
         <tags-input
@@ -13,10 +15,13 @@
             add-on-blur="true"
             class="tags"
             ng-model="tags"
-            placeholder="Tags">
+            placeholder="Add tags">
     </span>
     <br>
-    <textarea class="content" ng-model="content" placeholder="Content..."></textarea>
+    <textarea class="content" ng-model="content" placeholder="Post content.&#13;&#10;Markdown supported!" required></textarea>
     <br>
-    <input class="submit" type="submit">
+    <div class="buttonContainer">
+        <button type="submit">Submit</button>
+        <button type="preview">Preview</button>
+    </div>
 </form>