some minor fixes

fonts/index.css

@@ -0,0 +1,35 @@
+@font-face {
+  font-family: "Victor Mono";
+  src: url("woff2/VictorMono-Regular.woff2") format("woff2"),
+       url("woff/VictorMono-Regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Victor Mono";
+  src: url("woff2/VictorMono-Italic.woff2") format("woff2"),
+       url("woff/VictorMono-Italic.woff") format("woff");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Victor Mono";
+  src: url("woff2/VictorMono-Bold.woff2") format("woff2"),
+       url("woff/VictorMono-Bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Victor Mono";
+  src: url("woff2/VictorMono-BoldItalic.woff2") format("woff2"),
+       url("woff/VictorMono-BoldItalic.woff") format("woff");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}

index.html

@@ -6,10 +6,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Topos</title>
     <link rel="stylesheet" href="/src/output.css" />
+    <link rel="stylesheet" href='/fonts/index.css' >
   </head>
   <style>
 
     body {
+      font-family: "Victor Mono";
       background-color: #111827;
 			overflow: hidden;
 			position: fixed;
@@ -31,7 +33,6 @@
       width: 100%;
 			height: 92vh;
       max-height: 100vh;
-
     }
 
     .cm-scroller {
@@ -105,7 +106,7 @@
     <div id="documentation" class="hidden">
       <div id="documentation-page" class="flex flex-row">
         <aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 bg-neutral-900 text-white">
-          <nav class="text-xl sm:text-sm overflow-y-scroll mb-12">
+          <nav class="text-xl sm:text-sm overflow-y-scroll mb-24">
             <div class="">
               <h2 class="font-semibold lg:text-xl text-gray-400">Basics</h2>
               <div class="flex flex-col">
@@ -145,7 +146,7 @@
             </div>
          </nav>
         </aside>
-        <div id="documentation-content" class="w-full flex-grow-1 h-screen overflow-y-scroll mx-2 my-2 break-words pb-20">
+        <div id="documentation-content" class="w-full flex-grow-1 h-screen overflow-y-scroll lg:px-12 mx-2 my-2 break-words pb-32">
         </div>
       </div>
     </div>

src/AppSettings.ts

@@ -108,8 +108,8 @@ export class AppSettings {
 
   public vimMode: boolean = false;
   public theme: string = "materialDark";
-  public font: string = "SpaceMono";
+  public font: string = "Victor Mono";
-  public font_size: number = 22;
+  public font_size: number = 24;
   public universes: Universes;
   public selected_universe: string = "Default";
   public line_numbers: boolean = true;

src/examples/excerpts.ts

@@ -1,5 +1,25 @@
 export const examples = [
   `
+// Super gentle computing - Bubobubobubo
+let melody = [30,30,34,35,37].palindrome()
+  .beat() + [0, -12].repeatAll(2).div(2)
+if (div(8, 75)) {
+  log('first section')
+  rhythm(.5, 4, 8) :: sound('ST12').n([0,1,2].div(0.5)).speed(0.5).out()
+  rhythm(.5, 6, 8) :: sound('ST20').n([0,1,2].div(0.5) + 20)
+    .speed(0.25).end(0.1).orbit(2).room(0.5).size(0.5).out()
+  mod(.5) :: sound('ST01').note(melody)
+    .n($(1)).speed(0.5).room(0.5).size(0.5).out()  
+} else {
+  log('second section')
+  rhythm(.5, 2, 8) :: sound('ST20')
+    .n([0,1,2].div(0.5)).speed(0.5)
+    .end(0.1).out()
+  mod(.5) :: sound('ST01').note(melody).n($(1)).speed(0.5).end(0.1).out()  
+  mod(1) :: sound('ST02').note(melody).n($(1)).speed(0.5).end(0.1).out() 
+}
+  `,
+  `
 // Race day - Bubobubobubo
 bpm(125);
 mod(.5) :: sound('STB6')

src/main.ts

@@ -236,10 +236,13 @@ export class Editor {
     this.fontSize = new Compartment();
     const vimPlugin = this.settings.vimMode ? vim() : [];
     const lines = this.settings.line_numbers ? lineNumbers() : [];
-    const fontSizeModif = EditorView.theme({
+    const fontModif = EditorView.theme({
       "&": {
         fontSize: `${this.settings.font_size}px`,
       },
+      $content: {
+        fontFamily: `${this.settings.font}, Menlo, Monaco, Lucida Console, monospace`,
+      },
       ".cm-gutters": {
         fontSize: `${this.settings.font_size}px`,
       },
@@ -247,7 +250,7 @@ export class Editor {
 
     this.editorExtensions = [
       this.withLineNumbers.of(lines),
-      this.fontSize.of(fontSizeModif),
+      this.fontSize.of(fontModif),
       this.vimModeCompartment.of(vimPlugin),
       editorSetup,
       oneDark,
@@ -529,7 +532,8 @@ export class Editor {
       this.font_size_witness.innerHTML = `Font Size: ${new_value}px`;
 
       let new_font_size = EditorView.theme({
-        "&": { fontSize: new_value + "px" },
+        "&": { fontSize: new_value + "px", fontFamily: this.settings.font },
+        "&content": { fontFamily: this.settings.font },
         ".cm-gutters": { fontSize: new_value + "px" },
       });
       this.view.dispatch({

src/themes/materialDark.ts

@@ -2,6 +2,7 @@ import { EditorView } from "@codemirror/view";
 import { Extension } from "@codemirror/state";
 import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
 import { tags as t } from "@lezer/highlight";
+import { }
 
 const base00 = "#171717",
   base01 = "#505d64",
@@ -37,21 +38,19 @@ export const materialDarkTheme = EditorView.theme(
     "&": {
       color: base05,
       backgroundColor: background,
-      fontSize: "24px",
+      fontSize: "48px",
+      font: "'Victor Mono', monospace",
     },
-
     ".cm-content": {
       caretColor: cursor,
+      fontFamily: "'Victor Mono', monospace",
     },
-
     ".cm-cursor, .cm-dropCursor": { borderLeftColor: cursor },
     "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
       { backgroundColor: selection, border: `0.5px solid ${base_teal}` },
-
     ".cm-panels": { backgroundColor: darkBackground, color: base03 },
     ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
     ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
-
     ".cm-searchMatch": {
       outline: `1px solid ${base_yellow}`,
       backgroundColor: "transparent",