parent
3bc7263322
commit
453182ea7a
8 changed files with 3815 additions and 0 deletions
@ -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; |
||||
} |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,13 @@ |
||||
import React, { Component } from 'react'; |
||||
|
||||
class InfoLeft extends Component { |
||||
render(){ |
||||
return( |
||||
<div className="infoLeft"> |
||||
infoLeft |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
export default InfoLeft; |
@ -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; |
@ -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; |
@ -0,0 +1,13 @@ |
||||
import React, { Component } from 'react'; |
||||
|
||||
class RightBottom extends Component { |
||||
render(){ |
||||
return( |
||||
<div className="rightBottom"> |
||||
right bottom |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
export default RightBottom; |
@ -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; |
@ -0,0 +1,13 @@ |
||||
import React, { Component } from 'react'; |
||||
|
||||
class RightTop extends Component { |
||||
render(){ |
||||
return( |
||||
<div className="rightTop"> |
||||
right top |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
export default RightTop; |
Loading…
Reference in new issue