make-ast-diagram - more style tweaks

Author: cscheid

src/resources/tools/ast-diagram/ast-diagram.ts

@@ -194,7 +194,7 @@ function processMetaMap(
   const map = value.c;
 
   let html = `<div class="meta-map">
-    <div class="meta-type">Map</div>
+    <div class="meta-type">MetaMap</div>
     <div class="meta-content">`;
 
   for (const [key, mapValue] of Object.entries(map)) {
@@ -220,7 +220,7 @@ function processMetaList(
   const list = value.c;
 
   let html = `<div class="meta-list">
-    <div class="meta-type">List</div>
+    <div class="meta-type">MetaList</div>
     <div class="meta-content">
       <ul class="meta-list-items">`;
 
@@ -245,7 +245,7 @@ function processMetaBlocks(
   const blocks = value.c;
 
   const html = `<div class="meta-blocks">
-    <div class="meta-type">Blocks</div>
+    <div class="meta-type">MetaBlocks</div>
     <div class="meta-content">${processBlocks(blocks, mode)}</div>
   </div>`;
 

src/resources/tools/ast-diagram/style.css

@@ -156,11 +156,11 @@ body {
 }
 
 .meta-type {
+  font-family: "Inconsolata", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
   font-size: 0.85em;
   color: #777;
   margin-bottom: 5px;
   font-weight: 600;
-  text-transform: uppercase;
 }
 
 .meta-map-entry {
@@ -209,13 +209,13 @@ pre {
   background-color: #f5f5f5;
   padding: 10px;
   border-radius: 3px;
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-family: "Inconsolata", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
   font-size: 0.9em;
   overflow-x: auto;
 }
 
 code {
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-family: "Inconsolata", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
   padding: 2px 4px;
   border-radius: 3px;
   font-size: 0.9em;
@@ -245,10 +245,10 @@ code {
 }
 
 .inline-type {
+  font-family: "Inconsolata", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
   font-weight: 600;
   color: #666;
-  font-size: 0.6em;
-  text-transform: uppercase;
+  font-size: 0.8em;
   display: inline;
   align-items: center;
   cursor: pointer;
@@ -311,19 +311,28 @@ div.folded .inline-type.inline-type-no-content-folded-only {
 }
 
 .inline-title::before {
+  font-size: 0.75em;
+  position: relative;
+  top: -0.125em;
   content: "Title: ";
   font-weight: 600;
   color: #666;
 }
 
 .inline-alt-text::before {
+  font-size: 0.75em;
+  position: relative;
+  top: -0.125em;
   content: "Alt: ";
   color: #666;
   margin-right: 4px;
   margin-left: 4px;
 }
 
 .inline-text-content::before {
+  font-size: 0.75em;
+  position: relative;
+  top: -0.125em;
   content: "Text: ";
   color: #666;
   margin-right: 4px;
@@ -372,6 +381,10 @@ div.folded .inline-type.inline-type-no-content-folded-only {
   border-color: #c9e7c9;
 }
 
+.inline-str {
+  padding-right: 5px;
+}
+
 a {
   color: #337ab7;
   text-decoration: none;
@@ -479,19 +492,22 @@ h2 {
 }
 
 .language-markdown {
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-family: "Inconsolata", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
   font-size: 0.75em;
   top: -0.125em;
   position: relative;
 }
 
 /* Node attribute styling */
 .node-id, .node-classes, .node-attrs {
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-family: "Inconsolata", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
   font-size: 0.85em;
   border-radius: 3px;
   display: inline-block;
   padding: 0 4px;
-  text-transform: none;
   color: #666;
+}
+
+div.meta-map-key, div.meta-map-value, div.metadata-key, div.metadata-value {
+  display: inline-block;
 }