Your first website powered by haXe
I'm not going to make a course about CSS but just notice the specific HSS syntax : property variables, block variables, nested blocks, IE hacks
var myGrey1 = #CCC;
var myGrey2 = #999;
var noMargin = {margin: 0; padding: 0;}
var rounded = {border-radius: CSS('10px 10px 0px 0px'); -moz-border-radius: CSS('10px 10px 0px 0px'); -webkit-border-radius: CSS('10px 10px 0px 0px'); -khtml-border-radius: CSS('10px 10px 0px 0px');}
var shadow = {-webkit-box-shadow: CSS('#999 0 0 .25em'); -moz-box-shadow: CSS('#999 0 0 .25em'); box-shadow: CSS('#999 0 0 .25em');}
body{
$noMargin;
font-family: 'Arial';
text-align: justify;
color: #494B4F;
}
#header{
width: 840px;
height:60px;
margin:45px auto 0px auto;
padding:0;
color: #fff;
font-weight: bolder;
}
#content{
background: $myGrey1;
width: 960px;
min-height: 716px;
margin:-3px auto 0px auto;
}
.clear{
clear: both;
}
#footer{
background-color: #8a92a9;
width:100%;
height: 120px;
color: #FFF;
text-align: center;
padding:25px 0px 0px 0px;
float: left;
}
#menu{
float: right;
margin: 37px 0px 0px 380px;
z-index: 10;
}
#menu{
.itemMenu{
float: left;
text-align: center;
min-width: 90px;
margin-right: -5px;
a{
color: $myGrey2;
font-family:'Arial';
font-size:16px;
font-weight: bolder;
text-decoration: none;
cursor: hand;
$rounded;
background: #E0E0E0;
width: 82px;
text-align: center;
line-height: 16px;
padding: 4px 0px 0px 0px;
display: CSS('inline-block');
$shadow;
}
a:hover{
color: #E0E0E0;
background: $myGrey2;
}
}
}
#middleContent{
float: left;
margin: 40px 10px 30px 50px;
min-width: 650px;
max-width: 650px;
min-height: 400px;
padding: 30px 0px 0px 30px;
background: #EFEFEF;
}
#rightCol{
float: left;
width: 170px;
height: 100%;
margin: 40px 0px 0px 0px;
text-align: left;
background: $myGrey2;
ul{
margin: 0;
padding: 10px 0px 0px 0px;
list-style: none;
li{
text-align: center;
margin: 0px 0px 10px 0px;
padding: 0;
list-style-type: none;
}
li:hover{
cursor: pointer;
display: block;
background: #000;
}
}
}
Stay in /media directory and compile your hss file :
hss style.hss
A css file is going to be generated.
Now the best for the end, let's haXe !