index.jade

!!! 5
html
  head
    title Lysertron
    style.
      body         { margin: 0; }
      canvas       { background: black }
      audio        { position: absolute; bottom: 10px; left: 10px; }
      #song-select { position: absolute; bottom: 10px; left: 320px; }
      #stats       { position: absolute; top: 10px; right: 10px; }

      #timeline {
        position: absolute;
        width: 2000%;
        top: 0;
        left: 50%;
      }

      #timeline .row {
        background: rgba(255,255,255, 0.5);
        height: 20px;
        position: relative;
        margin: 2px 0;
      }

      #timeline .block {
        position: absolute;
        top: 0;
        height: 20px;
        width: 1px;
        background: #444;
      }

      #timeline-current {
        position: absolute;
        top: 0;
        left: 50%;
        height: 90px;
        width: 2px;
        background: red;
        z-index: 10;
      }

    // Vendor
    each name in vendor
      script(src="js/vendor/#{name}.js")

    // Lysertron
    each name in app
      script(src="js/#{name}.js")

    // Layers
    each layer in layers
      script(src="layers/#{layer}.js")

    // Spec
    if specRun
      script(src="js/vendor/mocha.js")
      script(src="js/vendor/chai.js")
      script(src="js/vendor/sinon.js")
      script(src="spec/spec_helper.js")

      link(rel='stylesheet', type="text/css", href="js/vendor/mocha.css")
      style.
        canvas { width: 0; height: 0 }

      each spec in specs
        script(src="spec/#{spec}.js")

  body