separate out styles for markdowneditor; convert mainlayout style module styles to just sass; add style to stream title editor in header;

web/styles/globals.scss

@@ -36,48 +36,13 @@ code {
 }
 
 
-// markdown editor overrides
-
-.rc-virtual-list-scrollbar {
-  display: block !important;
-}
-.rc-md-editor {
-  // Set the background color of the preview container
-  .editor-container {
-    background-color: #E2E8F0;
-    color: rgba(45,55,72,1);
-  }
-
-  // Custom CSS for formatting the preview text
-  .markdown-editor-preview-pane {
-    // color:lightgrey;
-    a {
-      color: var(--owncast-purple);;
-    }
-    h1 {
-      font-size: 2em;
-    }
-  }
-
-  // Custom CSS class used to format the text of the editor
-  .markdown-editor-pane {
-    color: white !important;
-    background-color: black;
-    font-family: monospace;
-  }
-
-  // Set the background color of the editor text input
-  textarea {
-    background-color: rgb(44,44,44) !important;
-    color:lightgrey !important;
-  }
-.ant-btn {
-  transition-duration: .15s;
-  transition-delay: 0s;
+.logo-svg {
+  height: 2rem;
+  width: 2rem;
 }
 
-  // Hide extra toolbar buttons.
-  .button-type-undo, .button-type-redo, .button-type-clear, .button-type-image, .button-type-wrap, .button-type-quote, .button-type-strikethrough, .button-type-code-inline, .button-type-code-block {
-    display: none !important;
-  }
+p.page-description {
+  margin: 1em 0;
+  color: #ccc; 
+  width: 80%;
 }

web/styles/main-layout.scss

@@ -0,0 +1,138 @@
+.app-container {
+  
+  .side-nav {
+    position: fixed;
+    height: 100vh;
+    overflow: auto;
+    z-index: 10;
+  }
+
+  h1.owncast-title {
+    padding: 1rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    .logo-container {
+      background-color: #fff;
+      padding: .35rem;
+      border-radius: 9999px;
+    }
+
+    .title-label {
+      display: inline-block;
+      margin-left: 1rem;
+      color: rgba(203,213,224, 1);
+      font-size: 1.15rem;
+      font-weight: 200;
+      text-transform: uppercase;
+      line-height: normal;
+      letter-spacing: .05em;
+    }
+  }
+
+  .layout-main {
+    margin-left: 240px; // width of Ant Sider
+  }
+  .layout-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    padding-right: 1rem;
+  }
+
+
+  .main-content-container {
+    padding: 3em;
+  }
+
+  .footer-container {
+    text-align: center;
+  }
+
+
+
+  .online-status-indicator {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    .online-thumbnail {
+      width: 12.5rem;
+    }
+
+    .status-label {
+      color: #fff;
+      text-transform: uppercase;
+      font-size: .75rem;
+      display: inline-block;
+      margin-right: .5rem;
+      color: #999;
+    }
+    .status-icon {
+      font-size: 1.5rem;
+      svg {
+        fill: #999;
+      }
+    }
+  }
+  .online {
+    .online-status-indicator {
+      .status-icon {
+        svg {
+          fill: var(--online-color);
+        }
+      }
+      .status-label {
+        color: var(--online-color);
+      }
+    }
+  }
+}
+
+
+// stream title form field in header
+.global-stream-title-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  .textfield-with-submit-container {
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 0;
+
+    .input-side {
+      width: 400px;
+    }
+
+    .label-side {
+      display: none;
+    }
+    .lower-container {
+      width: auto;
+      .lower-content {
+        flex-direction: column-reverse;
+        position: relative;
+      }
+      .label-spacer,
+      .field-tip {
+        display: none;
+      }
+      .status-container {
+        line-height: 1;
+        position: absolute;
+        bottom: -2em;
+      }
+      .update-button-container {
+        margin: 0;
+        margin-left: .5em;
+        line-height: 1;
+      }
+    } 
+  }  
+}
+

web/styles/markdown-editor.scss

@@ -0,0 +1,46 @@
+
+// markdown editor overrides
+
+.rc-virtual-list-scrollbar {
+  display: block !important;
+}
+.rc-md-editor {
+  // Set the background color of the preview container
+  .editor-container {
+    background-color: #E2E8F0;
+    color: rgba(45,55,72,1);
+  }
+
+  // Custom CSS for formatting the preview text
+  .markdown-editor-preview-pane {
+    // color:lightgrey;
+    a {
+      color: var(--owncast-purple);;
+    }
+    h1 {
+      font-size: 2em;
+    }
+  }
+
+  // Custom CSS class used to format the text of the editor
+  .markdown-editor-pane {
+    color: white !important;
+    background-color: black;
+    font-family: monospace;
+  }
+
+  // Set the background color of the editor text input
+  textarea {
+    background-color: rgb(44,44,44) !important;
+    color:lightgrey !important;
+  }
+.ant-btn {
+  transition-duration: .15s;
+  transition-delay: 0s;
+}
+
+  // Hide extra toolbar buttons.
+  .button-type-undo, .button-type-redo, .button-type-clear, .button-type-image, .button-type-wrap, .button-type-quote, .button-type-strikethrough, .button-type-code-inline, .button-type-code-block {
+    display: none !important;
+  }
+}

web/styles/styles.module.scss

@@ -1,9 +1,4 @@
 
-.logoSVG {
-  height: 2rem;
-  width: 2rem;
-}
-
 .owncastTitleContainer {
   padding: 1rem;
   display: flex;