_wipomo-base.sass

$hotpink: #f6f
$green: #6cc863
$mint: #c1ffc1
$darkmint: shade($mint, 20%)

$light-gray: tint(rgb(0,0,0), 70%)
$darker-gray: tint(rgb(0,0,0), 50%)

$newlink-color: $green
$hover-color: shade($hotpink, 25%)
$active-color: $hotpink
$followed-color: shade($newlink-color, 25%)
$focus-color: tint($newlink-color, 10%)

// When we need an arbitrary space. At least this way it's consistent:
$nudge: 10px

application.css.sass

@import wipomo-base
@import compass
@import compass/reset
@import compass/css3
@import blueprint

body
  font-family: sans-serif

a
  +link-colors($newlink-color, $hover-color, $active-color, $followed-color, $focus-color)

$header-height: 90px
header
  +background-image(image-url('stripe.png'), linear-gradient(#fff, #aaa))
  height: $header-height
  #logo
    position: absolute
    z-index: -1

#body
  padding: $nudge
  box-shadow: 0px 7px 12px 0px rgba(0, 0, 0, 0.3)

#top-links
  float: right
  padding: 0.5*$nudge

h1, h2, h3
  clear: both
  margin-bottom: 15px
  color: $light-gray
  text-shadow: 0px 1px white, 0px -1px rgba(0, 0, 0, 0.9)

h1
  font-size: 170%

h2
  font-size: 150%

h3
  font-size: 130%
  color: $darkmint

input, textarea
  border: thin solid $darker-gray
  &:focus
    border-color: black
    background-color: tint($mint, 50%)

// <label>s to the left of <textarea>s:
label.text
  display: block
  margin-top: $nudge

// Size: Mobile, Portrait
@media only screen and (max-width: 479px)
  #top-links
    margin-top: $header-height
  #body
    margin-top: 2*$nudge

// Size: Mobile, Landscape
@media only screen and (min-width: 480px) and (max-width: 767px)

// Size: Mobile, Both
@media only screen and (max-width: 767px)
  #top-links
    padding: $nudge
  header
    #logo
      left: 2.5*$nudge

// Size: Full
@media only screen and (min-width: 768px)

// This one's on probation. Will have to check it out.
@media print
  @import print