Live Preview (#119)

Live preview mode is here

web/styles/editor.scss

@@ -22,19 +22,27 @@
   }
 
   // Indentation of follow-up lines
-  @mixin lineOverflow($baseIndent) {
+  @mixin lineOverflow($baseIndent, $bulletIndent: 0) {
     text-indent: -1 * ($baseIndent + 2ch);
     padding-left: $baseIndent + 2ch;
 
     &.sb-line-task {
-      text-indent: -1 * ($baseIndent + 6ch);
-      padding-left: $baseIndent + 6ch;
+      text-indent: -1 * ($baseIndent + 5ch);
+      padding-left: $baseIndent + 5ch;
+
+      .cm-list-bullet::after {
+        left: ($baseIndent + 5ch);
+      }
     }
 
     &.sb-line-blockquote {
       text-indent: -1 * ($baseIndent + 4ch);
       padding-left: $baseIndent + 4ch;
     }
+
+    .cm-list-bullet::after {
+      left: ($baseIndent + $bulletIndent + 2ch);
+    }
   }
 
   .sb-line-ul {
@@ -81,8 +89,131 @@
     }
   }
 
+  .sb-line-blockquote {
+    &.sb-line-li-1 {
+      @include lineOverflow(-1, 2);
+    }
+
+    &.sb-line-li-1.sb-line-li-2 {
+      @include lineOverflow(1, 2);
+    }
+
+    &.sb-line-li-1.sb-line-li-2.sb-line-li-3 {
+      @include lineOverflow(4);
+    }
+
+    &.sb-line-li-1.sb-line-li-2.sb-line-li-3.sb-line-li-4 {
+      @include lineOverflow(6);
+    }
+
+    &.sb-line-li-1.sb-line-li-2.sb-line-li-3.sb-line-li-4.sb-line-li-5 {
+      @include lineOverflow(8);
+    }
+  }
+
   .sb-line-comment {
     text-indent: -1 * 3ch;
     padding-left: 3ch;
   }
+
+  .cm-list-bullet {
+		position: relative;
+		visibility: hidden;
+	}
+	.cm-task-checked {
+	 	text-decoration: line-through !important;
+  }
+
+  .sb-checkbox > input[type=checkbox] {
+    width: 3ch;
+  }
+
+	.cm-list-bullet::after {
+		visibility: visible;
+		position: absolute;
+    color: rgb(150, 150, 150);
+		content: "\2022"; /* U+2022 BULLET */
+	}
+
+  .sb-directive-start .sb-comment, .sb-directive-end .sb-comment {
+    position: relative;
+    left: -12px;
+  }
+
+  .sb-directive-start::before {
+		content: "#";
+    color: gray;
+    border: 1px solid gray;
+    border-radius: 5px;
+    font-size: 62%;
+    padding: 2px;
+    position: relative;
+    left: -20px;
+	}
+
+  .sb-directive-outside {
+    opacity: 0.4;
+  }
+
+  .sb-line-frontmatter-outside, .sb-line-code-outside {
+    display: none;
+  }
+
+  .sb-blockquote-outside {
+    text-indent: -1ch;
+    min-height: 1em;
+  }
+
+  .sb-line-table-outside {
+    display: none;
+  }
+
+  .sb-table-widget {
+    display: block;
+    font-weight: normal;
+    margin-bottom: -3rem;
+
+    table {
+      width: 100%;
+      border-spacing: 0;
+    }
+    
+    thead tr {
+        background-color: #333;
+        color: #eee;
+        font-weight: bold;
+    }
+    
+    th, td {
+        padding: 8px;
+    }
+    
+    tbody tr:nth-of-type(even) {
+        background-color: #f3f3f3;
+    }
+  }
+
+  .sb-line-blockquote {
+    border-left: 1px solid rgb(74, 74, 74);
+  }
+
+  .sb-line-blockquote.sb-line-ul.sb-line-li > .sb-quote.sb-meta:first-child {
+    margin-left: -1ch;
+  }
+  
+  .sb-directive-end::before {
+		content: "/";
+    border-radius: 5px;
+    color: gray;
+    border: 1px solid gray;
+    font-size: 62%;
+    padding: 2px;
+    position: relative;
+    left: -20px;
+	}
 }
+
+.cm-scroller {
+  // Give some breathing space at the bottom of the screen
+  padding-bottom: 20em;
+}

web/styles/main.scss

@@ -82,6 +82,18 @@
         display: block;
         text-overflow: ellipsis;
       }
+
+      input.sb-edit-page-name {
+        background: transparent;
+        font-weight: bold;
+        font-size: 28px;
+        white-space: nowrap;
+        text-align: left;
+        border: 0;
+        outline: none;
+        padding: 0;
+        width: 100%;
+      }
     }
 
     .sb-actions {

web/styles/theme.scss

@@ -37,11 +37,11 @@
   background-color: rgb(255, 84, 84);
 }
 
-.sb-saved {
+.sb-saved input {
   color: #111;
 }
 
-.sb-unsaved {
+.sb-unsaved input {
   color: #5e5e5e;
 }
 
@@ -128,19 +128,37 @@
   }
 }
 
+.sb-header-inside.sb-line-h1 {
+  text-indent: -2ch;
+}
+
+.sb-header-inside.sb-line-h2 {
+  text-indent: -3ch;
+}
+
+.sb-header-inside.sb-line-h3 {
+  text-indent: -4ch;
+}
+
+.sb-header-inside.sb-line-h4 {
+  text-indent: -5ch;
+}
+
 .sb-line-h1,
 .sb-line-h2,
-.sb-line-h3 {
-  background-color: rgba(0, 30, 77, 0.5);
-  color: #fff;
+.sb-line-h3,
+.sb-line-h4 {
+  // background-color: rgba(0, 30, 77, 0.5);
+  color: #333;
   font-weight: bold;
   padding: 2px 2px !important;
 }
 
 .sb-line-h1 .sb-meta,
 .sb-line-h2 .sb-meta,
-.sb-line-h3 .sb-meta {
-  color: orange;
+.sb-line-h3 .sb-meta,
+.sb-line-h4 .sb-meta {
+  color: #a1a1a0;
 }
 
 .sb-line-h1 {
@@ -155,15 +173,22 @@
   font-size: 1.1em;
 }
 
+.sb-line-h4 {
+  font-size: 1em;
+}
+
 .sb-hashtag {
   color: blue;
 }
 
+.sb-line-hr {
+  border-top: rgb(76, 75, 75) solid 1px;
+  margin-top: 1em;
+  margin-bottom: -1em;
+}
+
 .sb-hr {
-  background-color: #f5f5f5;
-  line-height: 0.9em;
-  display: block;
-  color: #8d8a8a;
+  font-weight: bold;
 }
 
 .sb-naked-url {
@@ -175,7 +200,11 @@
   color: #959595;
 }
 
-.sb-command-link {
+.sb-command-link.sb-meta {
+  color: #959595;
+}
+
+.sb-command-link-name {
   background-color: #e3dfdf;
   cursor: pointer;
   border-top: 1px solid silver;
@@ -320,7 +349,8 @@
 }
 
 .sb-task-marker {
-  background-color: #ddd;
+  color: #676767;
+  font-size: 91%;
 }
 
 .sb-line-comment {
@@ -392,4 +422,6 @@ html[data-theme="dark"] {
   .sb-command-link {
     background-color: #595959;
   }
+
+
 }