Reduce vertical jump for other blocks

web/styles/editor.scss

@@ -118,31 +118,39 @@
   }
 
   .cm-list-bullet {
-		position: relative;
-		visibility: hidden;
-	}
-	.cm-task-checked {
-	 	text-decoration: line-through !important;
+    position: relative;
+    visibility: hidden;
   }
 
-  .sb-checkbox > input[type=checkbox] {
+  .cm-task-checked {
+    text-decoration: line-through !important;
+  }
+
+  .sb-checkbox>input[type=checkbox] {
     width: 3ch;
   }
 
-	.cm-list-bullet::after {
-		visibility: visible;
-		position: absolute;
+  .cm-list-bullet::after {
+    visibility: visible;
+    position: absolute;
     color: rgb(150, 150, 150);
-		content: "\2022"; /* U+2022 BULLET */
-	}
+    content: "\2022";
+    /* U+2022 BULLET */
+  }
 
-  .sb-directive-start .sb-comment, .sb-directive-end .sb-comment {
+  .sb-directive-start .sb-comment,
+  .sb-directive-end .sb-comment {
     position: relative;
     left: -12px;
   }
 
-  .sb-line-frontmatter-outside, .sb-line-code-outside {
-    display: none;
+  .sb-line-frontmatter-outside,
+  .sb-line-code-outside {
+    .sb-meta {
+      color: transparent;
+    }
+
+    color: transparent;
   }
 
   .sb-blockquote-outside {
@@ -163,19 +171,20 @@
       width: 100%;
       border-spacing: 0;
     }
-    
+
     thead tr {
-        background-color: #333;
-        color: #eee;
-        font-weight: bold;
+      background-color: #333;
+      color: #eee;
+      font-weight: bold;
     }
-    
-    th, td {
-        padding: 8px;
+
+    th,
+    td {
+      padding: 8px;
     }
-    
+
     tbody tr:nth-of-type(even) {
-        background-color: #f3f3f3;
+      background-color: #f3f3f3;
     }
   }
 
@@ -183,13 +192,13 @@
     border-left: 1px solid rgb(74, 74, 74);
   }
 
-  .sb-line-blockquote.sb-line-ul.sb-line-li > .sb-quote.sb-meta:first-child {
+  .sb-line-blockquote.sb-line-ul.sb-line-li>.sb-quote.sb-meta:first-child {
     margin-left: -1ch;
   }
-  
+
 }
 
 .cm-scroller {
   // Give some breathing space at the bottom of the screen
   padding-bottom: 20em;
-}
+}

web/styles/theme.scss

@@ -374,11 +374,22 @@ sb-admonition-warning .sb-admonition-icon {
   color: rgb(255, 145, 0);
 }
 
+// Frontmatter
+
 .sb-frontmatter {
   background-color: rgba(255, 246, 189, 0.5);
   color: #676767;
 }
 
+.sb-frontmatter-marker {
+  color: #890000;
+  float: right;
+  font-size: 80%;
+  padding-right: 7px;
+  opacity: 0.25;
+}
+
+
 // Directives
 
 
@@ -416,7 +427,9 @@ sb-admonition-warning .sb-admonition-icon {
   .sb-directive-placeholder {
     color: var(--directive-font-color) !important;
     opacity: 0.25;
-    padding-left: 5ch;
+    padding-right: 7px;
+    float: right;
+    font-size: 80%;
   }
 
   * {
@@ -430,7 +443,9 @@ sb-admonition-warning .sb-admonition-icon {
   .sb-directive-placeholder {
     color: var(--directive-font-color) !important;
     opacity: 0.25;
-    padding-left: 5ch;
+    padding-right: 7px;
+    font-size: 80%;
+    float: right;
   }
 
   * {
@@ -446,6 +461,15 @@ sb-admonition-warning .sb-admonition-icon {
   font-weight: 900;
 }
 
+.sb-line-code-outside .sb-code-info {
+  display: block;
+  float: right;
+  color: #000;
+  opacity: .25;
+  font-size: 90%;
+  padding-right: 7px;
+}
+
 .sb-link {
   cursor: pointer;
 }