buttons.sass

= pseudo-button
  :cursor pointer
  :text-decoration none
  :white-space nowrap

= button(!path = false, !height = 34, !padding = 8, !offset = 4)
  @if !path
    +semi-liquid-background(!path, !height, !padding)
  @if !offset > 0
    > span > span
      :padding-bottom = !offset + "px"
      :height = !height - !offset + "px"
      :line-height = !height - !offset + "px"
      :vertical-align top
    
  &, a
    +pseudo-button
   
.circled, .squared
  +inline-block
  +pseudo-button
  :background url('/images/layout/buttons/button-circle.png') no-repeat left
  :text-align center
  :vertical-align middle
  
  :min-height 23px
  > span
    :min-height 25px
  
.circled
  :width 22px
  
.squared
  :background-image url('/images/layout/buttons/button-square.png')
  :width 24px
  
  &, > span  
    :height 28px !important
  
.button    
  :font-weight bold
    
  a&, a
    +link-colors(!black)
    
  &.large
    +button("/images/layout/buttons/large.png")
    :text-transform lowercase
    
    > span > span      
      > .icon
        :vertical-align middle !important
    
    &.ghost
      :font-weight normal
      :color #309edd
      
      &, > span, > span > span
        :background-image url('/images/layout/buttons/ghost.png')
        
      :padding-right 7px
      > span
        :padding-left 7px
      
      > span > span
        :padding
          :left 10px
          :right 10px
        
    
    .circled
      > span
        :min-height 31px
        
  &.giant
    +button("/images/layout/buttons/giant.png", 44, 5, 2)
    
    
    > span > span
      :padding
        :left 10px
        :right 10px
      :position relative
    
    .circled
      :background-image url('/images/layout/buttons/button-circle-emboss.png')
      :height 25px
      :position absolute
      :top 9px 
      :right 10px
    
    &.has_circle
      > span > span
        :padding-right 42px
    
  &.medium
    +button("/images/layout/buttons/medium.png", 30, 6)
    
    .icon
      :vertical-align middle
      :margin-right 5px
    
  &.borderless
    +pseudo-button
    :vertical-align middle
    
    .circled
      :margin
        :top -5px
        :right 2px
    
  &.large
    .circled     
      :margin
        :top -2px 
        :right 2px
        
  &.small
    +inline-block
    +pseudo-button
    
    &.icon
      :-moz-border-radius .4em
      :-webkit-border-radius .4em
      :border 1px solid #d9d9d9
      :background
        :color #f9f9f9
        :position center
      :width 21px
      :height 21px
      
      
      
      
  &.yes, .yes
    :color #19ca00
    :text-transform uppercase
  &.no, .no
    :color #fe1300
    :text-transform uppercase

header.sass

#header 
  +clearfix
  
  :background #e9eaec
  :border-bottom 1px solid #fff

  h1
    :float left
  
    &, & a
      +inline-block
      :width 90px
      :height 28px
      :background url('/images/assets/logo.png')
    
    a
      +unstyled-link
      :text-indent -2000px
      
  #userbar
    :float left
    :margin-left 28px
    :margin-top 2px
    :margin-bottom -2px
    
    ul
      :margin 0 10px 0 5px
      :float left
      
      li
        :float left
        :list-style none
        :margin 5px  0 0 20px
      
    a
      +link-colors(!black, !blue)
      
    
    img
      :width 24px
      :height 24px
      :margin 0 5px
      :border 1px solid #fff
      :float left
      
    strong 
      :float left
      :margin-top 5px
      
    .button
      :margin-left 30px 
      :font-weight normal
      :color !black
      > span > span
        :padding
          :left 5px
          :right 5px
        
    
  #search
    :float right
    
    input
      :background-position 4px 4px
      :width 400px
      :padding-top 6px
      :padding-bottom 6px

layouts.sass

.two-equal-columns
  > .left 
    +left-column(50%)
    > .wrapper
      :padding-right 12px
      
  > .right
    +main-column(0, 0%, 50%)
    > .wrapper
      :padding-left 13px

.two-column, .two-column > .lousy-tshirt
  > .left
    +main-column(0, 0%, 38%)
    > .wrapper
      :padding-right 12px
  > .right
    +right-column(38%)
    > .wrapper
      :padding-left 13px
    
  > .toolbox
    :display none
  
.three-column, .three-column > .lousy-tshirt
  > .left
    +left-column(32%)
  > .center
    +main-column(32%, 0, 32%)    
    > .wrapper
      :padding 0 20px
  > .right
    +right-column(32%)
  
  > .left, > .center, > .right
    :min-height 250px

simple.html.haml

!!!
%html
  %head
    %title= page_title || "Orwik"
    %meta{"http-equiv" => "content-type", :content => "text/html; charset=utf-8"}
    %link{:rel => "shortcut icon", :href => "/favicon.ico"}
    %link{:rel => "search", :title => "Orwik", :href => "/opensearch.xml", :type => "application/opensearchdescription+xml"}
    
    %script== $session_id = '#{cookies[:_session_id]}' 
    - require_css 'layout/simple/simple'
    - require_js 'vendor/mootools/mootools', 'vendor/mootools/mootools-more', 'vendor/mootools/mootools-ext', 'application'
    = include_required_js
    = include_required_css
    = auto_link
    /[if IE 7]
      = css_include_tag 'layout/simple/ie7'
    
  %body
    %table#layout
      %tr
        %td
          #header
            %h1 
              %a{:href => "/"} Orwik
              
            - unless (caught = catch_content(:for_subheader)).blank?
              = caught
            - else
              %p 
                Welcome to 
                %span Orwik
                your platform for scientific collaboration.
          #content
            = catch_content :for_layout
          
          #footer-pusher
      
    #footer-wrapper
      %ul#footer
        %li.first © 2009 Orwik
        %li= link_to "Terms of service", "#"
        %li= link_to "Privacy policy", "#"
        %li.about= link_to "About Orwik", "#"
        %li= link_to "Help and FAQ", "#"
        %li= link_to "Contact", "#"