Did some work on the home page.

.gitignore

@@ -3,3 +3,4 @@
 .bundle
 .DS_Store
 .sass-cache
+views/*.css

content/pages/index.haml

@@ -1 +1,54 @@
-%p Nesta is the shizzle yo.
+Title: Nesta CMS
+Template: home
+
+%section.intro
+  %heading
+    %h1 Home
+  :markdown
+    Nesta is a Ruby CMS that's well suited to developers and designers.  
+    With code that is simple and easy to understand, Nesta can be extended  
+    using the full power of the [Sinatra][frank] web framework.
+
+    [frank]: http://www.sinatrarb.com
+
+%section.overview
+  %heading
+    %h1 Why use Nesta?
+  :markdown
+    Do you prefer writing and testing HTML and CSS in a text editor,
+    rather than a browser window? Are you happy writing copy in
+    [Markdown][md] or [Textile][textile]? If so, this might be for you.
+
+    There's no database to configure – everything is stored in
+    text files. You can review your changes on a local copy of your web
+    site, and copy the files to your server when you're ready to publish
+    (most people use Git).
+
+    [md]: http://effectif.com/nesta/markdown-cheat-sheet
+    [textile]: http://textism.com/tools/textile/ "Textism: Tools: Textile"
+
+%section.features
+  %heading
+    %h1 Features
+  :markdown
+    - Suitable for any type of web site, including blogs.
+    - Semantic **HTML5**, clean **typography**.
+    - Easily **re-styled** or **extended**.
+    - **Free hosting** on Heroku.
+    - Support for Google Analytics, Atom feeds, comments (via Disqus),
+      XML sitemaps…
+
+%section.quick-start
+  %heading
+    %h1 Quick start
+  %p Insert gem and shotgun commands here.
+
+%section.doc-list.group
+  %heading
+    %h1 Documentation
+  %nav
+    - display_menu(Nesta::Menu.for_path('/docs/quick-start'), :root => '/docs/quick-start', :class => 'quick-start')
+    - display_menu(Nesta::Menu.for_path('/docs/creating-content'), :root => '/docs/creating-content', :class => 'creating-content')
+    - display_menu(Nesta::Menu.for_path('/docs/design'), :root => '/docs/design', :class => 'design')
+    - display_menu(Nesta::Menu.for_path('/docs/config'), :root => '/docs/config', :class => 'config')
+    - display_menu(Nesta::Menu.for_path('/docs/deployment'), :root => '/docs/deployment', :class => 'deployment')

views/colours.sass

@@ -0,0 +1,10 @@
+$base-color: #313126
+$background-color: #fff
+$tint: #F9F7EF
+$border-color: #D7C28B
+$link-color: #D85700
+$visited-link-color: darken($link-color, 5%)
+$hover-link-color: lighten($link-color, 15%)
+$active-link-color: darken($link-color, 20%)
+$nav-link-color: desaturate(lighten($link-color, 25%), 35%)
+$meta-color: #87877D

views/home.haml

@@ -0,0 +1,2 @@
+%article.home(role="main")
+  ~ @page.to_html(self)

views/master.sass

@@ -1,19 +1,16 @@
 @import "mixins.sass"
+@import "colours.sass"
 
 // Variables
 
-$content-width: 37em
+$golden: 1.618
 
-$base-color: #262626
-$background-color: #fff
-$tint: #f1f1f3
-$border-color: #99d
-$link-color: #507EA9
-$visited-link-color: darken($link-color, 15%)
-$hover-link-color: lighten($link-color, 15%)
-$active-link-color: darken($link-color, 50%)
-$nav-link-color: desaturate($link-color, 55%)
-$meta-color: #999
+$gutter: 2.618em // from modularscale.com with 16px/798px
+$container-width: 54em
+$content-width: $container-width / $golden - ($gutter / 2)
+$sidebar-width: $container-width - $content-width - ($gutter / 2)
+
+$banner-h1-scale: 3.27
 
 $border-style: 1px dashed $border-color
 
@@ -26,13 +23,13 @@ $border-style: 1px dashed $border-color
 // Typography
 
 @mixin heading-font
-  font-family: "ff-meta-web-pro-1", "ff-meta-web-pro-2", Helvetica, sans-serif
+  font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", Georgia, serif
 
 @mixin body-font
   font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", Georgia, serif
 
-@mixin text-shadow
-  text-shadow: 0 1px 2px #ccc, 1px 3px 5px #d6d6d6
+@mixin text-shadow($color: #DCDBD1)
+  text-shadow: 0 2px 5px $color
 
 body
   font-size: $base-font * 1.05
@@ -46,20 +43,20 @@ header[role=banner]
     margin: 0
     line-height: 1.2em
   h1
-    font-size: 327%
+    font-size: 100% * $banner-h1-scale
     font-weight: 700
+    font-style: italic
     letter-spacing: -1px
     @include text-shadow
   h2
+    display: none
     color: $meta-color
-    font-size: 1em
+    font-size: 1em * $base-scale
     font-weight: 400
 
 h1, h2, h3, #sidebar
   @include heading-font
-h1
-  font-weight: 700
-h2, h3
+h1, h2, h3
   font-weight: 400
 
 h4, h5, h6
@@ -107,11 +104,36 @@ nav.breadcrumb
 
 // Layout
 
+div#container
+  position: relative
+
+header[role=banner]
+  hgroup
+    position: absolute
+    left: $content-width + $gutter
+    top: $vertical-rhythm / 2
+  nav.primary
+    line-height: ($banner-h1-scale * $h4-scale) + ($vertical-rhythm / 2)
+    ul
+      list-style: none
+      li
+        display: inline
+        margin-right: 1.5em
+
+        @adjust-font-size($base-scale)
+        font-weight: 700
+
+        &:last-child
+          margin-right: 0
+
+        a
+          text-decoration: none
+
 article, aside, footer, header, nav, section
   display: block
 
 div#container
-  width: 54em
+  width: $container-width
   margin: 0 auto
   padding: 1em 1em 0 1em
 
@@ -122,43 +144,70 @@ div#container
     padding: 1px 0
 
   div#sidebar
-    width: 12em
-    margin-left: 40em
+    width: $sidebar-width
+    margin-left: $content-width + $gutter
     padding: ($base-vertical-margin * 3) 1em $base-vertical-margin 1em
 
   footer.branding
     clear: both
     color: $meta-color
     @include adjust-font-size($base-scale)
     p
-      width: $content-width
+      width: $container-width
       margin: 0
       padding: 1em 0
 
-// The visuals
+// Home page layout
+article.home
+  section
+    clear: both
+
+    h1
+      @include adjust-font-size($h2-scale, 1.6, 0.4)
+
+    &.intro
+      heading
+        display: none
+      p
+        @include adjust-font-size($h3-scale, 1, 1, 4/3)
+        color: $meta-color
+        text-align: center
+
+    &.overview
+      clear: both
+      float: left
+      width: $content-width
 
-@mixin pale-background
-  background-color: $tint
-  background-color: rgba(255, 255, 255, 0.5)
+    &.features
+      clear: right
+      float: right
+      width: $sidebar-width
+
+      ul
+        margin-left: 1.5em
+
+    &.doc-list
+      @include adjust-font-size($base-scale)
+      nav
+        ul
+          float: left
+          width: (($container-width / 5) - $gutter) / $base-scale
+          margin-right: $gutter
+          &:last-child
+            margin-right: 0
+
+// The visuals
 
 a
-  border-bottom: 1px dotted $link-color
-  text-decoration: none
   color: $link-color
   @include transition(color 0.25s 0 ease)
   &:visited
     color: $visited-link-color
-    border-bottom-color: $visited-link-color
   &:hover
     color: $hover-link-color
-    border-bottom-color: $hover-link-color
   &:active
     color: $active-link-color
-    border-bottom-color: $active-link-color
 
-#sidebar
-  @include pale-background
-
 nav.breadcrumb    
   ul
     margin: 0
@@ -181,32 +230,13 @@ article p.meta
   a:hover
     color: $hover-link-color
 
-nav.categories,
-div.feed,
-article p.meta
-  a
-    border-bottom-color: $background-color
-
-article p.meta
-  a
-    @include transition(border-bottom-color 0.5s 0 ease)
-  a:hover
-    border-bottom-color: $hover-link-color
-
-article h1 a
-  border-bottom: none
-
-body
-  background: $background-color url(/images/background.png)
-
 article
   img
     max-width: 100%
     margin-bottom: $base-vertical-margin
 
   code,
   pre
-    @include pale-background
     code
       background: none
   code
@@ -243,7 +273,6 @@ section.articles
       position: relative
       margin: $base-vertical-margin 0
       padding: $base-vertical-margin / 2 1em
-      @include pale-background
       list-style: none
     article
       ol li
@@ -258,13 +287,17 @@ section.articles
 
   article
     h1
+      font-weight: normal
       text-shadow: none
+      a
+        text-decoration: none
     p.read_more
       @include adjust-font-size(1, 0, 0)
       margin-top: -$base-vertical-margin
     footer
       border-top: none
 
+// Side bar
 nav.categories
   h1
     @include adjust-font-size(1, 2, 0)

views/mixins.sass

@@ -14,12 +14,12 @@ $base-font: $base-scale * 1em
 $vertical-rhythm: 1.75em
 $base-vertical-margin: 1.75em
 
-@mixin adjust-font-size($scale, $top-weight: 1, $bottom-weight: 1)
+@mixin adjust-font-size($scale, $top-weight: 1, $bottom-weight: 1, $cadence: 1)
   $average-margin: $base-vertical-margin / $scale
   margin-top: $average-margin * $top-weight
   margin-bottom: $average-margin * $bottom-weight
 
-  $line-height: $vertical-rhythm / $scale
+  $line-height: $vertical-rhythm / $scale * $cadence
   @if $line-height < 1
     line-height: $line-height * 2
   @else