Added support for overriding CSS styles with STYLES page

web/styles/editor.scss

@@ -4,13 +4,12 @@
 
 #sb-main .cm-editor {
   font-size: 18px;
-  --max-width: 800px;
   height: 100%;
 
   .cm-content {
     margin-left: auto;
     margin-right: auto;
-    max-width: var(--max-width);
+    max-width: var(--#{"editor-width"});
     padding: 5px 20px;
   }
 

web/styles/main.scss

@@ -49,7 +49,8 @@
     max-width: 100%;
 
     .inner {
-      max-width: 800px;
+      // Hack to not have SCSS precompile this value but use proper CSS variables
+      max-width: var(--#{"editor-width"});
       margin: auto;
       font-size: 28px;
       padding: 10px 0;

web/styles/theme.scss

@@ -5,6 +5,7 @@
 
   --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";
+  --editor-width: 800px;
   font-family: var(--ui-font);
 }