_base.sass

//**
//  Susy: Elastic-Fluid grids without all the math
//  by Eric Meyer and OddBird Collective
//  oddbird.net
//**


/* RESET STYLES
@import compass/reset.sass


//** 
  GRID
  un-comment and override these values as needed for your grid layout 
  (defaults are shown)
!grid_unit = "em"
!total_cols = 10
!col_width = 5
!gutter_width = 2
!side_gutter_width = 1

//** 
  FONT-SIZE
  un-comment and override these values as needed (defaults are shown)
  - you set the font and line heights in pixels.
  - Susy will do the math and give you !base_font_size and !base_line_height 
    variables, set flexibly against the common browser default of 16px
!base_font_size_px = 14
!base_line_height_px = 21

// SUSY
//  (don't move this @import above the GRID and FONT-SIZE overrides)
@import susy/susy.sass


// COLORS
// set any colors you will need later
!text = #332016
!light = #CC8866
!links = #4CAAC0

// FONTS
// Give yourself some font stacks to work with
=sans-family
  :font-family 'Futura Medium', 'Century Gothic', AppleGothic, sans-serif

=serif-family
  :font-family 'Adobe Caslon Pro', 'Big Caslon', Garamond, 'Hoefler Text', 'Times New Roman', Times, serif 


// Remember to add default styles to everything!
/* DEFAULTS
a
  &:link, &:visited
    :color= !links
    :text-decoration none
  &:focus, &:hover, &:active
    :color= !light
    :border-bottom
      :width .1429em
      :style dashed

p
  :margin 0 0 1.5em 0

screen.css

/* Welcome to Susy. Use this file to define screen styles. Import this file using the following HTML or equivalent: <link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" /> */
/* RESET STYLES */
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; }

*:focus { outline: 0; }

body { line-height: 1em; color: black; background: #fff; }

ol, ul { list-style: none; }

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: separate; border-spacing: 0; vertical-align: middle; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: "" ""; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }

img a { border: none; }

/* DEFAULTS */
a:link, a:visited { color: #4caac0; text-decoration: none; }
a:focus, a:hover, a:active { color: #cc8866; border-bottom-width: .1429em; border-bottom-style: dashed; }

p { margin: 0 0 1.5em 0; }

/* STRUCTURE */
body { text-align: center; font-size: 87.5%; line-height: 150%; }

#page { overflow: hidden; display: inline-block; text-align: left; margin-left: auto; margin-right: auto; width: 70em; max-width: 100%; font-family: 'Futura Medium', 'Century Gothic', AppleGothic, sans-serif; color: #332016; }
#page { display: block; }

#brand { width: 77.143%; display: inline; float: left; margin-right: 2.857%; padding-left: 10%; padding-right: 10%; margin-left: 1.429%; margin-right: 1.429%; }
#brand h1 { width: 61.111%; display: inline; float: left; margin-right: 3.704%; padding-left: 12.963%; padding-right: 25.926%; margin-left: 0; margin-right: 0; }

#nav { width: 17.143%; display: inline; float: left; margin-right: 2.857%; margin-left: 1.429%; }

#content { width: 77.143%; display: inline; float: left; margin-right: 2.857%; margin-right: 1.429%; }
#content #description { width: 61.111%; display: inline; float: left; margin-right: 3.704%; margin-left: 0; }
#content #credit { width: 35.185%; display: inline; float: left; margin-right: 3.704%; margin-right: 0; }

#site-info { width: 77.143%; display: inline; float: left; margin-right: 2.857%; padding-left: 20%; margin-left: 1.429%; margin-right: 1.429%; }
#site-info p.license { width: 61.111%; display: inline; float: left; margin-right: 3.704%; margin-left: 0; }
#site-info p.styles { width: 35.185%; display: inline; float: left; margin-right: 3.704%; margin-right: 0; }

screen.sass

/*
  Welcome to Susy. Use this file to define screen styles.
  Import this file using the following HTML or equivalent:
  <link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" />

@import base.sass

/* STRUCTURE
body
  +susy

#page
  +container
  +sans-family
  :color= !text

#brand
  +columns(8)
  +pad(1,1)
  +full
  h1
    +columns(5,8)
    +pad(1,2,8)
    +full(8)
    
#nav
  +columns(2)
  +alpha

#content
  +columns(8)
  +omega
  #description
    +columns(5,8)
    +alpha(8)
  #credit
    +columns(3,8)
    +omega(8)

#site-info
  +columns(8)
  +prefix(2)
  +full
  p.license
    +columns(5,8)
    +alpha(8)
  p.styles
    +columns(3,8)
    +omega(8)