Basic logo image

static/cranefly/css/cranefly.css

@@ -650,7 +650,7 @@ button.btn.btn-mini,input[type="submit"].btn.btn-mini{*padding-top:1px;*padding-
 .navbar-inner:after{clear:both;}
 .navbar .container{width:auto;}
 .nav-collapse.collapse{height:auto;overflow:visible;}
-.navbar .brand{float:left;display:block;padding:15px 20px 15px;margin-left:-20px;font-size:20px;font-weight:200;color:#0088cc;text-shadow:0 1px 0 #ffffff;}.navbar .brand:hover,.navbar .brand:focus{text-decoration:none;}
+.navbar .brand{float:left;display:block;padding:15px 20px 15px;margin-left:-20px;font-size:20px;font-weight:200;color:#c24a3b;text-shadow:0 1px 0 #ffffff;}.navbar .brand:hover,.navbar .brand:focus{text-decoration:none;}
 .navbar-text{margin-bottom:0;line-height:50px;color:#777777;}
 .navbar-link{color:#777777;}.navbar-link:hover,.navbar-link:focus{color:#333333;}
 .navbar .divider-vertical{height:50px;margin:0 9px;border-left:1px solid #f3f3f3;border-right:1px solid #ffffff;}
@@ -853,7 +853,8 @@ a.label:hover,a.label:focus,a.badge:hover,a.badge:focus{color:#ffffff;text-decor
 footer{background-color:#eeeeee;border-top:1px solid #dadada;height:80px;padding:11px 19px;}footer hr{border-bottom:1px solid #dadada;margin:10px 0px;}
 footer .credits{color:#555555;font-size:90%;}footer .credits a:link,footer .credits a:active,footer .credits a:visited,footer .credits a:hover{color:#555555;}
 .header-primary{background-color:#e7e7e7;border-bottom:1px solid #d7d7d7;margin:0px;margin-top:0px;padding-top:10px;}.header-primary h1{color:#555555;font-size:35px;font-weight:normal;}
-.navbar .navbar-inner{background:none;background-color:#f3f3f3;border-bottom:1px solid #dfdfdf;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.navbar .navbar-inner .brand{text-shadow:none;}.navbar .navbar-inner .brand:link,.navbar .navbar-inner .brand:active,.navbar .navbar-inner .brand:visited,.navbar .navbar-inner .brand:hover{color:#0088cc;font-size:200%;}.navbar .navbar-inner .brand:link span,.navbar .navbar-inner .brand:active span,.navbar .navbar-inner .brand:visited span,.navbar .navbar-inner .brand:hover span{color:#c0c0c0;}
+.navbar .navbar-inner{background:none;background-color:#f3f3f3;border-bottom:1px solid #dfdfdf;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.navbar .navbar-inner .container{background:url("../img/logo.png");background-position:left center;background-repeat:no-repeat;}
+.navbar .navbar-inner .brand{margin-left:21px;text-shadow:none;}.navbar .navbar-inner .brand:link,.navbar .navbar-inner .brand:active,.navbar .navbar-inner .brand:visited,.navbar .navbar-inner .brand:hover{color:#c24a3b;font-size:200%;}.navbar .navbar-inner .brand:link span,.navbar .navbar-inner .brand:active span,.navbar .navbar-inner .brand:visited span,.navbar .navbar-inner .brand:hover span{color:#c0c0c0;}
 .navbar .navbar-inner .navbar-search-form{background-color:#ffffff;border:1px solid #dfdfdf;border-radius:3px;margin-top:9px;color:#333333;}.navbar .navbar-inner .navbar-search-form input{border:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;margin:0px;}
 .navbar .navbar-inner .navbar-search-form button{margin:0px;opacity:0.3;filter:alpha(opacity=30);}.navbar .navbar-inner .navbar-search-form button:hover,.navbar .navbar-inner .navbar-search-form button:active{opacity:0.8;filter:alpha(opacity=80);}
 .navbar .navbar-inner .navbar-blocks{margin-left:6px;}.navbar .navbar-inner .navbar-blocks li{margin-left:6px;}.navbar .navbar-inner .navbar-blocks li form{margin:0px;padding:0px;}

static/cranefly/css/cranefly/navbar.less

@@ -8,7 +8,15 @@
     border-bottom: 1px solid @navbarBorder;
     .box-shadow(none);
 
+    .container {
+      background: url(@navbarLogoImage);
+      background-position: left center;
+      background-repeat: no-repeat;
+    }
+
     .brand {
+      margin-left: @navbarLogoWidth - @baseFontSize;
+
       text-shadow: none;
 
       &:link, &:active, &:visited, &:hover {

static/cranefly/css/variables.less

@@ -218,7 +218,9 @@
 @navbarLinkBackgroundHover:       transparent;
 @navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);
 
-@navbarBrandColor:                @linkColor;
+@navbarLogoImage:                 "../img/logo.png";
+@navbarLogoWidth:                 35px;
+@navbarBrandColor:                desaturate(@red, 10%);
 @navbarMottoColor:                darken(@navbarBackground, 20%);
 
 // Inverted navbar