inspec/www/source/layouts/layout.slim

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 rel='stylesheet' type='text/css' href='css/inspec_tutorial.css'

    == stylesheet_link_tag :site

  body class="#{page_classes}"
    = partial "layouts/global-message"

    .container
      = partial "layouts/nav"

      main#main-content
        == yield

    = partial "layouts/footer"

    script src='https://s3.amazonaws.com/menumaker/menumaker.min.js'
    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:

     //initiate sticky sidebar from jquery.sticky.js

      if (window.innerWidth > 640) { //don't fix on mobile
        $('#sidebar').stick_in_parent();
      }

    javascript:

      //Parallax Text

      if (window.innerWidth > 900) { //don't parallax on tablet/mobile
      $(window).enllax(); //initiate parallax on larger screens
      }

    javascript:

      //Code pop-up animation on homepage

      $('.code-trigger').click(function() {
        $(this).toggleClass('turn-angle');
        $('.code-pop').slideToggle(500);
      });


    javascript:

      //Animate HR on scroll

      $(window).scroll(function() {

      var scroll = $(window).scrollTop();
      var objectSelect = $('#icon-trigger'); //parent that triggers scroll
      var objectPosition = objectSelect.offset().top;
      if (scroll > objectPosition) {
      $('hr.first').addClass('stretch')  //add class animate class to HR

      }
      });

    javascript:

      //Animating progress bar for header

      $(document).ready(function(){

      var getMax = function(){
          return $(document).height() - $(window).height();
      }

      var getValue = function(){
          return $(window).scrollTop();
      }

      if('max' in document.createElement('progress')){
          // Browser supports progress element
          var progressBar = $('progress');

          // Set the Max attr for the first time
          progressBar.attr({ max: getMax() });

          $(document).on('scroll', function(){
              // On scroll only Value attr needs to be calculated
              progressBar.attr({ value: getValue() });
          });

          $(window).resize(function(){
              // On resize, both Max/Value attr needs to be calculated
              progressBar.attr({ max: getMax(), value: getValue() });
          });
      }
      else {
          var progressBar = $('.progress-bar'),
              max = getMax(),
              value, width;

          var getWidth = function(){
              // Calculate width in percentage
              value = getValue();
              width = (value/max) * 100;
              width = width + '%';
              return width;
          }

          var setWidth = function(){
              progressBar.css({ width: getWidth() });
          }

          $(document).on('scroll', setWidth);
          $(window).on('resize', function(){
              // Need to reset the Max attr
              max = getMax();
              setWidth();
          });
          }
        });


    javascript:

      $(document).foundation();
      $('.try-demo').click(function(event){
        event.stopPropagation();
        $('.inspec-tutorial').show()
        window.dispatchEvent(new Event('resizeTerminal'));
        $('.quit-inspec-tutorial').click(function(event){
          event.stopPropagation();
          $('.inspec-tutorial').hide()
        })
      });

    == javascript_include_tag "segment"