Some more design improvements

.gitignore

@@ -38,5 +38,6 @@ jspm_packages
 
 client/public
 db
+db/matterwiki.sqlite
 
 config.js

client/app/static/app.jsx

@@ -20,9 +20,12 @@ const App = React.createClass({
 
           <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
             <ul className="nav navbar-nav navbar-right">
-              <Link to="article/new"><button type="button" className="btn btn-default navbar-btn">New Article</button>
+             <li><Link to="article/new" className="">New Article
               </Link>
-              <button type="button" className="btn btn-default navbar-btn">Logout</button>
+            </li>
+            <li>
+              <a href="" className="">Logout</a>
+            </li>
             </ul>
           </div>
         </div>

client/app/static/new.jsx

@@ -7,11 +7,11 @@ class NewArticle extends React.Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
-    this.state = {title: "", body: ""};
+    this.state = {body: ""};
   }
 
   handleChange() {
-    this.setState({title: this.refs.title.value, body: this.refs.body.value});
+    this.setState({body: this.refs.body.value});
   }
 
   getRawMarkupBody() {
@@ -19,10 +19,6 @@ class NewArticle extends React.Component {
     return { __html: md.render(this.state.body) };
   }
 
-  getRawMarkupTitle() {
-    var md = new Remarkable();
-    return { __html: md.render(this.state.title) };
-  }
 
   componentDidMount() {
     autosize(document.querySelectorAll('textarea'));
@@ -32,13 +28,16 @@ class NewArticle extends React.Component {
     return (
       <div className="new-article">
         <div className="row">
-          <div className="col-md-6 new-article-form">
+          <div className="col-md-12">
             <textarea
               ref="title"
               className="form-control input-title"
-              onChange={this.handleChange}
               placeholder="Enter article title..."
                />
+         </div>
+         </div>
+         <div className="row">
+          <div className="col-md-6 new-article-form">
             <textarea
               onChange={this.handleChange}
               ref="body"
@@ -47,21 +46,21 @@ class NewArticle extends React.Component {
                />
           </div>
           <div className="col-md-6">
-            <div className="article-heading">
-              <span className="color-text">Preview</span>
 
-            <div
-              className="preview-title single-article-title"
-              dangerouslySetInnerHTML={this.getRawMarkupTitle()}
-            />
-          </div>
             <div
               className="preview-body single-article-body"
               dangerouslySetInnerHTML={this.getRawMarkupBody()}
             />
           </div>
         </div>
+        <br/>
+        <br/>
+      <div className="row">
+        <div className="col-md-12">
+          <button className="btn btn-default btn-block btn-lg" >Create Article</button>
+        </div>
       </div>
+    </div>
     );
   }
 }

client/assets/bootstrap.css

@@ -3962,7 +3962,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .nav > li > a:hover,
 .nav > li > a:focus {
   text-decoration: none;
-  background-color: #eee;
+  background-color: transparent;
+  border: 1px solid #ff0066;
 }
 .nav > li.disabled > a {
   color: #777;
@@ -4291,8 +4292,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   margin: 7.5px -15px;
 }
 .navbar-nav > li > a {
-  padding-top: 20px;
-  padding-bottom: 20px;
   line-height: 20px;
 }
 @media (max-width: 767px) {
@@ -4326,9 +4325,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   .navbar-nav > li {
     float: left;
   }
-  .navbar-nav > li > a {
-    padding-top: 20px;
-    padding-bottom: 20px;
+  .navbar-nav > li {
+    margin-top: 10px;
   }
 }
 .navbar-form {

client/assets/style.css

@@ -117,12 +117,12 @@ input:focus
 
 .new-article .input-title {
     font-weight: 700;
-    font-size: 4em;
+    font-size: 3em;
 }
 
 .new-article .input-body {
-  font-family: "Vollkorn", sans-serif;
-  font-size: 1.5em;
+  font-family: "Courier", sans-serif;
+  font-size: 1.2em;
 }
 
 textarea {