Make search box more noticeable, second attempt

Author: GuillaumeGomez

templates/navigation.hbs

@@ -3,7 +3,10 @@
         <div class="pure-menu pure-menu-horizontal" role="navigation" aria-label="Main navigation">
           <form action="/releases/search" method="GET" class="landing-search-form-nav">
             {{#unless varsb.show_search_form}}
-            <input class="search-input-nav" name="query" type="text" aria-label="Find crate by search query" placeholder="Find crate"{{#if varss.search_query}} value="{{varss.search_query}}"{{/if}}>
+            <div id="search-input-nav">
+              <label for="nav-search"><i class="fa fa-fw fa-search"></i></label>
+              <input id="nav-search" name="query" type="text" aria-label="Find crate by search query" placeholder="Find crate"{{#if varss.search_query}} value="{{varss.search_query}}"{{/if}}>
+            </div>
             {{/unless}}
           <a href="/" class="pure-menu-heading pure-menu-link" aria-label="Docs.rs"><i class="fa fa-cubes fa-fw"></i> Docs.rs</a>
           <ul class="pure-menu-list">

templates/navigation_rustdoc.hbs

@@ -3,7 +3,10 @@
         <div class="pure-menu pure-menu-horizontal">
           <form action="/releases/search" method="GET" class="landing-search-form-nav">
             {{#unless varsb.show_search_form}}
-            <input class="search-input-nav" name="query" aria-label="Find crate by search query" tabindex="-1" type="text" placeholder="Find crate"{{#if varss.search_query}} value="{{varss.search_query}}"{{/if}}>
+            <div id="search-input-nav">
+              <label for="nav-search"><i class="fa fa-fw fa-search"></i></label>
+              <input id="nav-search" name="query" type="text" aria-label="Find crate by search query" placeholder="Find crate"{{#if varss.search_query}} value="{{varss.search_query}}"{{/if}}>
+            </div>
             {{/unless}}
             <a href="/" class="pure-menu-heading pure-menu-link"><i class="fa fa-cubes fa-fw"></i><span class="title"> Docs.rs</span></a>
           {{#with content.crate_details}}

templates/style.scss

@@ -173,21 +173,35 @@ div.nav-container {
     form.landing-search-form-nav {
         max-width: 1200px;
 
-        input.search-input-nav {
+        #search-input-nav {
             float: right;
-            max-width: 200px;
-            border: none;
-            margin: 0 1em 0 0;
-            font-size: 0.8em;
-            text-align: right;
-            box-shadow: none;
-            background-color: #fff;
-            height: 31px;
+            max-width: 150px;
             display: none;
+            border-left: 1px solid $color-border;
 
             @media #{$media-sm} {
                 display: block;
             }
+
+            @media #{$media-md} {
+                 max-width: 200px;
+            }
+
+            label {
+                 color: #777;
+                 cursor: pointer;
+                 padding-left: 0.5rem;
+                 font-size: 0.8em;
+            }
+
+            input {
+                 border: none;
+                 margin: 0 1em 0 0;
+                 font-size: 0.8em;
+                 box-shadow: none;
+                 background-color: #fff;
+                 height: 31px;
+            }
         }
 
         input.search-input-nav:focus {