Added new layout -0 also fuck vim it's the worst

dist/css/main.css

@@ -0,0 +1,88 @@
+:root{
+  --space1: 4%;
+  --textpadding1: 2% 4% 2% 4%;
+  --regText: 'Open Sans', sans-serif;
+  --fancyText: 'Orbitron', sans-serif;
+  --hoverBack: #cdf;
+  --hoverText: #821;
+}
+
+html, body{
+  margin:0;
+  padding:0;
+  background:#111;
+  color:#fff;
+  font-family: var(--fancyText);
+
+}
+
+.mainContainer{
+background:#111;
+display: flex;
+flex-direction: row;
+height:100vh;
+}
+
+/* Left Side */
+
+.leftColumn{
+  flex:4;
+  background:#333;
+  display:flex;
+  flex-direction: row;
+}
+
+.infoLeft{
+  flex:6;
+  background:#222;
+}
+
+.lcarsLeft{
+  background:#111;
+  flex:4;
+  display: flex;
+  flex-direction: column;
+  text-align: right;
+}
+
+.lcarsLeft div{
+  margin:var(--space1);
+  padding:var(--textpadding1);
+}
+
+.lcarsLeft div:hover{
+  background:var(--hoverBack);
+  color:var(--hoverText);
+}
+
+.lcarsLeftItem{
+  flex:1;
+  background:#99ccff;
+}
+.lcarsLeftItemBig{
+  flex:4;
+  background:#cc6699;
+}
+.lcarsLeftItemMed{
+  flex:2;
+  background:#ff9933;
+}
+
+/* Right Side */
+
+.rightContainer{
+  flex:10;
+  background: #111;
+  display:flex;
+  flex-direction: column;
+}
+
+.rightTop{
+  flex: 3;
+  background:#222;
+}
+
+.rightBottom{
+  flex: 6;
+  background:#333;
+}

src/InfoLeft.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class InfoLeft extends Component {
+  render(){
+    return(
+      <div className="infoLeft">
+        infoLeft
+      </div>
+    );
+  }
+}
+
+export default InfoLeft;

src/LCARSLeft.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+
+class LCARSLeft extends Component {
+  render(){
+    return(
+      <div className="lcarsLeft">
+        <div className="lcarsLeftItemBig">SYS DIRECTORY</div>
+        <div className="lcarsLeftItem">AUX DIRECTORY</div>
+        <div className="lcarsLeftItem">MED DIRECTORY</div>
+        <div className="lcarsLeftItem">COMMUNICATIONS</div>
+        <div className="lcarsLeftItemBig">SCI DIRECTORY</div>
+        <div className="lcarsLeftItem">ENG DIRECTORY</div>
+        <div className="lcarsLeftItem">STELLAR CHART</div>
+        <div className="lcarsLeftItem">PERSONNEL</div>
+        <div className="lcarsLeftItemMed">DATABASE</div>
+      </div>
+    );
+  }
+}
+
+export default LCARSLeft;

src/LeftColumn.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import LCARSLeft from './LCARSLeft';
+import InfoLeft from './InfoLeft';
+
+class LeftColumn extends Component {
+  render(){
+    return(
+      <div className="leftColumn">
+        <InfoLeft />
+        <LCARSLeft />
+      </div>
+    );
+  }
+}
+
+export default LeftColumn;

src/RightBottom.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class RightBottom extends Component {
+  render(){
+    return(
+      <div className="rightBottom">
+        right bottom
+      </div>
+    );
+  }
+}
+
+export default RightBottom;

src/RightContainer.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import RightTop from './RightTop';
+import RightBottom from './RightBottom';
+
+class RightContainer extends Component {
+  render(){
+    return(
+      <div className="rightContainer">
+        <RightTop />
+        <RightBottom />
+      </div>
+    );
+  }
+}
+
+export default RightContainer;

src/RightTop.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class RightTop extends Component {
+  render(){
+    return(
+      <div className="rightTop">
+        right top
+      </div>
+    );
+  }
+}
+
+export default RightTop;