Fix assets

Author: acacheung

_layouts/default.html

@@ -74,12 +74,12 @@ <h1><a href="#">{{ page.title }}</a></h1>
     <meta http-equiv="Keywords" name="Keywords" content="rubygems, gems, programming, ruby, packages" />
     <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport">
     <link href="/stylesheets/application.css" rel="stylesheet" type="text/css" />
-    <script src="/javascripts/application.js" type="text/javascript"></script>
+    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
+    <script src="/javascripts/mobile-nav.js" type="text/javascript"></script>
     <script src="//use.typekit.net/lkc4mmu.js" type="text/javascript"></script>
     <script>
       try{Typekit.load();}catch(e){}
     </script>
-    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
     <script>
       $(function() {
         var path = window.location.pathname;
@@ -111,17 +111,18 @@ <h1><a href="#">{{ page.title }}</a></h1>
         </a>
 
         <div class="header__nav-links-wrap">
-          <form class="header__search-wrap">
-            <input class="header__search" id="header__search" name="header__search" placeholder="Search Gems..." type="search">
-            <label class="header__search__icon" data-icon="⌕" for="header__search">
+          <form accept-charset="UTF-8" action="https://rubygems.org/search" class="header__search-wrap" id="main-search" method="get"><div style="display:none"><input name="utf8" type="hidden" value="&#x2713;" /></div>
+            <input class="header__search" id="query" name="query" placeholder="Search Gems&hellip;" type="search" />
+            <label for="query">
               <span class="t-hidden">Search gems</span>
             </label>
+            <input class="header__search__icon" id="search_submit" type="submit" value="⌕" />
           </form>
 
           <nav class="header__nav-links">
             <a class="header__nav-link" href="https://rubygems.org/gems">Gems</a>
-            <a class="header__nav-link is-active" href="/">Guides</a>
-            <a class="header__nav-link" href="http://guides.rubygems.org/contributing/">Contribute</a>
+            <a class="header__nav-link" href="/">Guides</a>
+            <a class="header__nav-link" href="/contributing">Contribute</a>
           </nav>
         </div>
       </div>

javascripts/application.js

@@ -1142,18 +1142,17 @@ body.has-modal > *:not(.modal-wrap) {
   @media (min-width: 1020px) {
     .header__search-wrap, .header__search-wrap--home {
       width: 350px; } }
-  .header__search-wrap:hover .header__search__icon, .header__search-wrap--home:hover .header__search__icon {
-    color: white; }
-  .header__search-wrap:hover .header__search, .header__search-wrap--home:hover .header__search {
-    border-bottom-color: white; }
 
 @media (min-width: 900px) {
   .header__search-wrap--home {
     display: none; } }
 
 .header__search__icon {
   top: 6px;
+  border: none;
+  background-color: transparent;
   font-size: 18px;
+  font-family: "icomoon";
   color: white;
   color: rgba(255, 255, 255, 0.5);
   -webkit-transition-duration: 0.25s;
@@ -1168,10 +1167,13 @@ body.has-modal > *:not(.modal-wrap) {
   transition-property: color; }
   @media (max-width: 899px) {
     .header__search__icon {
-      right: 30px; } }
+      right: 4px; } }
   @media (min-width: 900px) {
     .header__search__icon {
       right: 0; } }
+  .header__search__icon:hover, .header__search__icon:focus {
+    color: white;
+    outline: none; }
 
 .header__search {
   border-bottom-color: white;
@@ -1193,7 +1195,7 @@ body.has-modal > *:not(.modal-wrap) {
       width: 210px; } }
   @media (min-width: 900px) {
     .header__search {
-      padding-right: 6px; } }
+      padding-right: 10px; } }
   @media (min-width: 900px) and (max-width: 1019px) {
     .header__search {
       width: 230px; } }
@@ -1208,9 +1210,9 @@ body.has-modal > *:not(.modal-wrap) {
     color: rgba(255, 255, 255, 0.3); }
   .header__search:-ms-input-placeholder {
     color: rgba(255, 255, 255, 0.3); }
-  .header__search:focus {
+  .header__search:hover, .header__search:focus {
     border-bottom-color: white; }
-    .header__search:focus + .header__search__icon {
+    .header__search:hover ~ .header__search__icon, .header__search:focus ~ .header__search__icon {
       color: white; }
 
 .help__search__toggle {

javascripts/html5shiv.js

@@ -65,14 +65,6 @@
   @media (min-width: 1020px) {
     width: 350px;
   }
-  &:hover {
-    .header__search__icon {
-      color: $white;
-    }
-    .header__search {
-      border-bottom-color: $white;
-    }
-  }
 }
 
 .header__search-wrap--home {
@@ -85,17 +77,26 @@
 .header__search__icon {
   @extend %search__icon;
   top: 6px;
-  font-size: 18px;
+  border: none;
+  background-color: transparent;
+  font: {
+    size: 18px;
+    family: "icomoon";
+  }
   color: $white;
   color: rgba($white, .5);
   @include transition-duration(.25s);
   @include transition-property(color);
   @media (max-width: 899px) {
-    right: 30px;
+    right: 4px;
   }
   @media (min-width: 900px) {
     right: 0;
   }
+  &:hover, &:focus {
+    color: $white;
+    outline: none;
+  }
 }
 
 .header__search {
@@ -111,7 +112,7 @@
     width: 210px;
   }
   @media (min-width: 900px) {
-    padding-right: 6px;
+    padding-right: 10px;
   }
   @media (min-width: 900px) and (max-width: 1019px) {
     width: 230px;
@@ -131,9 +132,9 @@
   &:-ms-input-placeholder {
     color: rgba($white, .3);
   }
-  &:focus {
+  &:hover, &:focus {
     border-bottom-color: $white;
-    & + .header__search__icon {
+    & ~ .header__search__icon {
       color: $white;
     }
   }