CSS fixes mostly

themes/grav/css-compiled/nucleus.css

@@ -516,7 +516,7 @@ body {
   line-height: 1.7; }
 
 h1, h2, h3, h4, h5, h6 {
-  margin: 0.85rem 0 1.7rem 0;
+  margin: 1.7rem 0 0.85rem 0;
   text-rendering: optimizeLegibility; }
 
 h1 {
@@ -538,7 +538,7 @@ h6 {
   font-size: 0.85rem; }
 
 p {
-  margin: 1.7rem 0; }
+  margin: 0.85rem 0 1.7rem; }
 
 ul, ol {
   margin-top: 1.7rem;

themes/grav/css-compiled/template.css

@@ -1322,8 +1322,16 @@ body.remodal_active .remodal {
       float: left; }
       .uk-htmleditor-navbar ul li:first-child a {
         border-top-left-radius: 4px; }
+    .uk-htmleditor-navbar ul .uk-active a {
+      background: white;
+      cursor: auto;
+      border-left: 1px solid #d4d4d4;
+      border-right: 1px solid #d4d4d4; }
+      .uk-htmleditor-navbar ul .uk-active a:hover {
+        background: white; }
     .uk-htmleditor-navbar ul a {
       display: block;
+      cursor: pointer;
       line-height: 3rem;
       height: 3rem;
       padding: 0 1rem;
@@ -1337,6 +1345,8 @@ body.remodal_active .remodal {
 
 .uk-htmleditor-navbar-flip {
   float: right; }
+  .uk-htmleditor-navbar-flip ul li:last-child a {
+    border-top-right-radius: 4px; }
 
 .uk-htmleditor-content {
   border: 1px solid #d4d4d4;
@@ -1359,6 +1369,27 @@ body.remodal_active .remodal {
   .uk-htmleditor-preview > div > hr:first-child {
     border-bottom: 4px solid #f00; }
 
+#admin-main .uk-htmleditor-preview {
+  font-family: "Lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
+  #admin-main .uk-htmleditor-preview h1, #admin-main .uk-htmleditor-preview h2, #admin-main .uk-htmleditor-preview h3, #admin-main .uk-htmleditor-preview h4, #admin-main .uk-htmleditor-preview h5, #admin-main .uk-htmleditor-preview h6 {
+    color: #5b6266; }
+  #admin-main .uk-htmleditor-preview h1 {
+    font-size: 2rem;
+    border: 0; }
+  #admin-main .uk-htmleditor-preview h2 {
+    font-size: 1.6rem; }
+  #admin-main .uk-htmleditor-preview h3 {
+    font-size: 1.4rem; }
+  #admin-main .uk-htmleditor-preview h4 {
+    font-size: 1.2rem; }
+  #admin-main .uk-htmleditor-preview h5 {
+    font-size: 1.1rem; }
+  #admin-main .uk-htmleditor-preview p, #admin-main .uk-htmleditor-preview h1 {
+    padding: 0; }
+
+[data-mode=tab][data-active-tab=code] .uk-htmleditor-preview, [data-mode=tab][data-active-tab=preview] .uk-htmleditor-code {
+  display: none; }
+
 [data-mode=split] .uk-htmleditor-button-code, [data-mode=split] .uk-htmleditor-button-preview {
   display: none; }
 [data-mode=split] .uk-htmleditor-code {

themes/grav/js/htmleditor.js

@@ -30,9 +30,9 @@
             markedOptions: { gfm: true, tables: true, breaks: true, pedantic: true, sanitize: false, smartLists: true, smartypants: false, langPrefix: 'lang-'},
             codemirror   : { mode: 'htmlmixed', lineWrapping: true, dragDrop: false, autoCloseTags: true, matchTags: true, autoCloseBrackets: true, matchBrackets: true, indentUnit: 4, indentWithTabs: false, tabSize: 4, hintOptions: {completionSingle:false} },
             toolbar      : [ 'bold', 'italic', 'strike', 'link', 'image', 'blockquote', 'listUl', 'listOl' ],
-            lblPreview   : 'Preview',
+            lblPreview   : '<i class="fa fa-fw fa-eye"></i>',
-            lblCodeview  : 'HTML',
+            lblCodeview  : '<i class="fa fa-fw fa-code"></i>',
-            lblMarkedview: 'Markdown'
+            lblMarkedview: '<i class="fa fa-fw fa-code"></i>'
         },
 
         init: function() {

themes/grav/scss/nucleus/_typography.scss

@@ -6,7 +6,7 @@ body {
 
 // Headings
 h1, h2, h3, h4, h5, h6 {
-	margin: $leading-margin / 2 0 $leading-margin 0;
+	margin: $leading-margin 0 $leading-margin / 2 0;
 	text-rendering: optimizeLegibility;
 }
 
@@ -36,7 +36,7 @@ h6 {
 
 // Paragraph
 p {
-	margin: $leading-margin 0;
+	margin: $leading-margin / 2 0 $leading-margin ;
 }
 
 // Lists

themes/grav/scss/template/_editor.scss

@@ -23,9 +23,19 @@
                 border-top-left-radius: 4px;
             }
         }
+        .uk-active a {
+            background: white;
+            cursor: auto;
+            border-left: 1px solid $form-border;
+            border-right: 1px solid $form-border;
+            &:hover {
+                background: $white;
+            }
+        }
 
         a {
             display: block;
+            cursor: pointer;
             line-height: 3rem;
             height: 3rem;
             padding: 0 1rem;
@@ -37,6 +47,8 @@
             }
         }
     }
+
+
 }
 
 .uk-htmleditor-navbar-nav {
@@ -45,6 +57,9 @@
 
 .uk-htmleditor-navbar-flip {
     float: right;
+    ul li:last-child a {
+        border-top-right-radius: 4px;
+    }
 }
 
 .uk-htmleditor-content {
@@ -71,6 +86,42 @@
     > div > hr:first-child {
         border-bottom: 4px solid #f00;
     }
+
+}
+
+#admin-main {
+    .uk-htmleditor-preview {
+        font-family: $font-family-default;
+
+        h1, h2, h3, h4, h5, h6 {
+            color: darken($content-fg, 10%);
+        }
+        h1 {
+            font-size: 2rem;
+            border: 0;
+        }
+        h2 {
+            font-size: 1.6rem;
+        }
+        h3 {
+            font-size: 1.4rem;
+        }
+        h4 {
+            font-size: 1.2rem;
+        }
+        h5 {
+            font-size: 1.1rem
+        }
+        p, h1 {
+            padding: 0;
+        }
+    }
+}
+
+[data-mode=tab] {
+    &[data-active-tab=code] .uk-htmleditor-preview, &[data-active-tab=preview] .uk-htmleditor-code {
+        display: none;
+    }
 }
 
 [data-mode=split] {

themes/grav/templates/forms/fields/markdown/markdown.html.twig

@@ -2,6 +2,6 @@
 
 <div class="form-field">
     <div class="form-data form-markdown-wrapper">
-        <textarea data-uk-htmleditor="{markdown:true, mode:'split', maxsplitsize:600}" name="{{ (scope ~ field.name)|fieldName }}">{{ value|join("\n") }}</textarea>
+        <textarea data-uk-htmleditor="{markdown:true, mode:'split', maxsplitsize:800}" name="{{ (scope ~ field.name)|fieldName }}">{{ value|join("\n") }}</textarea>
     </div>
 </div>