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

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;
+      }
+    } 
+  }  
+}
+