stylesheet.sass

@import compass

$black:       #503e2b
$warm-gray:   #9e948a
$cool-gray:   #808094
$red:         #cc0000
$blue:        #004477

$content-border: 1px dotted #e3e3e3
$sidebar-border: 1px dotted #cccccc

$big-gap:  20px
$content-width:   600px
$sidebar-width:   200px
$container-width: $content-width + (2 * $sidebar-width)

$small-gap: 6px

$default-box-shadow-color:    $black
$default-box-shadow-h-offset: 0px
$default-box-shadow-v-offset: 2px
$defualt-box-shadow-blur:     4px
$default-box-shadow-spread:   0

$background-color: #eeeeef

=small-screen
  @media only screen and (max-width: 1099px)
    @content

=big-screen
  @media only screen and (min-width: 1100px)
    @content

=code-font
  font-family: "DejaVu Sans Mono", "Droid Sans Mono", "Menlo", "Monaco", "Courier New", monospace

=embossed
  +single-text-shadow(#ffffff, 0px, 1px, 0px)

=aside-left($width)
  margin-left: (($width + (2 * $big-gap)) * -1) - $default-box-shadow-blur - 1


body
  +small-screen
    background-color: $background-color
  +big-screen
    background-image: url("/gradient_squares.png")
  font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif
  font-size: 13px

h1
  font-size: 25px

h2
  font-size: 18px
  line-height: 20px
  margin: 0 0 $small-gap 0
  a
    +link-colors($black, $red)

h3
  font-size: 16px
  line-height: 20px
  margin: 0 0 $small-gap 0
  a
    +link-colors($black, $red)

h1, h2, h3, h4, h5, h6
  color: $black
  font-weight: normal

p
  color: $black
  line-height: 18px
  margin: 0 0 $small-gap 0

a
  +link-colors($blue, $red)
  +hover-link

strong
  font-weight: bold
  color: $black

em
  font-style: italic

hr
  border: 0 none
  border-bottom: $sidebar-border


#container
  +big-screen
    width: $container-width
    overflow: auto
    margin: auto
    padding: ($big-gap * 2) 0

#main
  +box-shadow
  +border-radius(5px)
  min-height: 650px
  background-color: white
  +big-screen
    width: $content-width
    float: left
    margin: 0 0 0 $sidebar-width
    position: relative

#github
  +big-screen
    display: block
    position: absolute
    top: -11px
    right: -12px
    background: url('/forkme.png') no-repeat top left
    width: 130px
    height: 130px

#header
  border-bottom: $content-border
  min-height: 135px
  .blog-title
    +border-top-radius(7px)
    +background-image(linear-gradient(#e9e9e9, #fff 50%, #fff))
    line-height: 50px
    border: 2px solid white
    font-size: 30px
    padding: 10px $big-gap 5px
    a
      color: $red
      text-decoration: none
      +embossed
  h2
    padding: 0 $big-gap
    width: 520px
    line-height: 25px
    color: $warm-gray
    font-size: 16px
    height: 50px
    display: table-cell
    vertical-align: bottom
    +embossed
    strong
      color: $black
      font-weight: bold

#sidebar
  +embossed
  +big-screen
    float: left
    width: $sidebar-width - ($big-gap)
    padding: 0 0 0 ($big-gap - $default-box-shadow-blur)
    margin: 135px 0 0 $default-box-shadow-blur
    border-top: $sidebar-border
  +small-screen
    width: auto
    padding: $big-gap
    margin: 0

  h3
    border-top: $sidebar-border
    padding-top: $small-gap
    margin-top: $big-gap
    &:first-child
      margin-top: 0
      padding-top: $big-gap
      border-top: 0 none

  p
    color: $warm-gray
    font-size: 12px
    a
      color: $black

  ul, ol
    list-style: none
    margin: 0
    padding: 0
    li a
      +link-colors($warm-gray, $red)
  ul li
    font-size: 12px
    line-height: 20px

  ol li
    font-size: 10px
    line-height: 15px

#footer
  clear: both
  color: $warm-gray
  text-align: center
  font-size: 11px
  line-height: 18px
  padding: 5px
  +embossed

#content
  padding: $big-gap
  padding-top: 0

  p
    color: $black
    text-align: justify

    &.read_more
      text-align: right
      a
        +inline-block
        padding: $small-gap 0 $small-gap $small-gap
        margin-bottom: $big-gap
        +link-colors($warm-gray, $red)
        text-decoration: none

  h1, h2, h3, h4, h5, h6
    margin: $big-gap 0 $small-gap 0
    padding: 0 0 $small-gap 0
    border-bottom: $sidebar-border

  ul
    list-style: disc outside
    margin: $small-gap
    margin-left: $big-gap
  ol
    list-style: decimal outside
    margin: $big-gap
  li
    color: $cool-gray
    line-height: 18px
    pre
      display: block
      width: auto !important
      min-width: auto

  tt, code
    +code-font
    color: #336633
    font-size: 12px

  blockquote
    margin: $big-gap
    line-height: 18px
    color: $warm-gray
    p
      color: $warm-gray

  article
    min-height: 100px
    h1
      a
        color: $black

    h2
      margin: $big-gap 0 $small-gap ($big-gap * -1) + 1
      padding: 0 0 $small-gap $big-gap
      border-bottom: $sidebar-border
    p.summary a
      color: $black
      text-decoration: none
      display: block

  aside
    +big-screen
      +embossed
      float: left
      border-top: $sidebar-border
      padding: $small-gap 13px
      color: $warm-gray
      font-size: 12px
    +small-screen
      display: none

  aside.post_date
    width: 30px
    +aside-left(30px)
    margin-top: -7px
    text-align: center
    time
      display: block
    span
      display: block
    span.day
      color: $black
      font-size: 20px
      line-height: 30px
    a
      color: $warm-gray
      text-decoration: none
      display: block

  aside.toc
    width: 150px
    +aside-left(150px)
    margin-top: 80px
    +big-screen
      position: fixed
    text-align: right
    border-bottom: $sidebar-border
    ul
      margin: 0
      list-style-type: none
    a
      color: $warm-gray
      display: block
      padding: 3px 0
      &.active
        color: $blue
        &:before
          content: "→ "
          color: $red
    h3
      border-bottom: 0 none
      font-size: 14px
      margin: $small-gap 0

  .ir_black, pre

    border: 3px solid #fff

    +box-shadow

    padding:          10px
    background-color: black
    margin: $big-gap 0

    +small-screen
      width: auto
      display: block
    +big-screen
      display: inline-block
      width: 532px
      min-width: 532px

    +code-font
    font-size: 12px
    line-height: 15px
    color: #f6f3e8

    overflow: hidden

    code
      color: #f6f3e8

    &:hover
      display: inline-block
      position: relative
      width: auto
      overflow: auto
      z-index:  10000

.Comment
  color: #7c7c7c
.Conditional
  color: #6699cc
.Constant
  color: #99cc99
.Delimiter
  color: #00a0a0
.Function
  color: #ffd2a7
.Number
  color: #ff73fd
.PreProc
  color: #96cbfe
.Special
  color: #e18964
.String
  color: #a8ff60
.Type
  color: #ffffb6
.rubyControl
  color: #6699cc
.rubyStringDelimiter
  color: #336633
.Identifier
  color: #c6c5fe
.Statement
  color: #6699cc
.Keyword
  color: #96cbfe


#twitter
  +big-screen
    margin-top: -1px
    margin-right: -110px
    float: right
    width: 60px
    border-top: $sidebar-border
    padding: 2 * $small-gap 13px
  +small-screen
    display: none

#comments
  margin: $big-gap ($big-gap * -1) 0 ($big-gap * -1) + 1
  padding: 0 $big-gap 0 $big-gap
  border-top: $sidebar-border

code, pre, .ir_black
  +code-font

.flash
  color: $black
  margin-top: $big-gap
  padding: $big-gap / 2
  font-size: 11px
  +border-top-right-radius(15px)
  +border-bottom-left-radius(15px)
  em
    text-decoration: underline

.notice
  @extend .flash
  background: mix(#ffcc00, #fff, 10%)
  border: 1px solid mix(#ffcc00, #fff, 40%)

.alert
  @extend .flash
  background: mix(#cc0000, #fff, 10%)
  border: 1px solid mix(#cc0000, #fff, 40%)