final menu, final search

_src/_includes/header.html

@@ -24,7 +24,6 @@
             <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>
         

_src/_layouts/base.html

@@ -13,6 +13,12 @@
 
     </section>
     
+    <div class="popover container hide">
+        <div class="row">
+            <div class="search-results"></div>
+        </div>
+    </div>
+    
 </body>
     
 {% include footer.html %}

_src/assets/js/app.js

@@ -17,10 +17,10 @@ var siteNavigation = {
     siteSearch: function() {
         
         var $searchlink    = $('.search-btn'),
-            $searchpop     = $('.search-area'),
+            $searcharea     = $('.search-area'),
             $searchfield   = $('.search-field'),
             $searchresults = $('.search-results'),
-            $navpop        = $('.nav-main .nav-popover');
+            $searchpop        = $('.popover');
         
         // init jekyll search
         $searchfield.simpleJekyllSearch({
@@ -33,9 +33,11 @@ var siteNavigation = {
             e.preventDefault();
             
             // show search
-            $searchpop.addClass('ready');
+            $searcharea.addClass('ready');
             $searchfield.focus();
-            $searchresults.removeClass('hide');
+            if ( $searchfield.val().length ) {
+                $searchpop.removeClass('hide');
+            }
             
             // hide menu too just in case
             if ( $('body').hasClass('menu-open') ) {
@@ -44,8 +46,8 @@ var siteNavigation = {
             
             // bind the hide controls
             $(document).bind('click.hidethepop', function() {
-                $searchpop.removeClass('ready');
+                $searcharea.removeClass('ready');
-                $searchresults.addClass('hide');
+                $searchpop.addClass('hide');
                 
                 // unbind the hide controls
                 $(document).unbind('click.hidethepop');
@@ -60,12 +62,18 @@ var siteNavigation = {
             e.stopPropagation();
         });
         
+        // finally show popup upon first keypress
+        $searchfield.on('keyup', function() {
+            $searchpop.removeClass('hide');
+        });
+        
+        // close button
         $('.search-close').click(function(e){
             e.preventDefault();
             
             // hide search area
-            $searchpop.removeClass('ready');
+            $searcharea.removeClass('ready');
-            $searchresults.addClass('hide');
+            $searchpop.addClass('hide');
             
             // empty search field
             $searchfield.val('').blur();

_src/assets/less/navigation.less

@@ -36,7 +36,6 @@
     li { display: inline-block; }
     
     .nav-popover {
-        background: @body-bg;
         padding: @line-height-computed*1.5 0;
         width: 100%;
         .clearfix;
@@ -53,14 +52,14 @@
             text-transform: uppercase;
             font-size: .8em;
             
-            // the icon
+            // the icons
             &:before {
                 display: block;
                 width: 100%;
                 text-align: center;
                 font-size: 32px;
                 height: 32px;
-                color: lighten(@text-color-dimmed, 10%);
+                color: lighten(@text-color-dimmed, 5%);
                 .transition;
             }
             
@@ -137,6 +136,34 @@
 }
 
 .search-results {
+    .clearfix;
+    
+    .nav-link {
+        @media @breakpoint2 {
+            width: 50%;
+            float: left;
+        }
+    }
+}
+
+.popover {
+    position: absolute;
+    left: 0;
+    top: 71px;
+    z-index: 6;
+    
+    background: lighten(@page-bg, 3%);
+    border-bottom: 1px solid rgba(255,255,255,.7);
+    box-shadow: 0 1px 4px fade(@brand-dark, 10%);
+    
+    @media @breakpoint2 { 
+        top: 0;
+        
+        .row { 
+            margin-top: @line-height-computed;
+            margin-bottom: @line-height-computed
+        }
+    }
 }
 
 

_src/assets/less/scaffolding.less

@@ -7,6 +7,8 @@ body {
 	background-color: @body-bg;
 }
 
+.document { position: relative }
+
 
 //
 // Topbar
@@ -187,33 +189,42 @@ a.close,
 // topbar and footer as fixed 
 // site background
 //
+.topbar {
+    height: 71px;
+    
+    .menu-open & {
+        height: auto
+    }
+}
+.document {
+    background-color: @page-bg;
+}
 
 @media @breakpoint2 {
     body {
         position: relative
     } 
-    section[role=document] {
+    .document {
-    	background-color: @page-bg;
+        z-index: 2;
         margin-top: 71px;
         .transition;
+        
         .menu-open & {
             margin-top: 300px;
         }
         margin-bottom: 380px;
-        position: relative;
+        
-        z-index: 2;
         border-top: 1px solid rgba(255,255,255,.7);
         border-bottom: 1px solid rgba(255,255,255,.7);
         box-shadow: 0 1px 4px fade(@brand-dark, 10%), 0 -1px 4px fade(@brand-dark, 10%);
     }
     .topbar,
     .footer {
-        position: fixed;
         z-index: 1;
+        position: fixed;
         border: none;
     }
     .topbar {
-        min-height: 71px;
         top: 0;
         box-shadow: inset 0 1px 4px fade(@brand-dark, 10%);
         border: none;