Awesome frontmatter (#617)

Live Frontmatter Templates

web/styles/colors.scss

@@ -172,7 +172,8 @@
     color: var(--editor-heading-meta-color);
   }
 
-  .sb-hashtag {
+  .sb-hashtag,
+  .sb-markdown-frontmatter-widget span.hashtag {
     color: var(--editor-hashtag-color);
     background-color: var(--editor-hashtag-background-color);
     border: 1px solid var(--editor-hashtag-border-color);
@@ -313,6 +314,10 @@
     color: var(--editor-frontmatter-color);
   }
 
+  .sb-markdown-frontmatter-widget {
+    background-color: var(--editor-frontmatter-background-color);
+  }
+
   .sb-frontmatter-marker {
     color: var(--editor-frontmatter-marker-color);
   }

web/styles/editor.scss

@@ -429,7 +429,33 @@
     margin-top: 10px;
   }
 
+  .sb-markdown-frontmatter-widget {
+    margin-bottom: -1.3ch;
+    padding: 8px;
+
+    .sb-banner {
+      position: absolute;
+      right: 5px;
+      bottom: 5px;
+      font-size: 80%;
+      color: var(--editor-frontmatter-marker-color);
+    }
+
+    span.hashtag {
+      border-radius: 6px;
+      padding: 0 3px;
+      margin: 0 1px 0 0;
+      font-size: 0.9em;
+    }
+  }
+
+  .sb-markdown-frontmatter-widget+.sb-frontmatter {
+    background-color: transparent;
+    color: transparent;
+  }
+
   .sb-markdown-widget,
+  .sb-markdown-frontmatter-widget,
   .sb-markdown-top-widget:has(*),
   .sb-markdown-bottom-widget:has(*) {
     overflow-y: auto;
@@ -437,6 +463,7 @@
     border-radius: 5px;
     white-space: normal;
     position: relative;
+    min-height: 48px;
 
     ul,
     ol {
@@ -504,8 +531,7 @@
       background: var(--editor-widget-background-color);
       padding-inline: 3px;
       padding: 4px 0;
-      // border-radius: 0 5px;
-
+      border-radius: 0 0 0 5px;
 
       button {
         border: none;
@@ -553,12 +579,6 @@
     padding-right: 8px;
   }
 
-  .sb-frontmatter-marker {
-    float: right;
-    font-size: 80%;
-    padding-right: 7px;
-  }
-
   .cm-scroller {
     // Give some breathing space at the bottom of the screen
     padding-bottom: 20em;

web/styles/theme.scss

@@ -98,7 +98,7 @@ html {
   --editor-admonition-note-background-color: rgba(0, 184, 212, 0.1);
   --editor-admonition-warning-border-color: rgb(255, 145, 0);
   --editor-admonition-warning-background-color: rgba(255, 145, 0, 0.1);
-  --editor-frontmatter-background-color: rgba(255, 246, 189, 0.5);
+  --editor-frontmatter-background-color: rgba(255, 246, 189, 0.3);
   --editor-frontmatter-color: var(--subtle-color);
   --editor-frontmatter-marker-color: #89000080;
   --editor-widget-background-color: rgb(238, 238, 238);