Updated SASS files

config.rb

@@ -3,5 +3,5 @@
 css_dir = "css"
 sass_dir = "sass"
 images_dir = "img"
-output_style = :compact
+output_style = :expanded
 http_images_path = "/img"

css/iphone.css

@@ -1,7 +1,26 @@
-body { width: 320px; padding: 0; margin: 0; }
+body {
+  width: 320px;
+  padding: 0;
+  margin: 0;
+}
 
-div#container h1 { line-height: 1em; }
+div#container h1 {
+  line-height: 1em;
+}
 
-div#container { width: 280px; margin: 0; padding: 20px; position: relative; top: 0; left: 0; height: auto; font-size: 0.8em; }
+div#container {
+  width: 280px;
+  margin: 0;
+  padding: 20px;
+  position: relative;
+  top: 0;
+  left: 0;
+  height: auto;
+  font-size: 0.8em;
+}
 
-div#contact li { float: none; margin-bottom: 0.3em; width: auto; }
+div#contact li {
+  float: none;
+  margin-bottom: 0.3em;
+  width: auto;
+}

css/screen.css

@@ -1,39 +1,119 @@
-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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
-
-body { line-height: 1; color: black; background: white; }
-
-ol, ul { list-style: none; }
-
-table { border-collapse: separate; border-spacing: 0; }
-
-caption, th, td { text-align: left; font-weight: normal; }
-
-blockquote:before, blockquote:after, q:before, q:after { content: ""; }
-
-blockquote, q { quotes: "" ""; }
-
-.clear:after { clear: both; content: " "; display: block; height: 0; zoom: 1; }
-
-body { background: #36424e url(../img/bgrd.gif); color: #fff; font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 24px; font-weight: 300; text-shadow: rgba(0, 0, 0, 0.25) 0px 1px 1px; }
-
-a { color: #abdbf7; text-shadow: rgba(14, 40, 77, 0.5) 0px 1px 1px; }
-
-h1 { font-size: 1.7em; letter-spacing: 0.05em; margin: 0 0 0.5em; }
-
-h3 { font-size: 1.2em; }
-
-p { margin-bottom: 1em; }
-
-a { text-decoration: none; white-space: nowrap; }
-
-a:hover { text-decoration: underline; }
-
-div#container { width: 27em; height: 18em; position: absolute; top: 50%; left: 50%; margin: -9em 0 0 -13.5em; }
-
-div#container * { line-height: 1.3em; }
-
-div#contact li { font-size: 0.75em; float: left; width: 33%; }
-
-div#contact ul.im li { font-size: 0.8em; float: left; width: 49%; margin: 0 auto; text-align: center; }
-
-div.hr { height: 1px; background: rgba(0, 0, 0, 0.25); border-bottom: 1px solid rgba(255, 255, 255, 0.25); margin: 1em auto; width: 70%; }
+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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-weight: inherit;
+  font-style: inherit;
+  font-size: 100%;
+  font-family: inherit;
+  vertical-align: baseline;
+}
+
+body {
+  line-height: 1;
+  color: black;
+  background: white;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+table {
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+caption, th, td {
+  text-align: left;
+  font-weight: normal;
+}
+
+blockquote:before, blockquote:after, q:before, q:after {
+  content: "";
+}
+
+blockquote, q {
+  quotes: "" "";
+}
+
+.clear:after {
+  clear: both;
+  content: " ";
+  display: block;
+  height: 0;
+  zoom: 1;
+}
+
+body {
+  background: #36424e url(/img/bgrd.gif);
+  color: #fff;
+  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-size: 24px;
+  font-weight: 300;
+  text-shadow: rgba(0, 0, 0, 0.25) 0px 1px 1px;
+}
+
+a {
+  color: #abdbf7;
+  text-shadow: rgba(14, 40, 77, 0.5) 0px 1px 1px;
+}
+
+h1 {
+  font-size: 1.7em;
+  letter-spacing: 0.05em;
+  margin: 0 0 0.5em;
+}
+
+h3 {
+  font-size: 1.2em;
+}
+
+p {
+  margin-bottom: 1em;
+}
+
+a {
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+div#container {
+  width: 27em;
+  height: 18em;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -9em 0 0 -13.5em;
+}
+
+div#container * {
+  line-height: 1.3em;
+}
+
+div#contact li {
+  font-size: 0.75em;
+  float: left;
+  width: 33%;
+}
+
+div#contact ul.im li {
+  font-size: 0.8em;
+  float: left;
+  width: 49%;
+  margin: 0 auto;
+  text-align: center;
+}
+
+div.hr {
+  height: 1px;
+  background: rgba(0, 0, 0, 0.25);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
+  margin: 1em auto;
+  width: 70%;
+}

sass/reset.sass → sass/_reset.sass

@@ -29,4 +29,4 @@ blockquote:before, blockquote:after, q:before, q:after
 	content: ""
 
 blockquote, q
-	quotes: "" ""
+	quotes: "" ""

sass/shared.sass → sass/_shared.sass

@@ -1,5 +1,7 @@
+// My simple reset
 @import reset.sass
 
+// Easy clear
 .clear:after
 	clear: both
 	content: " "

sass/screen.sass

@@ -3,11 +3,12 @@
 // General
 
 body
-	background: #36424e url(../img/bgrd.gif)
+	background= #36424e image_url("bgrd.gif")
 	color: #fff
-	font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Arial, Helvetica, sans-serif
-	font-size: 24px
-	font-weight: 300
+	font:
+		family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Arial, Helvetica, sans-serif
+		size: 24px
+		weight: 300
 	text-shadow: rgba(0, 0, 0, 0.25) 0px 1px 1px
 
 a