include ../mixins/_helpers
include ../mixins/_view_helpers
include ../mixins/_profile
include ../mixins/_admin

- var bodyClass = ""
- var pageTitle = "Stonecutter"
- var pageTitleDataL8n = "content:default/title"
- demoAppURL = demoAppURL || "http://thoughtworksinc.github.io/stonecutter-client"

block vars

doctype
html
  head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    title(data-l8n="#{pageTitleDataL8n}") #{pageTitle}
    meta(name="viewport", content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no")
    meta(name="format-detection", content="telephone=no")
    link(rel="shortcut icon" href="/stonecutter-favicon.ico")
    block headerMeta

    +stylesheetLinkTag("application","screen")
    +stylesheetLinkTag("theme","screen")

    block headerScripts

  body(class="#{bodyClass}")
    a.skip-link(href="#main") Skip navigation
    .header(role="banner")
      .header__inner.middle-container
        .header__logo
          span.visuallyhidden.clj--app-name Stonecutter
        nav.header-nav.clj--header-nav(role="navigation")
          block headerContent
    .main-content#main(role="main")
      block columns
      .columns
        block content
    script.
      document.addEventListener("touchstart", function(){}, true);
    block footerScripts

include ../mixins/_helpers
include ../mixins/_view_helpers
include ../mixins/_profile
include ../mixins/_admin

- var bodyClass = ""
- var pageTitle = "Stonecutter"
- var pageTitleDataL8n = "content:default/title"
- demoAppURL = demoAppURL || "http://thoughtworksinc.github.io/stonecutter-client"

block vars

doctype
html
  head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    title(data-l8n="#{pageTitleDataL8n}") #{pageTitle}
    meta(name="viewport", content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no")
    meta(name="format-detection", content="telephone=no")
    link(rel="shortcut icon" href="/stonecutter-favicon.ico")
    script(type="text/javascript").
      document.getElementsByTagName('html')[0].className += ' js';
    block headerMeta

    +stylesheetLinkTag("application","screen")
    +stylesheetLinkTag("theme","screen")

    block headerScripts

  body(class="#{bodyClass}")
    a.skip-link(href="#main") Skip navigation
    .header(role="banner")
      .header__inner.middle-container
        .header__logo
          span.visuallyhidden.clj--app-name Stonecutter
        nav.header-nav.clj--header-nav(role="navigation")
          block headerContent
    .main-content#main(role="main")
      block columns
      .columns
        block content
    script.
      document.addEventListener("touchstart", function(){}, true);
    block footerScripts

Add simple js script to add js class to html tag
Add simple js script to add js class to html tag

We can use this for styles to determine whether they should show or hide (progressive enchancement)
