Styling of text and columns

src/styles/font.css

@@ -10,14 +10,17 @@ html, button {
 }
 
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
+
+code {
+    font-family: "JetBrains Mono", monospace;
+}
+
 pre code {
     border-radius: calc(var(--r) * 0.25);
     display: block;
     padding: calc(var(--pd) * 0.5);
     color: var(--highlight-color);
     background: var(--highlight-bg);
-
-    font-family: "JetBrains Mono", monospace;
     font-optical-sizing: auto;
     font-weight: 400;
     font-style: normal;

src/styles/highlight-js/tomorrow-night.css

@@ -0,0 +1,59 @@
+/* Tomorrow Night Theme */
+/* https://jmblog.github.io/color-themes-for-google-code-highlightjs */
+/* Original theme - https://github.com/chriskempson/tomorrow-theme */
+/* https://jmblog.github.io/color-themes-for-google-code-highlightjs */
+
+:root {
+  --color-comment: #969896;
+  --color-red: #cc6666;
+  --color-orange: #de935f;
+  --color-yellow: #f0c674;
+  --color-green: #b5bd68;
+  --color-aqua: #8abeb7;
+  --color-blue: #81a2be;
+  --color-purple: #b294bb;
+  --color-background: #1d1f21; /* Added for background */
+  --color-text: #c5c8c6;     /* Added for main text */
+}
+
+.tomorrow-comment, pre .comment, pre .title {
+  color: var(--color-comment);
+}
+
+.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
+  color: var(--color-red);
+}
+
+.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
+  color: var(--color-orange);
+}
+
+.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute {
+  color: var(--color-yellow);
+}
+
+.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
+  color: var(--color-green);
+}
+
+.tomorrow-aqua, pre .css .hexcolor {
+  color: var(--color-aqua);
+}
+
+.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
+  color: var(--color-blue);
+}
+
+.tomorrow-purple, pre .keyword, pre .javascript .function {
+  color: var(--color-purple);
+}
+
+pre code {
+  display: block;
+  background: var(--color-background);
+  color: var(--color-text);
+  font-family: Menlo, Monaco, Consolas, monospace;
+  line-height: 1.5;
+  border: 1px solid #ccc;
+  padding: 10px;
+}

src/styles/index.css

@@ -239,4 +239,19 @@ button.history-back {
     background: transparent;
     border: 0;
     cursor: pointer;
+}
+
+.colx2 {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--rh2);
+}
+
+.text {
+    --r-count: 2;
+    --r-factor: 0.75;
+}
+
+.text code {
+    color: var(--shade6);
 }