initial commit

frontend/src/css/app.scss

@@ -0,0 +1,105 @@
+.App {
+  background: black;
+  color: white;
+  font-size: 1.2rem;
+
+  display: grid;
+  grid-template-columns: auto 33%;
+  grid-template-rows: 3.5rem auto 0px;
+  grid-template-areas: 
+      "header header"
+      "main side"
+      "main side"
+      "footer footer";
+  height: 100vh;
+
+  > div {
+    overflow: auto;
+  }
+
+  > .App-main {
+      grid-area: main;
+  }
+  > .App-side {
+      grid-area: side;
+      overflow: auto;
+  }
+  > .App-header {
+      grid-area: header;
+  }
+
+  > .App-footer {
+      grid-area: footer;
+  }
+}
+
+.App-header {
+  > h1 {
+    color: red;
+  }
+}
+
+.App-main {
+  display: flex;
+}
+
+.App-main > * {
+  width: 33%;
+}
+
+.StreamControl {
+  display: flex;
+  flex-direction: column;
+  /* width: 200px; */
+}
+.Meters {
+  padding: 10px;
+  display: flex;
+  max-height: 100%;
+  > svg {
+  }
+}
+
+.Log {
+  font-size: .9rem;
+  padding: 0;
+  margin: 0;
+  overflow-y: auto;
+}
+.Log li {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ToggleButton {
+  border: none;
+  outline: none;
+  background: #666;
+  padding: 2rem;
+  font-size: 3rem;
+  cursor: pointer;
+  color: #fff;
+  font-size: 2rem;
+  font-weight: bold;
+  margin: 5px;
+  &:hover {
+    background: #888;
+    color: #ffe;
+  }
+  &.ToggleButton-active {
+    background: #0c2;
+  }
+}
+
+.StatusBar {
+  display: flex;
+  > * {
+    display: block;
+    margin-right: 1rem;
+  }
+}
+
+.Error {
+  color: #f66;
+}

frontend/src/css/index.scss

@@ -0,0 +1,2 @@
+@import './reset.css';
+@import './app.scss';

frontend/src/css/reset.css

@@ -0,0 +1,30 @@
+html {
+  box-sizing: border-box;
+  font-size: 16px;
+  height: 100%;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  height: 100%;
+}
+
+body, h1, h2, h3, h4, h5, h6, p, ol, ul {
+  margin: 0;
+  padding: 0;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}