Improved Editor Styles

First pass at refactoring editor styles to make the Ghost writing experience more pleasurable.
- Larger font
- Bold title
- More space for writing
- Minor code standards cleanup

core/client/assets/sass/layouts/editor.scss

@@ -21,9 +21,9 @@
     // The main post title
     .entry-title {
         @extend %box;
-        height: 35px;
-        padding: 10px 15px;
-        margin-bottom: 15px;
+        height: 53px;
+        padding: 2px 15px;
+        margin-bottom: 5px;
         position: relative;
 
         @include breakpoint($mobile) {
@@ -34,9 +34,11 @@
             border: 0;
             margin: 0;
             padding: 0;
-            font-size: 2em;
-            font-weight: 300;
+            font-size: 3em;
+            font-weight: bold;
+            letter-spacing: -1px;
             width: 100%;
+            background: transparent;
             &:focus {
                 outline: 0;
             }
@@ -60,7 +62,7 @@
         padding: 15px;
         position: absolute;
         bottom: 40px; // height of the publish bar
-        top:59px; // height of the post title + margin
+        top: 61px; // height of the post title + margin
         background: #fff;
         box-shadow: $shadow;
 
@@ -190,9 +192,9 @@
             right: 0;
             bottom: 0;
             font-family: $font-family-mono;
-            font-size:1.1em;
-            line-height:1.2em;
-            color: lighten($darkgrey, 30%);
+            font-size: 1.4em;
+            line-height: 1.3em;
+            color: lighten($darkgrey, 10%);
 
             .CodeMirror-focused,
             .CodeMirror-selected {
@@ -222,17 +224,25 @@
             color: #000;
             font-size: 1.4em;
             line-height: 1.4em;
+            font-weight: bold;
+        }
+
+        .cm-variable-2,
+        .cm-variable-3,
+        .cm-keyword {
+            color: lighten($darkgrey, 10%);
         }
 
         .cm-string,
+        .cm-strong,
         .cm-link,
         .cm-comment,
         .cm-quote,
-        .cm-variable-2,
-        .cm-variable-3,
-        .cm-keyword,
         .cm-number,
-        .cm-atom {color:#000;}
+        .cm-atom {
+            color: #000;
+            font-weight: bold;
+        }
 
     }
 
@@ -256,10 +266,6 @@
             padding: 60px 40px 40px 40px;
             overflow: auto;
 
-            // Break long words to new line
-            word-break: break-word;
-            hyphens: auto;
-
             // Tweak padding for smaller screens
             @include breakpoint($netbook) {padding-top: 20px;}
             @include breakpoint($mobile) {padding: 15px;}
@@ -298,7 +304,7 @@
 // TODO: These should just be defaults, overridden by editor.hbs in theme dir
 .entry-preview-content,
 .content-preview-content {
-    font-size:1.15em;
+    font-size: 1.4em;
     line-height: 1.5em;
 
     a {

core/client/assets/sass/modules/global.scss

@@ -71,6 +71,8 @@ body {
     color: $darkgrey;
     font-weight: 300;
     background: $lightbrown;
+    word-break: break-word;
+    hyphens: auto;
     @include breakpoint($mobile) { background: #fff; }
 }