404 page draft

_src/404.html

@@ -0,0 +1,13 @@
+---
+layout: page
+title: I'm sorry Dave
+---
+
+<div class="hal-9000"></div>
+
+<p class="srverror-title">I'm sorry Dave,</p>
+<p class="srverror-text">I'm afraid I can't do that.</p>
+
+<section class="site-search">
+    <input type="search" class="input-search search-field" placeholder="Search everything">
+</section>

_src/assets/js/app.js

@@ -18,7 +18,7 @@ var siteNavigation = {
     siteSearch: function() {
         
         var $searchlink    = $('.search-btn'),
-            $searcharea     = $('.search-area'),
+            $searcharea     = $('.topbar .search-area'),
             $searchfield   = $('.search-field'),
             $searchresults = $('.search-results'),
             $searchpop        = $('.popover');

_src/assets/less/404.less

@@ -0,0 +1,68 @@
+
+.page-404 {
+    text-align: center;
+    
+    .entry-title { .hide; }
+}
+
+.srverror-title {
+    font-size: 2em;
+    margin-bottom: @line-height-computed/2;
+    color: @text-color-light;
+}
+.srverror-text {
+    font-size: 1.2em;
+    letter-spacing: .01em;
+    color: @text-color-dimmed
+}
+
+@hal-size: 72px;
+
+.hal-9000 {
+    width: @hal-size;
+    height: @hal-size;
+    .border-radius(@hal-size);
+    background: #444;
+    padding: 1.5em;
+    margin: @line-height-computed auto;
+    text-align: center;
+    position: relative;
+    box-shadow: 5px 0 0 #ccc, -5px 0 0 #ccc, 0 5px 0 #ccc, 0 -5px 0 #ccc;
+    
+    // eye
+    &:before {
+        content: " ";
+        width: 100%;
+        height: 100%;
+        .border-radius(100%);
+        display: block;
+        background: red;
+        box-shadow: 0 0 5px red, 0 0 10px red, 0 0 15px red, 0 0 20px red, 0 0 25px red
+    }
+    
+    // lights
+    &:after {
+        content: "";
+        position: absolute;
+        width: @hal-size;
+        height: @hal-size;
+        .border-radius(@hal-size);
+        position: absolute;
+        left: 0;
+        top: 0;
+        
+        background-image: linear-gradient(to bottom, rgba(255,255,255,.07) 0%, rgba(255,255,255,.07) 45%, rgba(255,255,255,0) 46%);
+        
+        .rotate(-60deg);
+    }    
+    // 
+    // &:after {
+    //     content: "...";
+    //     color: rgba(255,255,255,.4);
+    //     position: absolute;
+    //     left: 22%;
+    //     top: -7%;
+    //     text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 5px 0 rgba(255,255,255,.2), 0 10px 0 rgba(255,255,255,.1);
+    //     letter-spacing: .7em;
+    // }
+}

_src/assets/less/forms.less

@@ -33,21 +33,20 @@ textarea,
 	background: #fff;
 	background: rgba(255,255,255,.3);
 	border: 0;
-	border-bottom: 1px solid #AFC3CB;
-	.box-shadow( 0 1px 0 #fff);
 	width: 100%;
 	.transition();
 	-webkit-appearance: none;
 	
-	// Focus state
+	&:hover {
+	    background: rgba(255,255,255,.5)
+	}
+    
 	&:focus {
 		background: rgba(255,255,255,.7);
-		border-bottom-color: #78868c;		
 		outline: 0;
 		outline: thin dotted \9; /* IE6-9 */
 	}
 	
 	// placeholder
-	.placeholder(rgba(46, 79, 92, .4));
+	.placeholder(rgba(46, 79, 92, .3));
 }
-

_src/assets/less/kremalicious3.less

@@ -48,6 +48,7 @@
 @import 'content.less';
 @import 'comments.less';
 @import 'sticky.less';
+@import '404.less';
 
 // Alerts
 //@import 'alerts.less';

_src/assets/less/navigation.less

@@ -105,7 +105,7 @@
     top: 1em;
 }
 
-.search-area {
+.topbar .search-area {
     position: absolute;
     width: 100%;
     left: 0;
@@ -122,14 +122,12 @@
     }
 }
 
-.search-field {
+.topbar .search-field {
     width: 97%;
     border: none;
     .box-shadow(none);
     background: transparent;
     
-	.placeholder(rgba(46, 79, 92, .2));
-    
     &:hover,
     &:focus {
         background: rgba(255,255,255,.7) !important;

_src/assets/less/typography.less

@@ -97,7 +97,8 @@ p, li {
 	.hyphens(auto);
 }
 
-b, strong {
+b, strong, 
+.bold {
 	font-weight: 700;
 	font-style: normal;
 }