topbar elements rewrite

_src/_includes/header.html

@@ -1,27 +1,32 @@
 
-<div class="topbar">
+<div class="topbar container">
+    <div class="row">
         
-    <header role="banner" class="banner">
+        <header role="banner" class="banner">
-    	<h1 class="banner-title">
+        	<h1 class="banner-title">
-    	    <a class="banner-logo" class="hide-text" href="/">kremalicious</a>
+        	    <a class="banner-logo" href="/">kremalicious</a>
-    	</h1>
+        	</h1>
-    </header>
+        </header>
-    
-    <section class="site-search">
-        <a class="search-btn" href="#"><i class="icon-search"></i></a>
-        <input type="search" class="input-search search-field" placeholder="Search everything">
-        <div class="search-results nav-popover"></div>
-    </section>
 
-    <nav role="navigation" class="nav-main">
+        <nav role="navigation" class="nav-main">
-        <a class="menu-btn" href="#"><i class="icon-arrow-down"></i></a>
+            <a class="menu-btn" href="#"><i class="icon-arrow-down"></i></a>
-        <div class="nav-popover hide">
+            <div class="nav-popover hide">
-            <a class="nav-link" href="/goodies/">goodies</a>
+                <a class="nav-link" href="/goodies/">goodies</a>
-            <a class="nav-link" href="/photos/">photos</a>
+                <a class="nav-link" href="/photos/">photos</a>
-            <a class="nav-link" href="/personal/">personal</a>
+                <a class="nav-link" href="/personal/">personal</a>
-            <a class="nav-link" href="/design/">design</a>
+                <a class="nav-link" href="/design/">design</a>
-            <a class="nav-link" href="/photography/">photography</a>
+                <a class="nav-link" href="/photography/">photography</a>
-        </div>
+            </div>
-    </nav>
+        </nav>
-    
+        
+        <section class="site-search">
+            <a class="search-btn" href="#"><i class="icon-search"></i></a>
+            <div class="search-area">
+                <input type="search" class="input-search search-field" placeholder="Search everything">
+                <a class="search-close close" href="#">x</a>
+                <div class="search-results nav-popover"></div>
+            </div>
+        </section>
+        
+    </div>
 </div>

_src/_plugins/picture_tag.rb

@@ -139,9 +139,9 @@ module Jekyll
       end
 
       # Generate resized images
-      instance.each { |key, source|
+      # instance.each { |key, source|
-        instance[key][:generated_src] = generate_image(source, site.source, site.dest, settings['source'], settings['output'])
+#         instance[key][:generated_src] = generate_image(source, site.source, site.dest, settings['source'], settings['output'])
-      }
+#       }
 
       # Construct and return tag
       if settings['markup'] == 'picturefill'

_src/assets/js/app.js

@@ -29,18 +29,88 @@ $(window).load( AfterLoad = function() {
 var siteNavigation = {
     
     siteSearch: function() {
-        $('.search-field').simpleJekyllSearch({
+        
+        var $searchlink    = $('.search-btn'),
+            $searchpop     = $('.search-area'),
+            $searchfield   = $('.search-field'),
+            $searchresults = $('.search-results'),
+            $navpop        = $('.nav-main .nav-popover');
+        
+        // init jekyll search
+        $searchfield.simpleJekyllSearch({
             searchResults       : '.search-results',
             searchResultsTitle  : '',
             template            : '<a class="nav-link" href="{url}" title="{title}">{title}</a>',
         });
+        
+        $searchlink.click(function(e){
+            e.preventDefault();
+            
+            // show search
+            $searchpop.addClass('ready');
+            $searchfield.focus();
+            $searchresults.removeClass('hide');
+            
+            // hide menu too just in case
+            if ( $navpop.is(':visible') ) {
+                $navpop.addClass('hide');
+            }
+            
+            // bind the hide controls
+            $(document).bind('click.hidethepop', function() {
+                $searchpop.removeClass('ready');
+                $searchresults.addClass('hide');
+                
+                // unbind the hide controls
+                $(document).unbind('click.hidethepop');
+            });
+            
+            // dont close thepop when you click on thepop
+            $searchpop.click(function(e) {
+                e.stopPropagation();
+            });
+            
+            // and dont close thepop now 
+            e.stopPropagation();
+        });
+        
+        $('.search-close').click(function(e){
+            e.preventDefault();
+            
+            // hide search area
+            $searchpop.removeClass('ready');
+            $searchresults.addClass('hide');
+            
+            // empty search field
+            $searchfield.val('').blur();
+        });
     },
     
     siteMenu: function() {
-    	$('.menu-btn').click(function(e) {
+        var $thelink = $('.menu-btn'),
-    		e.preventDefault();
+            $thepop  = $('.nav-main .nav-popover');
-    	    $('.nav-main .nav-popover').toggleClass('show').toggleClass('hide');
+        
-    	});
+        $thelink.click(function(e){
+            e.preventDefault();
+            
+            // show menu
+            $thepop.addClass('show').removeClass('hide');
+            
+            // bind the hide controls
+            $(document).bind("click.hidethepop", function() {
+                    $thepop.removeClass('show').addClass('hide');
+                    // unbind the hide controls
+                    $(document).unbind("click.hidethepop");
+            });
+            
+            // dont close thepop when you click on thepop
+            $thepop.click(function(e) {
+                e.stopPropagation();
+            });
+            
+            // and dont close thepop now 
+            e.stopPropagation();
+        });
     },
     
 	init: function(){

_src/assets/less/mixins.less

@@ -8,12 +8,21 @@
 	display: block;
 	background-image: data-uri('../img/logo.png');
 	background-repeat: no-repeat;
-	background-position: center top;
+	background-position: left top;
+    width: 47px;
 	height: 31px;
     
+    @media @breakpoint2 {
+        width: 183px;
+    }
+    
     @media @highDPI {
     	background-image: url('../img/logo@2x.png');
-    	background-size: 128px 120px;
+    	background-size: 183px 31px;
+    }
+    @media print, (-webkit-min-device-pixel-ratio: 3), (min-resolution: 300dpi) {
+    	background-image: url('../img/logo@3x.png');
+    	background-size: 183px 31px;
     }
 }
 

_src/assets/less/navigation.less

@@ -2,47 +2,13 @@
 // NAVIGATION
 /////////////////////////////////////
 
-//
-// Topbar
-//
-.topbar {
-    .clearfix;
-    background: #f1f4f7;
-    padding: @line-height-computed/3 @line-height-computed;
-}
-
-
-//
-// Main Navigation
-//
-
-.nav-main {
-    position: relative;
-    float: right;
-    width: 5%;
-    
-    li { display: inline-block; }
-    
-    .nav-popover {
-        right: 0;
-        top: 100%;
-    }
-}
-
-.nav-link {
-    display: block;
-    padding: .5em 1em;
-    
-    &:hover {
-        background: rgba(255,255,255,.5);
-    }
-}
 
 .nav-popover {
     position: absolute;
+    top: 100%;
     z-index: 5; // so it's always above page content
     .border-bottom-radius;
-    background: rgba(255,255,255,.85);
+    background: #f1f4f7;
     box-shadow: 0 2px 7px rgba(0,0,0,.05);
 }
 
@@ -56,33 +22,77 @@
     margin: 0;
 }
 
+.nav-main,
+.site-search {
+    float: right;
+}
+
+//
+// Main Navigation
+//
+
+.nav-main {
+    li { display: inline-block; }
+    
+    .nav-popover {
+        top: 105%;
+        right: 0;
+        width: 50%;
+    }
+}
+
+.nav-link {
+    display: block;
+    padding: .5em 1em;
+    
+    &:hover {
+        background: rgba(255,255,255,.5);
+    }
+}
+
+
 //
 // Site Search
 //
 
 .site-search {
-    position: relative;    
+    margin-right: 4%;
-    clear: both;
-    width: 80%;
-    float: left;
     
-    @media @breakpoint2 {
+    .nav-popover {
-        clear: none;
-        margin-right: 1%;
-        width: 60%;
-    }
-    // loupe icon
-    .search-btn {
-        position: absolute;
         left: 0;
-        z-index: 2;
+        width: 100%;
+    }
+}
+
+.search-btn {
+
+}
+
+.search-close {
+    position: absolute;
+    right: 1em;
+    top: 1em;
+}
+
+.search-area {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: -3px;
+    z-index: 3;
+    background: #f1f4f7;
+    
+    // hidden by default
+    .translate(0, -60px);
+    .transition;
+    
+    &.ready {
+        .translate(0, 0);
     }
 }
 
 .search-field {
-    padding-left: 40px;
+    width: 97%;
-    position: relative;
-    width: 90%;
     border: none;
     .box-shadow(none);
     background: transparent;
@@ -96,8 +106,6 @@
 }
 
 .search-results {
-    left: 0;
-    width: 100%;
 }
 
 

_src/assets/less/scaffolding.less

@@ -7,16 +7,28 @@ body {
 	background: @body-bg;
 }
 
+//
+// Topbar
+//
+.topbar {
+    .clearfix;
+    background: #f1f4f7;
+    .row { 
+        margin-top: @line-height-computed/2;
+        margin-bottom: @line-height-computed/2;
+        position: relative;
+    }
+}
+
+
+//
 // Banner
-/////////////////////////////////////
+//
 
 .banner {
 	float: left;
-    width: 15%;
-    min-width: 160px;
     
 	.banner-title { 
-        width: 128px;
         margin-top: .1em;
         margin-bottom: 0;
 		// display toned down logo
@@ -30,8 +42,7 @@ body {
 		// repeat logo
 		// but display hover version
 		.logo;
-		background-position: center -61px;
+		background-position: left bottom;
-		width: 128px;
 
 		// hide by default
 		opacity: 0;
@@ -41,6 +52,26 @@ body {
 	}
 }
 
+//
+// close button
+//
+
+a.close,
+.close {
+    width: 16px;
+    height: 16px;
+    line-height: 12px;
+    font-size: 16px;
+    padding: 0;
+    .border-radius(16px);
+    text-align: center;
+    display: block;
+    background: @brand-grey-light;
+    color: #fff;
+    
+    &:hover { background: @link-color-hover }
+}
+
 
 // Footer
 /////////////////////////////////////