Add 404 page and change font.

app/assets/stylesheets/photos.css.sass

@@ -1,12 +1,15 @@
 @import "includes/box_shadow"
 
+*
+  box-sizing: border-box
+
 html
   -webkit-text-size-adjust: 100%
 
 body
   background: #101010
   color: white
-  font-family: proxima-nova, "Helvetica Neue", "Arial", sans-serif
+  font-family: freight-sans-pro, "Helvetica Neue", "Arial", sans-serif
   letter-spacing: 0.1em
   font-weight: 400
   font-size: 100%
@@ -73,8 +76,8 @@ footer
     position: relative
     display: block
     color: white
-    height: 138px
-    width: 138px
+    height: 140px
+    width: 140px
 
 .sg-7
   height: 196px
@@ -82,22 +85,22 @@ footer
     position: relative
     display: block
     color: white
-    height: 194px
-    width: 194px
+    height: 196px
+    width: 196px
 
 .sg-11
   height: 308px
   a
     display: block
-    height: 306px
-    width: 306px
+    height: 308px
+    width: 308px
 
 .sg-17
   height: 476px
   a
     display: block
-    width: 474px
-    height: 474px
+    width: 476px
+    height: 476px
 
 .about
   background-color: #99BF00
@@ -232,7 +235,7 @@ form
   textarea
     height: 150px
     width: 325px
-    font-family: proxima-nova, "Helvetica Neue", "Arial", sans-serif
+    font-family: freight-sans-pro, "Helvetica Neue", "Arial", sans-serif
     font-size: 1em
     padding: 5px
     color: #333
@@ -241,7 +244,7 @@ form
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.1)
   input
     &[type='text']
-      font-family: proxima-nova, "Helvetica Neue", "Arial", sans-serif
+      font-family: freight-sans-pro, "Helvetica Neue", "Arial", sans-serif
       font-size: 1em
       padding: 5px
       color: #333
@@ -283,10 +286,36 @@ input.error, textarea.error
 form input[type='submit']
   -webkit-font-smoothing: antialiased
   background: #666
-  font-family: proxima-nova, "Helvetica Neue", "Arial", sans-serif
+  font-family: freight-sans-pro, "Helvetica Neue", "Arial", sans-serif
   font-size: 1em
   padding: 6px 11px
   color: white
   border: 0
   border-radius: 3px
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(255, 255, 255, 0.1)
+
+.error
+  position: relative
+  background-color: #333333
+  padding: 20px
+  h1, p
+    text-align: center
+  h1
+    font-size: 2em
+    font-weight: 600
+    line-height: 1em
+    margin-top: 1em
+    margin-bottom: 1em
+  p.pointer
+    position: absolute
+    bottom: 60px
+    left: 20px
+
+.error-code
+  text-align: center
+  span
+    color: rgba(255, 255, 255, 0.2)
+    text-shadow: 0 0 15px rgba(0, 0, 0, 0.1)
+    font-size: 8em
+    font-weight: 300
+    line-height: 0.8em

app/views/errors/not_found.html.erb

@@ -1 +1,19 @@
-<h1 class="sg-1">404</h1>
+<% content_for :navigation do %>
+  <%= render 'shared/main_nav' %>
+<% end %>
+
+<div class="sg-17 error">
+  <h1>Page Not Found</h1>
+  <p>Oops! It doesn't look like there's anything here.</p>
+  <p class="pointer"><span>&larr;</span> Why not try one of these links here?</p>
+</div>
+
+<div class="sg-5 error-code" style="background: #444;">
+  <span>4</span>
+</div>
+<div class="sg-5 error-code" style="background: #333;">
+  <span>0</span>
+</div>
+<div class="sg-5 error-code" style="background: #222;">
+  <span>4</span>
+</div>

app/views/home/index.html.erb

@@ -1,10 +1,5 @@
 <% content_for :navigation do %>
-  <div class="sg-5 about">
-    <%= link_to raw('<span>about</span>'), page_path(:about) %>
-  </div>
-  <div class="sg-5 portfolio">
-    <%= link_to raw('<span>portfolio</span>'), :controller => 'categories' %>
-  </div>
+  <%= render 'shared/main_nav' %>
 <% end %>
 
 <% if @photo %>

app/views/shared/_flash_messages.html.haml

@@ -7,4 +7,3 @@
   %p.flash.alert
     = flash[:alert]
     = link_to raw("×"), "#", :class => :close
-  

app/views/shared/_main_nav.html.erb

@@ -0,0 +1,6 @@
+<div class="sg-5 about">
+  <%= link_to raw('<span>about</span>'), page_path(:about) %>
+</div>
+<div class="sg-5 portfolio">
+  <%= link_to raw('<span>portfolio</span>'), :controller => 'categories' %>
+</div>