doctype html
html
  head
    meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"
    meta charset="utf-8"
    meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"

    link href="/favicon.png" rel="icon" type="image/png"
    link href="/favicon.ico" rel="icon"

    title = current_page.data.title || "InSpec"

    link href='//fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'
    link rel='stylesheet' type='text/css' href='css/inspec_tutorial.css'

    == stylesheet_link_tag :site

  body class="#{page_classes}"
    .container
      = partial "layouts/nav"

      main#main-content
        == yield

    = partial "layouts/footer"

    script src='scripts/inspec_tutorial.js'
    script src='dist/inspec_tutorial.js'
    div inspec-tutorial="true" class="inspec-tutorial" hidden="true"
      = "Loading"

    == javascript_include_tag "all"
    javascript:
      $(document).foundation();
      $('.try-demo').click(function(event){
        event.stopPropagation();
        $('.inspec-tutorial').show()
        $('.quit-inspec-tutorial').click(function(event){
          event.stopPropagation();
          $('.inspec-tutorial').hide()
        })
      });