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 !

(136 times)