Finalized Blocks for layout, need to vectories curvy lcars shit

dist/css/main.css

@@ -1,8 +1,32 @@
+@font-face {
+    font-family: 'LCARS';
+    src: url('./fonts/lcarsgtj3-webfont.eot');
+	src: url('./fonts/lcars.ttf') format('embedded-opentype'), url('/fonts/lcars.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'LCARS Lower';
+    src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/lcarsunknown.eot');
+	src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/lcarsunknown.eot#iefix') format('embedded-opentype'), url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/lcarsunknown.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'LCARS Block';
+    src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/LCARS-Block.eot');
+	src: url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/LCARS-Block.eot#iefix') format('embedded-opentype'), url('/web/20160330232832im_/http://lcarssdk.org/lcarssdk/fonts/LCARS-Block.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
 :root{
-  --space1: 4%;
-  --textpadding1: 2% 4% 2% 4%;
+  --space1: 5px;
+  --textpadding1: 5px 10px;
   --regText: 'Open Sans', sans-serif;
-  --fancyText: 'Orbitron', sans-serif;
+  --fancyText: 'LCARS', sans-serif;
   --hoverBack: #cdf;
   --hoverText: #821;
 }
@@ -13,7 +37,9 @@ html, body{
   background:#111;
   color:#fff;
   font-family: var(--fancyText);
-
+  font-weight: 500;
+  font-size:1.4em;
+  letter-spacing: 0.05em;
 }
 
 .mainContainer{
@@ -32,11 +58,44 @@ height:100vh;
   flex-direction: row;
 }
 
+/* Left Information Panel */
+
 .infoLeft{
+  display:flex;
+  flex-direction: column;
   flex:6;
   background:#222;
 }
 
+.leftTop{
+  flex:3;
+  background:#111;
+  text-align:center;
+}
+
+.logo{
+  width:60%;
+  padding-top:17%;
+}
+
+.leftInfo{
+  display: flex;
+  flex-direction: column;
+  flex:7;
+  background:#111;
+}
+
+.leftItem{
+  flex:1;
+  margin:var(--space1);
+  text-align: left;
+  border-radius: 10vh;
+  padding:2vh;
+  background: #9cf;
+}
+
+/* Left LCARS Panel (menu?) */
+
 .lcarsLeft{
   background:#111;
   flex:4;
@@ -50,10 +109,6 @@ height:100vh;
   padding:var(--textpadding1);
 }
 
-.lcarsLeft div:hover{
-  background:var(--hoverBack);
-  color:var(--hoverText);
-}
 
 .lcarsLeftItem{
   flex:1;
@@ -80,9 +135,80 @@ height:100vh;
 .rightTop{
   flex: 3;
   background:#222;
+  display: flex;
+  flex-direction: row;
+}
+
+.lcarsMiddleTop, .lcarsMiddleBottom{
+  background:#111;
+  flex:2;
+  display: flex;
+  flex-direction: column;
+}
+
+.lcarsMiddleItem{
+  background:#069;
+  margin:var(--space1);
+  padding:var(--textpadding1);
+  flex:2;
+}
+
+.lcarsMiddleElbow{
+  margin:var(--space1);
+  flex:2;
+
+}
+
+.dataTopRight{
+  flex:7;
+  background:#171717;
+  display: flex;
+  flex-direction: column;
+}
+
+.datatopRightUpper{
+  flex:7;
+}
+
+.lcarsHorizontalTop{
+  flex:1;
+  background:#111;
+}
+/* LCARS HORIZONTAL LINES */
+
+.lcarsHorizontalBottom{
+  flex:1;
+  background:#111;
+}
+
+.dataRightLower{
+  flex:9;
 }
 
 .rightBottom{
-  flex: 6;
+  flex: 5;
+  display: flex;
+  flex-direction: row;
   background:#333;
 }
+
+
+.dataBottomRight{
+  flex:7;
+  background:#171717;
+  display: flex;
+  flex-direction: column;
+}
+
+/* LCARS Middle Elbow */
+
+.lcarsElbow{
+  width:100%;
+}
+
+/* LCARS General Hover */
+
+.lcarsLeft div:hover, .leftItem:hover,.lcarsMiddleTop div:hover, .lcarsMiddleBottom div:hover{
+  background:var(--hoverBack);
+  color:var(--hoverText);
+}

dist/svg/lcarslbow.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW X8 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="16.9332mm" height="16.9332mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 1693 1693"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:#FF6600}
+   ]]>
+  </style>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path class="fil0" d="M1227 1087l458 0 0 196 -677 0 -555 0c-246,0 -445,-131 -445,-292l0 -580 1000 0 0 474c1,131 95,202 219,202z"/>
+ </g>
+</svg>

dist/svg/ps-final.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW X8 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="10.1598mm" height="10.1598mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 1016 1016"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:black}
+   ]]>
+  </style>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path class="fil0" d="M744 777c-35,0 -71,0 -113,0 0,31 0,60 0,88 -25,0 -49,0 -74,0 0,-28 0,-57 0,-85 -71,0 -134,0 -205,0 0,28 0,57 0,85 -24,0 -45,0 -70,0 0,-28 0,-57 0,-85 -39,0 -74,0 -109,0 0,-24 0,-49 0,-74 165,0 331,0 497,0 0,-28 0,-53 0,-81 -166,0 -332,0 -505,0 4,-102 -3,-205 11,-300 25,-148 166,-240 321,-222 138,14 247,141 251,282 0,25 0,53 0,81 -166,0 -332,0 -501,0 0,28 0,53 0,85 165,0 328,0 497,0 0,74 0,148 0,226zm-497 -388c141,0 278,0 419,0 -3,-85 -35,-148 -105,-187 -75,-43 -149,-39 -219,3 -64,43 -95,103 -95,184z"/>
+ </g>
+</svg>

dist/svg/ps.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW X8 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="10.1598mm" height="10.1598mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 1016 1016"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:#F8F23A}
+   ]]>
+  </style>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path class="fil0" d="M876 885c-45,0 -90,0 -144,0 0,40 0,76 0,113 -32,0 -64,0 -95,0 0,-37 0,-73 0,-109 -91,0 -172,0 -262,0 0,36 0,72 0,109 -32,0 -59,0 -91,0 0,-37 0,-73 0,-109 -49,0 -95,0 -140,0 0,-32 0,-63 0,-95 213,0 425,0 637,0 0,-36 0,-68 0,-104 -212,0 -424,0 -646,0 5,-131 -4,-262 14,-384 31,-190 212,-307 411,-285 176,18 316,181 321,362 0,31 0,68 0,104 -213,0 -425,0 -642,0 0,36 0,68 0,108 212,0 420,0 637,0 0,95 0,190 0,290zm-637 -498c181,0 357,0 538,0 -5,-108 -45,-189 -136,-239 -95,-54 -189,-50 -280,4 -81,55 -122,131 -122,235z"/>
+ </g>
+</svg>

src/InfoLeft.js

@@ -1,10 +1,21 @@
 import React, { Component } from 'react';
+// import logo from './svg/ps-final.svg';
 
 class InfoLeft extends Component {
   render(){
     return(
       <div className="infoLeft">
-        infoLeft
+        <div className="leftTop"><img src='./svg/ps.svg' alt="brotospace LCARS" className="logo"/></div>
+        <div className="leftInfo">
+          <div className="leftItem">make doubl</div>
+          <div className="leftItem">width like</div>
+          <div className="leftItem">in that</div>
+          <div className="leftItem">lcars pic</div>
+          <div className="leftItem">INSERT CLOCK HERE</div>
+          <div className="leftItem">here</div>
+          <div className="leftItem">yet</div>
+          <div className="leftItem">though</div>
+        </div>
       </div>
     );
   }

src/RightBottom.js

@@ -4,7 +4,18 @@ class RightBottom extends Component {
   render(){
     return(
       <div className="rightBottom">
-        right bottom
+
+        <div className="lcarsMiddleBottom">
+            <div className="lcarsMiddleElbow">Lcars Elbow</div>
+            <div className="lcarsMiddleItem">Lcars item</div>
+            <div className="lcarsMiddleItem">Lcars item</div>
+            <div className="lcarsMiddleItem">Lcars item</div>
+        </div>
+
+        <div className="dataBottomRight">
+          <div className="lcarsHorizontalBottom">lcars horiz</div>
+          <div className="dataRightLower">Main Data</div>
+        </div>
       </div>
     );
   }

src/RightTop.js

@@ -4,7 +4,18 @@ class RightTop extends Component {
   render(){
     return(
       <div className="rightTop">
-        right top
+
+        <div className="lcarsMiddleTop">
+          <div className="lcarsMiddleItem">Lcars item</div>
+          <div className="lcarsMiddleItem">Lcars item</div>
+          <div className="lcarsMiddleItem">Lcars item</div>
+          <div className="lcarsMiddleElbow">Lcars Elbow</div>
+        </div>
+
+        <div className="dataTopRight">
+          <div className="datatopRightUpper">Main Data</div>
+          <div className="lcarsHorizontalTop">lcars horiz</div>
+        </div>
       </div>
     );
   }

src/svg/ps-yellow.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW X8 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="10.1598mm" height="10.1598mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 1016 1016"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:#F8F23A}
+   ]]>
+  </style>
+ </defs>
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path class="fil0" d="M744 777c-35,0 -71,0 -113,0 0,31 0,60 0,88 -25,0 -49,0 -74,0 0,-28 0,-57 0,-85 -71,0 -134,0 -205,0 0,28 0,57 0,85 -24,0 -45,0 -70,0 0,-28 0,-57 0,-85 -39,0 -74,0 -109,0 0,-24 0,-49 0,-74 165,0 331,0 497,0 0,-28 0,-53 0,-81 -166,0 -332,0 -505,0 4,-102 -3,-205 11,-300 25,-148 166,-240 321,-222 138,14 247,141 251,282 0,25 0,53 0,81 -166,0 -332,0 -501,0 0,28 0,53 0,85 165,0 328,0 497,0 0,74 0,148 0,226zm-497 -388c141,0 278,0 419,0 -3,-85 -35,-148 -105,-187 -75,-43 -149,-39 -219,3 -64,43 -95,103 -95,184z"/>
+ </g>
+</svg>