:erb
  <style type="text/css">
:sass
  #header-wrap
    background: transparent url(/images/bk_gradient.png) repeat-x
    color: white
  
  #header
    h1
      margin-left: 15px
      
  ul#pages
    list-style: none
    li
      border: 2px solid gray
      padding: 10px
      font-size: 1.25em

:erb
  </style>

:javascript
  $(function() {
    $('#pages').children().mouseover(function(){
      $(this).css('background-image','url(/images/bk_gradient.png)');
    });
    $('#pages').children().mouseout(function(){
      $(this).css('background-image','none');
    });
    $('#pages').children().click(function(){
      window.location = $(this).attr('data-href');
    });
    
  })
#header-wrap  
  #header.container_16
    %h1 Mercury
  
#wrap.container_16
  %h2 Projects
  %ul#pages
    - Dir.glob('views/*/').each do |f|
      - unless f =~ /index/ or f =~ /layout/
        %li{:'data-href' => f.gsub(/views/,'').match(/(.*)$/)[1] + 'default'}= f.match(/\/(.*)\/$/)[1]