89 lines
1.1 KiB
CSS
89 lines
1.1 KiB
CSS
|
: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;
|
||
|
|
}
|