[styles] code and pre reorganization and added language-terminal style

1 files changed, 42 insertions, 29 deletions

diff --git a/src/styles.csma b/src/styles.csma
index f3c5546..2585a63 100644
--- a/src/styles.csma
+++ b/src/styles.csma
@@ -441,40 +441,52 @@
 <Code> {
   /* The following CSS is a modified version of sindresorhus's github-markdown-css repo: https://github.com/sindresorhus/github-markdown-css */
   code, pre {
-    background-color: var(--pre-bg-color);
-    font-family: monospace;
-    font-size: 85%;
+      font-family: monospace;
+      font-size: 85%;
   }
-  pre {
-    overflow: auto;
-    padding: 0.9em;
-    word-break: normal;
-    word-wrap: normal;
-  }
-  code {
-    margin: 0;
-    padding: 0 0.4em;
-  }
-  pre code {
-    border: 0;
-    display: inline-block;
-    font-size: 100%;
-    overflow: visible;
-    padding: 0;
-    word-wrap: normal;
-  }
-  pre > code {
-    white-space: pre-wrap;
-    word-break: break-all;
-    padding-right: 0.9em;
+
+  <Pre elem> {
+    pre {
+      overflow: auto;
+      word-break: normal;
+      word-wrap: normal;
+    }
   }
-  table code {
-    font-size: 0.7em;
-    white-space: normal;
+
+  <Code elem> {
+    code {
+      background-color: var(--pre-bg-color);
+      margin: 0;
+      padding: 0 0.4em;
+    }
+    pre code {
+      border: 0;
+      display: inline-block;
+      font-size: 100%;
+      overflow: visible;
+      padding: 0;
+      word-wrap: normal;
+    }
+    pre > code {
+      white-space: pre-wrap;
+      word-break: break-all;
+      padding: 0.9em;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    table code {
+      font-size: 0.7em;
+      white-space: normal;
+    }
+    dd code { font-size: 0.8em; }
   }
-  dd code { font-size: 0.8em; }
 
   <Syntax highlighting> {}
+  .language-terminal {
+    color: white;
+    background-color: black;
+  }
 }
 
 <Table> {
@@ -545,6 +557,7 @@
       }
 
   pre, code { white-space: pre-wrap !important; }
+  .language-terminal { color: var(--fg-color); background-color: var(--bg-color); }
   .slide, .absolute-slide { transform: none !important; margin: 0; }
 }