style up 404

source/404.erb

@@ -0,0 +1,24 @@
+<div class="404container">
+  <h1>404 Not Found <span>:(</span></h1>
+  <p>Sorry, but the page you were trying to view isn't here.</p>
+  <p>It looks like this was the result of either:</p>
+  <ul>
+    <li>a mistyped address</li>
+    <li>an out-of-date link</li>
+  </ul>
+  <form action="http://search.basho.com">
+    <input id="search-404" size="5" type="search" placeholder="Search" name="q">
+  </form>
+</div>
+<style>
+  ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
+  ::selection { background: #fe57a1; color: #fff; text-shadow: none; }
+  h1 span { color: #bbb; }
+  p { margin: 1em 0; }
+  ul { padding: 0 0 0 40px; margin: 1em 0; }
+  .404container { max-width: 380px; _width: 380px; margin: 0 auto; }
+</style>
+<script>
+  var searchTerm = window.location.pathname.replace(/\/riak\/.*?\//, '');
+  document.getElementById('search-404').value = searchTerm;
+</script>

source/css/common.css.scss

@@ -717,43 +717,19 @@ div[role="main"] {
         }
       }
 
-      input {
-        @include allCorners(15px);
-        @include transition(width 0.3s ease);
-        border      : 1px solid silver;
-        padding     : 2px 12px;
-        background  : url('../images/layout/small-search-icon.png') right 3px no-repeat #FFF;
-        font-weight : normal;
-        font-family : 'titillium', verdana, arial, sans-serif;
-        color       : #24514A;
-        width       : 5em;
+      input[type="search"] {
         position    : absolute;
         top         : 0;
         right       : -3px;
-
-        &::-webkit-input-placeholder,
-        &::-moz-placeholder,
-        &::-ms-input-placeholder,
-        &::input-placeholder {
-          color : #24514A;
-        }
-
-        &:focus {
-          width   : 10em;
-          outline : none;
-        }
-
-        &:hover {
-          color      : #24514A;
-        }
       }
-      
+
       @media screen and (max-width: 700px) {
         display : none;
       }
     }
 
   }
+
 
   .info, .note {
     @extend .serif-italic;
@@ -1180,3 +1156,40 @@ article {
     margin : 0;
   }
 }
+
+
+#top-nav input[type="search"],
+#search-404
+{
+  @include allCorners(15px);
+  @include transition(width 0.3s ease);
+  border      : 1px solid silver;
+  padding     : 2px 12px;
+  background  : url('../images/layout/small-search-icon.png') right 3px no-repeat #FFF;
+  font-weight : normal;
+  font-family : 'titillium', verdana, arial, sans-serif;
+  color       : #24514A;
+  width       : 5em;
+
+  &::-webkit-input-placeholder,
+  &::-moz-placeholder,
+  &::-ms-input-placeholder,
+  &::input-placeholder {
+    color : #24514A;
+  }
+
+  &:focus {
+    width   : 10em;
+    outline : none;
+  }
+
+  &:hover {
+    color      : #24514A;
+  }
+}
+#search-404 {
+  width : 20em;
+  &:focus {
+    width : 20em;
+  }
+}