Source

hashify.me / hashify.sass

Full commit
@import compass/css3/border-radius
@import compass/css3/box-shadow
@import compass/css3/images
@import compass/css3/user-interface

// structure

body
  margin: 0
  min-width: 900px
  min-height: 600px
  padding: 0
  font: 24px/32px "Helvetica Neue", Helvetica, sans-serif
  &.dragging
    cursor: ew-resize
    +user-select(none)
    ::-moz-selection
      background: none

#sidebar
  position: fixed
  left: 0 // Firefox requires that this be included
  width: 480px
  height: 100%
  background: #eee

#editor
  position: absolute
  left: 31px
  right: 31px
  height: 100%
  padding: 0

#markdown
  position: absolute
  margin: 81px 0 0 -7px
  width: 100%
  height: 67.5%
  border: 1px solid #ddd
  background: #f7f7f7 inline-image("gutter.png") repeat-y 100%
  font: 12px/1.25 Monaco, monospace
  padding: 6px
  resize: none
  &:focus
    margin: 80px 0 0 -8px
    border: 2px solid #08f
    outline: none

.hashify-editor-toolbar
  position: relative
  left: 0
  top: 45px
  margin: 0 auto
  width: 288px

#counter
  position: absolute
  right: -8px
  top: 48px
  width: 60px
  text-align: right
  font-size: 18px
  line-height: 1
  color: #bbb
  text-shadow: 0 1px 0 #fff
  &.caution
    color: #f60
  &.danger
    color: #c00

#wrapper,
#shorten
  position: absolute
  left: 0
  right: 0
  height: 20px
  border-bottom: 1px solid #ddd
  background: #e7e7e7
  padding: 6px 0

#wrapper.loading,
#mask
  background: #e7e7e7 inline-image("spinner.gif") no-repeat 50%
  z-index: 1

#wrapper.loading
  > #tweet,
  > #shorturl,
  > #qrcode
    display: none

#tweet
  position: relative
  left: -108px
  float: left
  margin: 0 -101px 0 50%
  width: 55px
  height: 20px
  border: none

#wrapper,
#shorten,
#shorturl
  display: block
  font-size: 14px
  line-height: 1

#wrapper,
#shorten
  text-align: center
  color: #999
  cursor: default

#shorten
  height: 14px
  padding: 9px 0
  &:focus,
  &:hover
    border-bottom-color: #08f
    background: #08f
    color: #fff

#shorturl
  position: relative
  +border-radius(3px)
  padding: 2px 4px
  color: #369
  &:before
    position: absolute
    left: -5px
    top: 5px
    width: 5px
    height: 9px
    background: inline-image("speechbubble.png")
    content: ""
  &:focus,
  &:hover
    &:before
      background-position: -5px

#shorturl,
#qrcode
  float: left
  border: 1px solid #cde
  background: #fff
  &:focus,
  &:hover
    border-color: #5ad
    background-color: #def

#qrcode
  display: block
  margin-left: 4px
  width: 18px
  height: 18px
  background-image: inline-image("qrcode.png")
  text-indent: -9999px

#credits
  position: absolute
  left: 0
  right: 0
  top: 67.5%
  margin: 95px 0 0
  padding: 18px 24px
  font: italic 12px/1.5 Georgia, serif
  color: #666
  > h4
    display: inline
    font: inherit
    &:after
      content: ":"
  > ul
    display: inline
    list-style: none
    > li
      display: inline
      &:after
        content: ","
      &:last-child:after
        content: "."
  > p
    margin: 6px 0
  a
    text-decoration: underline

#dragger
  position: absolute
  right: -4px
  top: 0
  bottom: 0
  width: 2px
  border-width: 0 1px
  border-style: solid
  border-color: #ccc
  background: #ddd
  cursor: ew-resize

#markup
  margin-left: 480px
  max-width: 36em
  padding: 1em 2em 2em 2.167em
  #sidebar.concealed + &
    margin-left: 0
  a
    color: #06c
    &:focus,
    &:hover
      text-decoration: underline
  img
    max-width: 100%
  h1 + p > time:first-child:only-child
    font-style: italic

#mask,
#kbd-shortcuts
  position: fixed
  left: 0
  right: 0
  top: 0
  bottom: 0

#kbd-shortcuts
  display: none
  background: #ccc
  background: rgba(0, 0, 0, 0.25)
  &.active
    display: block
  div
    margin: 80px auto 0
    width: 528px
    border: 2px solid #ccc
    background: #fff
    +box-shadow(0 1px 2px rgba(0, 0, 0, 0.5))
    padding: 0 24px 12px
  h1
    margin: 0 -24px 12px
    border-bottom: 2px solid #ccc
    padding: 12px 24px
    font-size: 32px
    line-height: 1.5
  h2
    margin: 4px 0 12px
    border-bottom: 2px solid #eee
    font-size: 18px
  dl
    margin: 0
    font-size: 18px
    line-height: 24px
    overflow: auto
  dt
    float: left
  kbd
    display: block
    float: left
    margin: 0 4px 0 0
    width: 22px
    +border-radius(5px)
    border: 1px solid #111
    background: #333
    +background(linear-gradient(#555, #111))
    text-align: center
    font: inherit
    line-height: 22px
    color: #fff
  dd
    float: left
    margin: 0 0 12px 4px
    width: 232px
  dt[data-keys="2"] + dd
    width: 204px

// content styling

h1
  margin: 24px 0
  font-size: 48px
  line-height: 1

h2, h3, h4, h5, h6
  margin: 12px 0
  font-size: 24px
  line-height: 36px

h2
  margin-top: 24px
  font-size: 36px

h3
  margin-top: 24px
  font-size: 30px

hr
  margin: 18px 0 12px
  border: none
  border-top: 1px solid #ccc

p, ol, ul
  margin: 12px 0

ul
  padding: 0
  list-style: disc outside

li
  ol, ul
    margin: 0
  li
    margin-left: 32px

blockquote
  margin: 12px 0
  border-left: 6px solid #ddd
  padding: 0 24px 0 18px
  color: #777
  em
    font-style: normal

pre
  margin: 24px 0
  border: 1px solid #ccc
  padding: 1px
  white-space: pre-wrap
  > code
    font-size: 18px
    line-height: 24px
    body &
      padding: 12px 18px

code
  background: #f8f8ff
  padding: 0 0.25em
  line-height: 1

a
  color: inherit
  text-decoration: none
  &:focus,
  &:hover
    color: #333
    outline: none

@media print
  #sidebar
    display: none !important
  #markup
    margin: 0
    a
      font-weight: bold
      color: inherit
      &:after
        content: " [" attr(href) "]"
        font-weight: normal
        font-size: 0.8em
      &[href^="/"]:after
        content: " [http://hashify.me" attr(href) "]"
    h1, h2, h3, h4, h5, h6
      page-break-after: avoid
    pre
      page-break-inside: avoid