Major directive refactor (#195)

Fixes #188 #144 #76: major refactor of directive parsing, rendering, styling

web/styles/editor.scss

@@ -135,17 +135,6 @@
     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-line-frontmatter-outside, .sb-line-code-outside {
     display: none;
   }
@@ -192,16 +181,6 @@
     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 {

web/styles/theme.scss

@@ -1,6 +1,8 @@
 #sb-root {
   --highlight-color: #464cfc;
+  --directive-color: #0000000f;
   --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --editor-font: "iA-Mono", "Menlo";
   font-family: var(--ui-font);
 }
 
@@ -28,7 +30,7 @@
 }
 
 .sb-notifications {
-  font-family: "iA-Mono";
+  font-family: var(--editor-font);
 }
 
 .sb-notifications > div {
@@ -108,7 +110,7 @@
 /* Editor */
 
 .cm-content {
-  font-family: "iA-Mono", "Menlo";
+  font-family: var(--editor-font);
 }
 
 .cm-selectionBackground {
@@ -225,7 +227,7 @@
 }
 
 .sb-command-button {
-  font-family: "iA-Mono";
+  font-family: var(--editor-font);
   font-size: 1em;
 }
 
@@ -299,20 +301,25 @@
   line-height: inherit;
 }
 
-.sb-line-fenced-code .sb-keyword {
-  color: #830000;
+.sb-keyword {
+  font-weight: bold;
 }
 
-.sb-line-fenced-code .sb-variableName {
-  color: #036d9b;
+.sb-variableName {
+  color: #024866;
 }
 
-.sb-line-fenced-code .sb-typeName {
+.sb-typeName {
   color: #038138;
 }
 
-.sb-line-fenced-code .sb-string,
-.sb-line-fenced-code .sb-string2 {
+.sb-string,
+.sb-string2,
+.sb-number {
+  color: #440377;
+}
+
+.sb-string {
   color: #440377;
 }
 
@@ -368,6 +375,64 @@ sb-admonition-warning .sb-admonition-icon {
   color: #676767;
 }
 
+// Directives
+
+.sb-directive-body {
+  border-left: 1px solid var(--directive-color);
+  border-right: 1px solid var(--directive-color);
+}
+
+.cm-line.sb-directive-start, .cm-line.sb-directive-end {
+  color: #5b5b5b;
+  background-color: rgb(233, 233, 233, 50%);
+  padding: 3px;
+}
+
+.sb-directive-start {
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  border-style: solid;
+  border-color: var(--directive-color);
+  border-width: 1px 1px 0 1px;
+}
+
+.sb-directive-end {
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  border-style: solid;
+  border-color: var(--directive-color);
+  border-width: 0 1px 1px 1px;
+}
+
+.sb-directive-start-outside {
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  border-style: solid;
+  border-color: var(--directive-color);
+  border-left-width: 1px;
+  border-top-width: 1px;
+  border-right-width: 1px;
+  border-bottom-width: 0;
+  padding-top: 5px !important;
+}
+
+.sb-directive-end-outside {
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  border-style: solid;
+  border-color: var(--directive-color);
+  border-left-width: 1px;
+  border-bottom-width: 1px;
+  border-right-width: 1px;
+  border-top-width: 0;
+  padding-bottom: 5px !important;
+}
+
+.sb-directive-end-outside.sb-directive-start-outside {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
+
 .sb-emphasis {
   font-style: italic;
 }
@@ -432,12 +497,6 @@ a.sb-wiki-link-page-missing, .sb-wiki-link-page-missing > .sb-wiki-link-page {
   background-color: rgba(255, 255, 0, 0.5);
 }
 
-.sb-comment {
-  color: #989797;
-  font-size: 75%;
-  line-height: 75%;
-}
-
 html[data-theme="dark"] {
   #sb-root {
     background-color: #555;