f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-09 02:52:38 +00:00
Code Wiki Activity

New navbar is done for the homepage, looking really good

Browse Source
This commit is contained in:
Scott Tolksdorf
2016-05-03 23:47:55 -04:00
parent 1949a5cca5
commit e6a747210e
5 changed files with 195 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
shared/naturalCrit/nav/nav.less
View File

@@ -1,5 +1,88 @@
nav{
background-color: #333;
min-height : 25px;
}
@font-face {
font-family : CodeLight;
src : url('/assets/naturalCrit/logo/CODE Light.otf');
}
@font-face {
font-family : CodeBold;
src : url('/assets/naturalCrit/logo/CODE Bold.otf');
}
nav{
display : flex;
background-color : #333;
justify-content : space-between;
.navSection{
display : flex;
align-items : center;
}
.navLogo{
display : block;
margin-top : 0px;
margin-right : 8px;
margin-left : 8px;
color : white;
text-decoration : none;
&:hover{
.name{ color : @orange; }
svg{ fill : @orange }
}
svg{
height : 13px;
margin-right : 0.2em;
cursor : pointer;
fill : white;
}
span.name{
font-family : 'CodeLight';
font-size : 15px;
span.crit{
font-family : 'CodeBold';
}
small{
font-family : 'Open Sans';
font-size : 0.3em;
font-weight : 800;
text-transform : uppercase;
}
}
}
.navItem{
.animate(background-color);
padding : 5px 8px;
cursor : pointer;
background-color : #333;
font-size : 12px;
color : white;
text-decoration: none;
i{
margin-left : 5px;
}
&.tealLight:hover{ background-color : @tealLight };
&.teal:hover{ background-color : @teal };
&.greenLight:hover{ background-color : @greenLight };
&.green:hover{ background-color : @green };
&.blueLight:hover{ background-color : @blueLight };
&.blue:hover{ background-color : @blue };
&.purpleLight:hover{ background-color : @purpleLight };
&.purple:hover{ background-color : @purple };
&.steelLight:hover{ background-color : @steelLight };
&.steel:hover{ background-color : @steel };
&.yellowLight:hover{ background-color : @yellowLight };
&.yellow:hover{ background-color : @yellow };
&.orangeLight:hover{ background-color : @orangeLight };
&.orange:hover{ background-color : @orange };
&.redLight:hover{ background-color : @redLight };
&.red:hover{ background-color : @red };
&.silverLight:hover{ background-color : @silverLight };
&.silver:hover{ background-color : @silver };
&.greyLight:hover{ background-color : @greyLight };
&.grey:hover{ background-color : @grey };
}
.navSection + .navSection .navItem{
border-left : 1px solid #666;
}
}