Github Readme SASS styles

github-readme-markdown-styles.sass

// Github markdown styles

$h1-grey: #dddddd
$h2-grey: #eeeeee
$header-black: #333333

// placeholders
%hover-link
  background: url(data:image/png) no-repeat 10px center
  text-decoration: none

// main styles
body
  padding: 30px
  width: 784px
  font:
    family: Helvetica, arial, sans-serif
    size: 14px
  line-height: 1.6
  background-color: white

  > *:first-child
    margin-top: 0 !important
  > *:last-child
    margin-bottom: 0 !important
  > h1:first-child,
  > h2:first-child,
  > h1:first-child + h2,
  > h2:first-child,
  > h3:first-child,
  > h4:first-child,
  > h5:first-child,
  > h6:first-child
    margin-top: 0
    padding-top: 0

// headers
h1, h2, h3, h4, h5, h6
  position: relative
  margin: 20px 0 10px
  padding: 0
  cursor: text
  font-weight: bold
  -webkit-font-smoothing: antialiased

  &:hover
    a.anchor
      @extend %hover-link

  tt, code
    font-size: inherit
  p
    margin-top: 0

h1
  border-bottom: 1px solid $h1-grey
  font-size: 2.5em
  color: $header-black
h2
  border-bottom: 1px solid $h2-grey
  font-size: 2em
  color: $header-black
h3
  font-size: 18px
h4
  font-size: 16px
h5
  font-size: 14px
h6
  color: #777777

// text
p, blockquote, ul, ol, dl, li, table, pre
  margin: 15px 0

hr
  padding: 0
  height: 4px
  background: transparent url(data:image/png) repeat-x 0 0
  border: 0 none
  color: #CCCCCC

// links
a
  color: #4183C4

  &.absent
    color: #cc0000
  &.anchor
    position: absolute
    display: block
    top: 0
    left: 0
    bottom: 0
    margin-left: -30px
    padding-left: 30px
    cursor: pointer
  &:first-child
    h1, h2, h3, h4, h5, h6
      margin-top: 0
      padding-top: 0

// lists, descriptions
li
  margin: 0

  p.first
    display: inline-block

ul, ol
  padding-left: 30px

  &:first-child
    margin-top: 0

dl
  padding: 0

  dt
    margin: 15px 0 5px
    padding: 0
    font
      size: 14px
      weight: bold
      style: italic

    &:first-child
      padding: 0
  dd
    margin: 0 0 15px
    padding: 0 15px
  dt, dd
    > *:first-child
      margin-top: 0
    > *:last-child
      margin-bottom: 0

// quotes
blockquote
  border-left: 4px solid #DDDDDD
  padding: 0 15px
  color: #777777

  > *:first-child
    margin-top: 0
  > *:last-child
    margin-bottom: 0

// tables
table
  padding: 0
  border-collapse: collapse

  tr
    border-top: 1px solid #CCCCCC
    background-color: white
    margin: 0
    padding: 0

    &:nth-child(2n)
      background-color: #f8f8f8
    th
      font-weight: bold
      border: 1px solid #CCCCCC
      margin: 0
      padding: 6px 13px
    td
      border: 1px solid #CCCCCC
      margin: 0
      padding: 6px 13px
    th, td
      *:first-child
        margin-top: 0
      *:last-child
        margin-bottom: 0

// images
img
  max-width: 100%

// inline styles
span
  &.align-center
    clear: both

    > span
      margin: 13px auto 0
      text-align: center
  &.align-right
    clear: both

    > span
      margin: 13px 0 0
      text-align: right

    span img
      margin: 0
      text-align: right
  &.float-left
    margin-right: 13px
    float: left

    span
      margin: 13px 0 0
  &.float-right
    margin-left: 13px
    float: right

    > span
      margin: 13px auto 0
      text-align: right
  > span,
  &.align-center,
  &.align-center > span,
  &.align-right,
  &.align-right > span,
  &.float-left,
  &.float-right
    display: block
    overflow: hidden
  &.frame
    display: block
    overflow: hidden

    > span
      border: 1px solid #dddddd
      float: left
      overflow: hidden
      margin: 13px 0 0
      padding: 7px
      width: auto
    span
      img
        display: block
        float: left
      span
        clear: both
        color: #333333
        display: block
        padding: 5px 0 0

  > span
    margin: 13px auto 0
    text-align: center
  img
    margin: 0 auto
    text-align: center

// formatted code styles
code, tt
  margin: 0 2px
  padding: 0 5px
  white-space: nowrap
  border: 1px solid #eaeaea
  background-color: #f8f8f8
  border-radius: 3px

.highlight pre
  background-color: #f8f8f8
  border: 1px solid #cccccc
  font-size: 13px
  line-height: 19px
  overflow: auto
  padding: 6px 10px
  border-radius: 3px

pre
  background-color: #f8f8f8
  border: 1px solid #cccccc
  font-size: 13px
  line-height: 19px
  overflow: auto
  padding: 6px 10px
  border-radius: 3px

  code
    margin: 0
    padding: 0
    white-space: pre
  code, tt
    border: none
    background: transparent

// misc
sup
  font-size: 0.83em
  vertical-align: super
  line-height: 0

*
  -webkit-print-color-adjust: exact

@media screen and (min-width: 914px)
  body
    margin: 0 auto
    width: 854px

@media print
  table, pre
    page-break-inside: avoid
  pre
    word-wrap: break-word