wezm.net/content/screen.sass

$ans-serif: "Helvetica Neue", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif

body
  font-family: Constantia, Georgia, "Bitstream Vera Serif", "Liberation Serif", serif
  font-size: 16px
  background: #fff
  color: #223

  &.home
    min-width: 960px


// HTML5 expectations - should go in reset perhaps
header, footer, nav, article, figure, figcaption
  display: block


p, li, blockquote
  line-height: 1.2


p, pre
  margin: 0 0 1em 0


ul, ol
  margin: 1em 0 1em 1em


ul
  list-style: disc


ol
  list-style: decimal


li
  margin-left: 1em


dl
  dd
    margin-left: 2em


h1, h2, h3, h4, h5, h6
  font-family: $ans-serif
  margin: 0.6em 0 0.5em 0
  color: #111
  font-weight: 200


h1
  font-size: 36px


h2
  font-size: 24px


h3
  font-size: 21px


h4
  font-size: 18px


h5
  font-size: 16px


h6
  font-size: 14px


a
  text-decoration: underline

  &:link, &:visited
    color: #36454F

h1 a
  text-decoration: none

  &:link, &:visited
    color: #111


body.home h1 > a
  -webkit-transition: border-bottom-color 500ms ease-out
  border-bottom: 2px solid rgba(17, 17, 17, 0.0)

  &:hover
    border-bottom-color: rgba(17, 17, 17, 1.0)


sup
  vertical-align: super
  font-size: 0.8em


pre, code, tt
  font-family: Consolas, "Andale Mono", "Liberation Mono", Menlo, Monaco, "Bitstream Vera Sans Mono", monospace


pre
  font-size: 13px
  overflow-x: auto


blockquote
  border-left: 2px solid #999
  padding-left: 1em
  margin: 0 0 1em 0

figure
  margin: 1em auto
  text-align: center

figcaption
  font-size: small
  text-align: center
  font-style: italic

  .label
    font-weight: bold



body > header
  font-family: $ans-serif
  font-size: 18px
  color: white
  padding: 0.5em
  background: #1C1C1C

  a
    -webkit-transition: border-bottom-color 500ms ease-out
    border-bottom: 2px solid rgba(255, 255, 255, 0.0)
    &:link, &:visited
      text-decoration: none
      color: white

    &:hover
      border-bottom-color: rgba(255, 255, 255, 1.0)

  span
    display: none


#menu
  float: right
  padding-right: 0.25em

  li
    font-size: inherit


#content
  padding: 0 20px
  clear: both
  min-width: 600px
  margin-right: 40%


body.articles #content, body.weather #content
  min-width: 0
  margin-right: 0


footer
  color: #999
  border-top: 1px solid #999
  margin: 1em
  clear: both

  .copyright
    font-family: $ans-serif
    font-size: 14px
    padding-top: 1em
    display: block
    font-weight: 200


.column
  float: left
  width: 50%
  margin: 0
  min-width: 480px


#personal div
  padding-right: 2em


.column div
  padding: 0 0 0 2em


ul.articles
  list-style: none
  margin: 0
  clear: left

  li
    margin: 0
    padding-top: 1em
    height: 70px


body.articles ul.articles li
  height: auto
  padding-top: 0


ul.articles
  li:first-child
    border-top: none
    padding-top: 1em

  abbr
    display: block
    font-size: 12px
    color: #999

  strong
    font-family: $ans-serif
    margin: 0
    font-weight: 200
    display: block
    font-size: 18px


a
  &.more
    display: block
    margin: 1em 0 0 0

  &.active
    font-weight: bold

  &.affiliate
    background: url(/images/dollar.gif) no-repeat top right
    padding-right: 4px


.inline
  list-style: none
  margin: 0

  li
    display: inline

    &:first-child
      margin-left: 0


#flickr
  clear: both

  header
    margin-left: 2em

  h1
    margin: 0
    padding: 0.6em 0 0 0

  ul
    display: block
    height: 75px
    overflow: hidden
    margin-top: 1em

  li
    float: left
    overflow: hidden
    margin: 0 0 0 1em
    display: block
    position: relative
    height: 75px
    width: 75px
    border: 1px solid #ccc
    background: url(/images/photos.jpg?20111208) no-repeat 0 -75px

    &:first-child
      margin-left: 2em

    img
      -webkit-transition: opacity 500ms ease-out
      position: absolute

      &:hover
        opacity: 0

  a.more
    float: right
    margin: 1em 2em 1em 0


body.articles #content nav
  padding-bottom: 1em


#search
  margin: 0
  padding: 0
  display: none
  float: left
  margin-right: 20px

  fieldset
    margin: 0
    padding: 0
    border: 0

  label
    font-weight: normal
    padding-right: 10px

  input
    width: 180px


#respond
  margin-top: 10px
  padding: 10px
  background-color: #ddd
  clear: both

  h2
    padding-left: 42px
    line-height: 32px
    background: url(/images/comment32.png) no-repeat top left
    margin-top: 0

  li.short
    float: right

#content
  .published
    font-family: $ans-serif
    color: #999
    padding-bottom: 10px
    font-size: 14px

  .alignleft
    float: left
    margin: 5px 10px 5px 0


img.alignleft
  float: left
  margin: 5px 10px 5px 0


img.feed-icon
  -webkit-transition: opacity 500ms ease-out
  opacity: 0.5

  &:hover
    opacity: 1.0

#content .alignright, img.alignright
  float: right
  margin: 5px 0 5px 10px


#content .aligncenter, div.aligncenter, img.aligncenter
  text-align: center
  display: block
  margin: 10px auto

#content
  .clear
    clear: both

  hr
    border: 0
    border-top-width: 1px
    border-style: solid
    border-top-color: #999
    width: 10em
    margin: 0


table
  &.left_headers, &.top_headers
    border: 1px solid #D8D8D8
    border-collapse: collapse
    margin: 1em 0

  &.left_headers
    td, th
      border: 1px solid #D8D8D8
      padding: 0.3em 0.7em 0.3em 0.7em

  &.top_headers
    td, th
      border: 1px solid #D8D8D8
      padding: 0.3em 0.7em 0.3em 0.7em

  &.left_headers th
    text-align: right

  &.gallery
    border-collapse: collapse
    width: 100%

    td
      padding: 10px 0
      text-align: center
      vertical-align: middle

    img a
      border: none

.vcard .photo
  margin: 0 1em 1em 0


// Weather
body.weather

  #current > .temperature
  
    .temperature
      font-family: $ans-serif
      font-weight: 200
    
    .current
      font-size: 36px

    time
      font-size: smaller

  figure.forecast
    margin: 0 1em 1em 0
    width: 48px
    float: left

  .chart
    clear: both
    width: 100%
    height: 320px

  section, section > .temperature
    clear: both
    margin-top: 2em

  .extreme
    float: left
    margin: 0 2em 2em 0

    time.day
      display: block
      text-align: center

    div, time
      margin: 0.5em 0
      font-family: $ans-serif

  small
    display: block
    font-size: smaller
    margin-top: 1em
    color: #999