Use logo as brand image

_includes/header.html

@@ -4,8 +4,8 @@
         <div class="intro-text">
             <div class="intro-lead-in">Event Management App Tailored to</div>
             <div class="intro-heading">Free Software Conferences</div>
+            <a href="http://demo.osem.io" class="btn btn-xl">Try It</a>
             <a href="https://github.com/openSUSE/osem/archive/master.zip" class="btn btn-xl">Download</a>
         </div>
     </div>
 </header>
-

_includes/navigation.html

@@ -9,8 +9,9 @@
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
-            <a class="navbar-brand page-scroll hidden-xs hidden-sm" href="#page-top">{{site.title}}</a>
-            <a class="navbar-brand page-scroll visible-xs visible-sm" href="#page-top">OSEM</a>
+            <a class="navbar-brand page-scroll" href="#page-top">
+              <img src="img/logo.png" class="osem-logo" alt="OSEM Logo">
+            </a>
         </div>
         <!-- Collect the nav links, forms, and other content for toggling -->
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

css/osem.css

@@ -1,3 +1,25 @@
+.osem-logo {
+  height: 30px;
+}
+
+.osem-logo-shrink {
+  height: 30px;
+}
+
+@media(min-width:767px) {
+  .osem-logo {
+    height: 60px;
+    margin-left: 25px;
+  }
+}
+
+@media(min-width:1023px) {
+  .osem-logo {
+    height: 120px;
+    margin-left: 25px;
+  }
+}
+
 section.post:nth-of-type(1) {
   margin-top: 160px;
 }
@@ -80,4 +102,4 @@ section#comments {
     letter-spacing: 0.01rem;
     line-height: 1.5;
   }
-}
+}

js/cbpAnimatedHeader.js

@@ -4,7 +4,7 @@
  *
  * Licensed under the MIT license.
  * http://www.opensource.org/licenses/mit-license.php
- * 
+ *
  * Copyright 2013, Codrops
  * http://www.codrops.com
  */
@@ -12,6 +12,7 @@ var cbpAnimatedHeader = (function() {
 
 	var docElem = document.documentElement,
 		header = document.querySelector( '.navbar-fixed-top' ),
+		logo = document.querySelector( '.osem-logo' ),
 		didScroll = false,
 		changeHeaderOn = 300;
 
@@ -28,9 +29,13 @@ var cbpAnimatedHeader = (function() {
 		var sy = scrollY();
 		if ( sy >= changeHeaderOn ) {
 			classie.add( header, 'navbar-shrink' );
+			classie.add( logo, 'osem-logo-shrink' );
+			classie.remove( logo, 'osem-logo' );
 		}
 		else {
 			classie.remove( header, 'navbar-shrink' );
+			classie.add( logo, 'osem-logo' );
+			classie.remove( logo, 'osem-logo-shrink' );
 		}
 		didScroll = false;
 	}
@@ -41,4 +46,4 @@ var cbpAnimatedHeader = (function() {
 
 	init();
 
-})();
+})();