<!doctype html>
<html class="no-js" itemscope="itemscope" itemtype="http://schema.org/WebApplication" lang="en">
    <head>
        <meta charset="utf-8" />
        <title>{{ page.title }}</title>
        
        <meta name="viewport" content="initial-scale=1.0" />                
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />        
        <meta http-equiv="cleartype" content="on" />
        
        <meta name="description" content="Load scripts and stylesheets on demand. Achieve responsive design with CSS that targets different screen resolutions, paths, states and browsers. Detect various browsers and their features. Target HTML5 and CSS3 safely." />
        <meta itemprop="keywords" name="keywords" content="loader,polyfill,feature detection,responsive design,css3,html5" />
        
        <!-- Google -->
        <meta name="google-site-verification" content="pqzn85yrum0AY6ugIrX0zoIEazSHL9p09us5yvHwZqw" />        
        <meta itemprop="softwareVersion" content="{{site.head.minor}}" />
        <meta itemprop="releaseNotes" content="https://raw.github.com/headjs/headjs/master/src/{{site.head.major}}/changelog.txt" />
        <meta itemprop="fileFormat" content="application/javascript" />
        <meta itemprop="image" content="http://headjs.com/site/assets/img/logos/logo.png" />
        <meta itemprop="thumbnailUrl" content="http://headjs.com/favicon.png" />
        <meta itemprop="isFamilyFriendly" content="true" />     

        <!-- Facebook -->
        <meta property="og:title"       content="HeadJS, The only script in your &lt;HEAD&gt;"/>
	    <meta property="og:type"        content="website" />
	    <meta property="og:url"         content="http://headjs.com" />
	    <meta property="og:image"       content="http://headjs.com/site/assets/img/logos/logo.png" />
	    <meta property="og:site_name"   content="Head JS" />
        <meta property="og:description" content="Load scripts and stylesheets on demand. Achieve responsive design with CSS that targets different screen resolutions, paths, states and browsers. Detect various browsers and their features. Target HTML5 and CSS3 safely." />
        <meta property="og:locale"      content="en_US"/>
        
        <!-- Twitter -->
        <meta name="twitter:card"        content="summary" />
        <meta name="twitter:title"       content="HeadJS, The only script in your &lt;HEAD&gt;"/>
        <meta name="twitter:description" content="Load scripts and stylesheets on demand. Achieve responsive design with CSS that targets different screen resolutions, paths, states and browsers. Detect various browsers and their features. Target HTML5 and CSS3 safely." />
        <meta name="twitter:image"       content="http://headjs.com/site/assets/img/logos/logo.png" />
        <meta name="twitter:url"         content="http://headjs.com" />          
        
        <meta name="application-name" content="HeadJS"/>
        <meta name="msapplication-TileColor" content="#000000" />
        <meta name="msapplication-square150x150logo" content="/site/assets/img/logos/logo.png" />
                
        <link rel="author" href="https://plus.google.com/110321962486563701655" />
        <link rel="apple-touch-icon" href="/site/assets/img/logos/logo.png" />
        <link rel="icon" type="image/png" href="/favicon.png" />  
                                
        <link rel="stylesheet" type="text/css" href="/site/assets/css/normalize.min.css" />
        <link rel="stylesheet" type="text/css" href="/site/assets/css/syntax.min.css" />
        <link rel="stylesheet" type="text/css" href="/site/assets/css/common.min.css" />
               
        <script src="/dist/1.0.0/head.min.js"></script>
    </head>
    <body>
        <span itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer"><meta itemprop="price" content="0.00"/></span>
        <!-- ..maybe maybe not
        <span itemprop="aggregateRating" itemscope="itemscope" itemtype="http://schema.org/AggregateRating"><meta itemprop="ratingValue" content="4.8" /></span>        
         -->        
        <div class="absolute left hide-1280" style="left: 10px; top: 75px;">
            <a href="/"><img src="/site/assets/img/logos/logo.png" alt="HeadJS" height="124" width="124" /></a>   
                              
            <div style="height: 300px; overflow: hidden; width: 200px; white-space:nowrap">
                <h3>Latest News</h3>
                {% for post in site.posts  %}              
                <p>
                    <em>{{ post.date | date_to_string }}</em><br />
                    * <a href="{{ post.url }}">{{ post.title }}</a>
                </p>
                {% endfor %}              
            </div>
        </div>   
                                           
        <img src="/site/assets/img/social/html5-css3-gray.png" alt="HTML5 & CSS3" height="100" width="164" class="absolute hide-1440" style="top: 75px; right: 45px" />

        <a href="http://github.com/headjs/headjs" onclick="trackPageView('github.com')" class="github-fork" target="_blank">
            <img alt="Fork me on GitHub" src="/site/assets/img/forkme.png"  width="149" height="149" />
        </a>
        
        {% include sections/menu.html %}        
        
        <div class="container tagline hide-640" style="background-color: white">                                               
            <div class="group" style="text-align: left; border-radius: 5px 5px 5px 5px; color: white; background-color: #767676; background: linear-gradient(to bottom, #767676  0%, #000000 100%) repeat scroll 0 0 transparent; padding: 10px">
                <div class="float-l"> 
                    <h1 itemprop="name" style="font-size: 3em; margin: 0 45px 0 0">HeadJS</h1>
                    <strong>v{{site.head.minor}}</strong>                                 
                </div>
                <div class="float-l">                
                    <h2>The only script in your &lt;HEAD&gt;</h2>
                    <h3>A tiny script, to simplify, speed up, and modernize your site !</h3>
                </div>         
            </div>                                                    
        </div>
                                 
        <div class="container main" role="main">
            <div style="padding: 10px; min-height: 700px;">  

                {{ content }}          
                        
                <a href="#" class="up">Top</a> 
            </div>
        </div>      
          
        {% include sections/featured.html %}
        
        <!-- Contact Bar -->        
        {% include sections/footer.html %}
        
        {% include scripts/analytics.html %}                
        <script src="//platform.linkedin.com/in.js" defer></script>
        <script src="//platform.twitter.com/widgets.js" defer></script>
        <script src="//apis.google.com/js/plusone.js" defer></script>    

        {% for item in page.scripts %}
        <script src="{{ item }}"></script>
        {% endfor %}
    </body>
</html>