html

head
  title=song.title
  meta charset="UTF-8"
  / style type="text/css"==open(URI.encode("https://fonts.googleapis.com/css?family=Bitter:400,700|Muli:300,400,i|Montserrat:400,700|Fira+Mono|Junge")).read
  script src="abcjs_basic_2.3-min.js"
  script src="abcjs_plugin_2.3-min.js"
  script src="https://d3js.org/d3.v4.min.js"
  javascript:
    window.ABCJS.plugin.auto_render_threshold = 100;
    window.ABCJS.plugin.hide_abc = true;
  script src="songbook.js"
  sass:
    body
      max-width: 1000px
      margin: auto
      padding-top: 50px
      font-family: 'Junge'
    .lyrics
      line-height: 140%
      font-size: 140%
      overflow-y: hidden
      transform-origin: top
      clear: both
      font-family: 'Junge'
      margin: auto
      width: fit-content
      padding-top: 1em
    .chordlyrics
      font-family: 'Fira Mono', monospace
    .abcrendered
      margin: auto
    h2
      text-align: center
    .order
      position: relative
      top: 10
      left: 0
      float: right
      font-size: 26px
      font-family: 'Fira Mono', sans
    .chords
      font-family: 'Fira Mono', monospace
      font-weight: bold
      color: #08c
    .chorusindicator
      color: #0a5
      font-weight: bold
      text-align: center
    .chorus
      color: #083
    .author, .key
      font-family: 'Lora', serif
      font-size: 140%
      text-align: center
      font-style: italic
    .author
      float: right
      margin-right: 120px
    .key
      float: left
      margin-left: 120px
    .desc
      clear: both
      margin-bottom: 2em
    .melody
      background: none
      border: none
      clear: both
body
  .order=song.order
  a name=song.slug
  h2="#{song.title}"
  .info
    .desc=song.desc
    .author=song.author
    .key="Key of #{song.key}"
  - unless song.melody.nil? or song.melody.empty?
    pre.melody=song.melody
  - unless song.verses.empty?
    pre.melody
      .lyrics==song.to_html