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