---
layout: layout
---

<!-- <img src="{{ site.baseurl }}/{% if page.header-img %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}" width="0" height="0"> -->

<!-- Post Header -->
<style type="text/css">
    header.intro-header{
        /*background-image: url('{{ site.baseurl }}/{% if page.header-img %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}')*/
        height: 500px;
        overflow: hidden;
    }
    header iframe{
        width: 100%;
        height: 100%;
        border: 0;
    }
</style>
<header class="intro-header" >
    <iframe src="<%= page.iframe %>"/>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="post-heading">
                        <div class="tags">
                            <% page.tags.forEach(function(tag){ %>
                              <a class="tag" href="<%= config.root %><%= tag.path %>" title="<%= tag.name %>"><%= tag.name %></a>
                            <% }) %>
                        </div>

                        <h1><%= page.title %></h1>
                        <h2 class="subheading"><%= page.subtitle %></h2>
                        <span class="meta">
                            Posted by <%- page.author || config.author %> on
                            <%= page.date.format(config.date_format) %>
                        </span>
                        
                    </div>
                </div>
            </div>
        </div>
    </iframe>
</header>

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">

    <!-- Post Container -->
            <div class="
                col-lg-8 col-lg-offset-2
                col-md-10 col-md-offset-1
                post-container">

                <%- page.content %>

                <hr>

                <ul class="pager">
                    <% if (page.prev){ %>
                        <li class="previous">
                            <a href="<%- config.root %><%- page.prev_link %>" data-toggle="tooltip" data-placement="top" title="<%- page.prev.title %>">&larr; Previous Post</a>
                        </li>
                    <% } %>
                    <% if (page.next){ %>
                        <li class="next">
                            <a href="<%- config.root %><%- page.next_link %>" data-toggle="tooltip" data-placement="top" title="<%- page.next.title %>">Next Post &rarr;</a>
                        </li>
                    <% } %>
                </ul>

                <% if(config['disqus_username']) { %>
                <!-- disqus start -->
                <div class="comment">
                    <div id="disqus_thread" class="disqus-thread"></div>
                </div>
                <!-- disqus end -->
                <% } %>

            </div>

            <!-- Sidebar Container -->

            <div class="
                col-lg-8 col-lg-offset-2
                col-md-10 col-md-offset-1
                sidebar-container">

                <!-- Featured Tags -->
                <% if(config['featured-tags']) { %>
                <section>
                    <!-- no hr -->
                    <h5><a href="<%= config.root %>tags/">FEATURED TAGS</a></h5>
                    <div class="tags">
                        <%- list_tags({style: '', class: '', show_count: false, separator: ''}) %>
                    </div>
                </section>
                <% }%>

                <!-- Friends Blog -->
                <% if(config.friends) { %>
                <hr>
                <h5>FRIENDS</h5>
                <ul class="list-inline">

                    <% config.friends.forEach(function(friend){ %>
                        <li><a href="<%= friend.href %>"><%= friend.title %></a></li>
                    <% }); %>
                </ul>
                <% }%>
            </div>

        </div>
    </div>
</article>

<% if(config['disqus_username']) { %>
<!-- disqus -->
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES * * */
    var disqus_shortname = "<%= config['disqus_username'] %>";
    var disqus_identifier = "<%= page.permalink %>";
    var disqus_url = "<%= page.permalink %>";

    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<!-- disqus end -->
<% } %>

<% if(config['anchorjs']) { %>
<!-- async load function -->
<script>
    function async(u, c) {
      var d = document, t = 'script',
          o = d.createElement(t),
          s = d.getElementsByTagName(t)[0];
      o.src = u;
      if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
      s.parentNode.insertBefore(o, s);
    }
</script>
<!-- anchor-js, Doc:http://bryanbraun.github.io/anchorjs/ -->
<script>
    async("https://cdn.bootcss.com/anchor-js/1.1.1/anchor.min.js",function(){
        anchors.options = {
          visible: 'always',
          placement: 'right',
          icon: '#'
        };
        anchors.add().remove('.intro-header h1').remove('.subheading').remove('.sidebar-container h5');
    })
</script>
<style>
    /* place left on bigger screen */
    @media all and (min-width: 800px) {
        .anchorjs-link{
            position: absolute;
            left: -0.75em;
            font-size: 1.1em;
            margin-top : -0.1em;
        }
    }
</style>
<% } %>