doc/docs/sass/preview-md.sass

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro')
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro')
@import url('//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css')
@import url('//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css')

@font-face
  font-family: 'fontello'
  src: url('//www.defold.com/static/fonts/fontello/font/fontello.eot')
  src: url('//www.defold.com/static/fonts/fontello/font/fontello.eot#iefix') format('embedded-opentype'),url('https://www.defold.com/static/fonts/fontello/font/fontello.woff') format('woff'),url('https://www.defold.com/static/fonts/fontello/font/fontello.ttf') format('truetype'),url('https://www.defold.com/static/fonts/fontello/font/fontello.svg#fontello') format('svg')
  font-weight: normal
  font-style: normal

@font-face
    font-family: icomoon-15
    src: url(//www.defold.com/static/fonts/icomoon-15px/fonts/icomoon-15.eot)
    src: url(//www.defold.com/static/fonts/icomoon-15px/fonts/icomoon.eot#iefix) format("embedded-opentype"), url(//www.defold.com/static/fonts/icomoon-15px/fonts/icomoon.ttf) format("truetype"), url(//www.defold.com/static/fonts/icomoon-15px/fonts/icomoon.woff) format("woff"), url(//www.defold.com/static/fonts/icomoon-15px/fonts/icomoon.svg?#icomoon) format("svg")
    font-weight: normal
    font-style: normal

// Colors
$text-black: #282c34
$text-white: #d1d1d1
$dark-grey: #282c34
$light-grey: #e3e4e5
$gray-light: #d0d3db
$gray-lighter: #f2f3f5
$gray-light-background: #f7f8fa
$blue-dark-faded: #6a7480
$orange-primary: #fd6623
$blue-primary: #1e64ea

body
  font-family: Source Sans Pro, sans-serif
  color: $text-black
  line-height: 1.44em
  font-size: 1.1em

.documentation
  position: relative
  width: 682px
  padding: 24px
  margin-left: auto
  margin-right: auto

  h1
    font-size: 2.2rem
    font-weight: 300

  h2
    font-size: 1.8em
    font-weight: 300
    margin-top: 1.4em
    margin-bottom: 0.4em

  strong, b
    font-weight: 600

  h1 + p
    font-weight: 600

  ul, ol
    li
      margin-top: 0.2em
      margin-bottom: 0.2em

  dl
    dt
      font-weight: 600
    dd
      margin-left: 1.4em
      margin-top: 0.2em
      margin-bottom: 0.8em

  a
    text-decoration: none

  img
    max-width: 100%
    display: block
    margin: 1.6em 0
    margin-left: auto
    margin-right: auto

  img.inline
    display: inline-block

  img.left
    display: inline-block
    float: left
    margin: 0.2em 0
    margin-right: 1.4em

  img.right
    display: inline-block
    float: right
    margin: 0.2em 0
    margin-left: 1.4em

  img.icon
    display: inline
    margin: 0
    vertical-align: middle

  .anchor
    display: block
    position: relative
    top: -100px
    visibility: hidden

  .anchor-link:before
    font-family: fontello
    content: '\e870'
    color: #bfbfbf
    font-size: 1rem
    padding: 0.5em

  .note
    position: relative

  .sidenote
    line-height: 1.1em
    position: absolute
    right: -18em
    width: 14em
    transform: translateY(-50%)
    background-color: #fff7d4
    outline-style: solid
    outline-width: 1px
    outline-offset: -1px
    outline-color: #e3d9aa
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, .04)

    .note-content
      font-size: 80%
      padding: .6em 1.2em

  .important
    border: 1px solid #fd6623
    background-color: #fff7d4
    box-shadow: 0 3px 0 0 rgba(0, 0, 0, .04)
    margin: 1.25rem 0

    .note-icon
      color: #fd6623
      display: table-cell
      width: 3em
      text-align: center

    .note-icon::before
      font-family: 'fontello'
      content: '\e871'

    .note-content
      display: table-cell
      padding: 1em 1em 1em 0em

  pre
    font-family: 'Source Code Pro', monospace
    color: $text-white
    font-size: 14px
    line-height: 1.6em
    padding: 1.4em
    background-color: $dark-grey
    overflow: auto

    .callout
      color: $text-black
      background-color: #bfbfbf
      border: 1px solid #000
      margin-left: 1.4em
      padding: 0.1em 0.3em

    .hljs-built_in
      color: #d19a66

    .hljs-title
      font-weight: 400

    .k, .kd, .o, .hljs-keyword, .nt
      color:  #e06c75

    .s, .s2, .hljs-string
      color: #98c379

    .c1, .hljs-comment
      color: #abb2bf

    [data-pseudo-content]::before
      content: attr(data-pseudo-content)

  code
    font-family: 'Source Code Pro', monospace
    font-size: 15px

  code.type,
  code.mark
    font-family: Source Sans Pro, sans-serif
    font-size: 0.9375em
    line-height: 120%
    border: 1px solid $gray-light
    padding: 2px 6px
    margin-right: 2px
    color: $blue-dark-faded
    background-color: $gray-lighter

    .file
      color: $orange-primary

  code.mark
    border: 1px solid $orange-primary

  code.scriptfilelabel
    font-size: 14px
    position: relative
    top: 20px

  kbd
    font-family: Source Sans Pro, sans-serif
    background-color: $light-grey
    padding: 0.02em 0.4em

  table
    margin-top: .625rem
    margin-bottom: 2.5rem
    width: 100%
    border: 1px solid #d8dde6

    tr:nth-child(odd)
      background-color: #f7f8fa

  .game-container
    position: relative

    img
      display: block
      position: absolute
      top: 0
      left: 0
      margin: 0
      width: 100%
      height: 100%

    button
      color: #4b4f4d
      font-size: 1.1em
      font-weight: 600
      display: block
      position: absolute
      top: 50%
      left: 50%
      transform: translateX(-50%) translateY(-50%)
      border: none
      border-radius: 2px
      background-color: hsla(0, 0%, 100%, .75)
      padding: 1em 1.2em

      .icon:before
        font-family: icomoon-15
        -webkit-font-smoothing: antialiased
        font-size: 23px
        font-weight: 400
        content: "\e90a"
        vertical-align: middle
        margin: 0 0.2em

    canvas
      display: block
      top: 0
      left: 0
      max-width: 100%
      max-height: 100%


// COPY TO CLIPBOARD
.copy-to-clipboard:before
  font-family: 'fontello'
  font-size: 16px
  content: "\e819"

.copy-to-clipboard:active
  transform: translateY(-8px)

.copy-to-clipboard
  position: absolute
  right: -10px
  background-color: transparent
  transform: translateY(-10px)
  border: 0
  color: #13234a