Finalized Blocks for layout, need to vectories curvy lcars shit
This commit is contained in:
144
dist/css/main.css
vendored
144
dist/css/main.css
vendored
@@ -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);
|
||||
}
|
||||
|
Reference in New Issue
Block a user