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 defaults.sass


/* @group STRUCTURE */

+susy
 
#page
  +container
  +sans-family
  color= !base
 
#brand
  +full
  +pad(1,1)
  margin:
    top: 3em
    bottom: 1.5em
  h1 a
    +full(8)
    +pad(1,2,8)
    display: block
    +replace-text("susy_logo.png", "left")
    height: 105px
    &:focus, &:hover, &:active
      border-bottom: 0
    
#site-nav
  +columns(2)
  +alpha
  ul
    +no-bullets
    margin: 0
    text-align: right
    font-weight: bold
 
#content
  +columns(8)
  +omega
  margin-bottom: 3em
  #description
    +columns(5,8)
  #credit
    +columns(3,8)
    +omega(8)
    color= !light
 
#contentinfo
  +full
  +prefix(2)
  padding:
    top: .5em
    bottom: .75em
  border-top:
    width: .25em
    style: dashed
    color= !light
  +serif-family
  font-style: italic
  color= !light
  p
    margin: 0
    &.license
      +columns(5,8)
      +alpha(8)
    &.styles
      +columns(3,8)
      +omega(8)
      text-align: right
  a:link, a:visited
    color= !light
    font-weight: bold

.tutorial
  #content
    margin-bottom: 3em
    li
      margin-bottom: 1.5em
    code
      font-size: 1.25em
      font-family: monospace
      color= !light

/* @end */

/* @group DEBUG */  

#page
  +show-grid("grid.png")

/* @end */