Add icon font.

css/_iconfont.scss

@@ -0,0 +1,56 @@
+@font-face {
+  font-family: 'icomoon';
+  src:url('/fonts/icomoon.eot');
+  src:url('/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
+      url('/fonts/icomoon.woff') format('woff'),
+      url('/fonts/icomoon.ttf') format('truetype'),
+      url('fonts/icomoon.svg#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* Use the following CSS code if you want to use data attributes for inserting your icons */
+[data-icon]:before {
+  font-family: 'icomoon';
+  content: attr(data-icon);
+  speak: none;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Use the following CSS code if you want to have a class per icon */
+/*
+Instead of a list of all class selectors,
+you can use the generic selector below, but it's slower:
+ */
+  [class*="icon-"]:before {
+    font-family: 'icomoon';
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+  }
+  .icon-logo:before {
+    content: "\e000";
+  }
+  .icon-mail:before {
+    content: "\e001";
+  }
+  .icon-earth:before {
+    content: "\e002";
+  }
+  .icon-phone:before {
+    content: "\e003";
+  }
+  .icon-github:before {
+    content: "\e004";
+  }
+  .icon-skype:before {
+    content: "\e005";
+  }

css/style.css.sass

@@ -29,6 +29,8 @@
  *
  * COLOURS
 
+@import "iconfont"
+
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
   margin: 0
   padding: 0
@@ -96,14 +98,10 @@ h1
   text-align: center
   width: 100%
   &:before
-    content: ''
     display: block
-    height: 130px
+    font-size: 1.5em
-    font-size: 3em
     margin-top: 0
     text-align: center
-    background: url(../img/l/danbarberlogo.png) center center no-repeat
-    background-size: 95px
 
 /* Hide the logomark in ie7/8 as it just doesn't work correctly. It's not essential.
 
@@ -468,7 +466,7 @@ div, input, textarea
     font-size: 3.3em
     &:before
       float: right
-      font-size: 2em
+      font-size: 1.5em
       width: 78px
       background-size: 78px
       background-position: top center
@@ -575,7 +573,7 @@ div, input, textarea
 @media only screen and (min-width: 992px)
   /*  1.ROOT
   .container
-    width: 890px
+    max-width: 890px
   /*  2.HEADINGS
   /*  3.TYPOGRAPHY
   /*  4.LINKS

partials/_head.html.haml

@@ -5,7 +5,7 @@
 / http://t.co/dKP3o1e
 %meta{:content => "True", :name => "HandheldFriendly"}/
 %meta{:content => "320", :name => "MobileOptimized"}/
-%meta{:content => "width=device-width, target-densitydpi=160dpi, initial-scale=1", :name => "viewport"}/
+%meta{:content => "target-densitydpi=160dpi, initial-scale=1", :name => "viewport"}/
 /
   For less capable mobile browsers
   <link rel="stylesheet" media="handheld" href="css/handheld.css?v=1">

partials/_header.html.haml

@@ -4,5 +4,5 @@
 
 %header.clearfix{:role => "banner"}
   .container
-    %h1#main_heading Dan Barber
+    %h1#main_heading.icon-logo Dan Barber
     %h2 Web Designer & Developer