Finalized Blocks for layout, need to vectories curvy lcars shit

This commit is contained in:
elijahlucian
2017-06-26 00:53:15 -06:00
parent 453182ea7a
commit 9e88608877
10 changed files with 243 additions and 12 deletions

144
dist/css/main.css vendored
View File

@@ -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);
}