devroom.io/content/css/screen.sass

@import "flat-ui-colors"
@import "bootstrap"
@import "pygments"

@font-face
  font-family: 'Titillium'
  src: url('/fonts/titillium-regular-eot.eot')
  src: url('/fonts/titillium-regular-eot.eot?#iefix') format('embedded-opentype'), url('/fonts/titillium-regular-woff.woff') format('woff'), url('/fonts/titillium-regular-ttf.ttf') format('truetype'), url('/fonts/titillium-regular-svg.svg#webfont') format('svg')
  font-weight: 400
  font-style: normal

@font-face
  font-family: 'Titillium'
  src: url('/fonts/titillium-regularitalic-eot.eot')
  src: url('/fonts/titillium-regularitalic-eot.eot?#iefix') format('embedded-opentype'), url('/fonts/titillium-regularitalic-woff.woff') format('woff'), url('/fonts/titillium-regularitalic-ttf.ttf') format('truetype'), url('/fonts/titillium-regularitalic-svg.svg#webfont') format('svg')
  font-weight: 400
  font-style: italic

@font-face
  font-family: 'Titillium'
  src: url('/fonts/titillium-bold-eot.eot')
  src: url('/fonts/titillium-bold-eot.eot?#iefix') format('embedded-opentype'), url('/fonts/titillium-bold-woff.woff') format('woff'), url('/fonts/titillium-bold-ttf.ttf') format('truetype'), url('/fonts/titillium-bold-svg.svg#webfont') format('svg')
  font-weight: 700
  font-style: normal

@font-face
  font-family: 'Titillium'
  src: url('/fonts/titillium-bolditalic-eot.eot')
  src: url('/fonts/titillium-bolditalic-eot.eot?#iefix') format('embedded-opentype'), url('/fonts/titillium-bolditalic-woff.woff') format('woff'), url('/fonts/titillium-bolditalic-ttf.ttf') format('truetype'), url('/fonts/titillium-bolditalic-svg.svg#webfont') format('svg')
  font-weight: 700
  font-style: italic

$text-color: #191919
$code-color: #690000
$footer-color: #999999

$focus-color: $peterriver

body
  color: $text-color
  font-family: "Titillium", "Helvetica Neue", Helvetica, Arial, sans-serif
  font-weight: 400
  font-size: 1.7em
  line-height: 1.7em
  -webkit-font-smoothing: antialiased

a, a:hover, a:active, a:visited
  color: $focus-color
  text-decoration: none

h1, h2, h3, h4, h5, h6
  font-family: "Titillium", "Helvetica Neue", Helvetica, Arial, sans-serif
  font-weight: 400
  -webkit-font-smoothing: antialiased

code
  font-size: 0.8em
  color: $code-color
  background: none
  padding: 0
  border-radius: 0

pre
  font-size: 0.8em !important
  color: $code-color

#header
  border-top: 3px solid $focus-color

  a, a:hover
    color: $text-color

  h1, ol
    font-size: 1em
    display: inline-block

  h1
    padding-right: 0.8em

    a
      color: darken($text-color, 15%)
      span
        color: darken($text-color, 30%)
        font-weight: 700

  ol
    padding-left: 0

    li
      display: inline-block
      padding-right: 0.8em

  .align-right
    text-align: right

  ol.social
    font-size: 1.2em
    margin-top: 16px

    li
      padding-right: 0
      padding-left: 0.4em

      a
        font-size: 1.2em
        color: $focus-color

#main
  #welcome,
  #note
    font-weight: normal
    background-color: #F7F7F7
    border-radius: 4px
    border: 1px solid #d9d9d9
    padding: 10px 20px

  #posts
    .post
      margin-bottom: 20px
			
      h2.title
        margin-bottom: 0

      p
        text-align: justify
        
      p.meta
        font-style: italic
        color: lighten($text-color, 10%)
        margin-bottom: 0

  #older-posts
    h2.title
      margin-top: 0
      margin-bottom: 10px
      margin-left: 122px
      font-size: 1.2em

      span.meta
        color: lighten($text-color, 10%)
        margin-left: -122px
        color: $text-color
        font-size: 0.82em
        padding-top: 0.1em
        display: inline-block
        float: left

  .post,
  .page
    #note
      margin-bottom: 1.6em
      
    h1.title
      font-size: 3em
      margin-bottom: 0
      padding-bottom: 0

      a
        text-decoration: none

        &:hover
          text-decoration: none

    p
      text-align: justify
      margin-bottom: 1.6em

    p.meta
      margin-top: 0
      padding-top: 0
      font-style: italic
      color: lighten($text-color, 30%)

    img
      border: 0
      margin: 8px
      max-width: 80%

      &.right
        float: right

      &.left
        float: left

      &.center
        display: block
        margin: 8px auto

      &.round
        border-radius: 50%

      &.bordered
        border: 1px solid #696969
        padding: 2px

    #recent-posts
      h4.title
        clear: left
        margin-top: 0
        margin-bottom: 10px
        margin-left: 92px
        font-size: 1em

        span.meta
          margin-left: -92px
          color: $text-color
          font-size: 0.8em
          padding-top: 0.2em
          display: inline-block
          float: left

    #comments
      margin-top: 20px

  .page
    h1.title
      margin-top: 20px

  #about
    img
      width: 96px
      border-radius: 12px
      margin-left: 6px
      margin-bottom: 6px
      float: right

#footer
  margin-top: 20px
  margin-bottom: 60px

  .copyright
    font-size: 0.8em
    line-height: 1.4em
    color: $footer-color
    text-align: center

#appreciation
  margin-top: 1em
  border: 1px solid #e0e0e0
  background-color: #fffff7
  border-radius: 4px
  padding: 10px 20px 0 20px

  #donate-button
    margin-left: 8px