<!DOCTYPE html>
<html lang="{{ setting.blog.language }}">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="{{ page.excerpt }}">
    <meta name="author" content="{{ page.author }}">
    <link rel="icon" href="/assets/images/favicon.ico">

    <title>{{ page.title }}</title>

    <!-- Bootstrap Core CSS -->
    <link href="/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Theme CSS -->
    <link href="/assets/css/clean-blog.min.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="/assets/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <!-- TODO
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                Menu <i class="fa fa-bars"></i>
            </button>
            -->
            <a class="navbar-brand" href="/">{{ setting.blog.name }}</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <!-- TODO
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="/">Home</a>
                </li>
                <li>
                    <a href="about.html">About</a>
                </li>
                <li>
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
        </div>
        -->
    </div>
</nav>

<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
{% if page.image %}
<header class="intro-header" style="background-image: url('{{ page.image }}')">
{% elif page.color %}
<header class="intro-header" style="background-color: {{ page.color }}">
{% else %}
<header class="intro-header" style="background-color: black">
{% endif %}
    <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">
                    <h1>{{ page.title }}</h1>
                    {% if page.excerpt %}
                    <h2 class="subheading">{{ page.excerpt }}</h2>
                    {% endif %}
                    {% if page.author or page.date %}
                    <span class="meta">
                        Posted{% if page.author %} by {{ page.author }}{% endif %}{% if page.date %} on {{ page.date }}{% endif %}
                    </span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                {{ content }}
            </div>
            <div id="disqus_thread" class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"></div>
            <script>
            (function() {
                var d = document, s = d.createElement('script');
                s.src = '//pebbles-adventures.disqus.com/embed.js';
                s.setAttribute('data-timestamp', +new Date());
                (d.head || d.body).appendChild(s);
            })();
            </script>
            <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
        </div>
    </div>
</article>

<hr>

<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <ul class="list-inline text-center">
                    {% if setting.author.twitter %}
                    <li>
                        <a href="{{ setting.author.twitter }}">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                    {% endif %}
                    {% if setting.author.facebook %}
                    <li>
                        <a href="{{ setting.author.facebook }}">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                    {% endif %}
                    {% if setting.author.github %}
                    <li>
                        <a href="{{ setting.author.github }}">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                    {% endif %}
                </ul>
                <p class="copyright text-muted">Copyright &copy; {{ setting.author.name }} 2016</p>
            </div>
        </div>
    </div>
</footer>

<!-- jQuery -->
<script src="/assets/vendor/jquery/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="/assets/vendor/bootstrap/js/bootstrap.min.js"></script>

<!-- Theme JavaScript -->
<script src="/assets/js/clean-blog.min.js"></script>

</body>

</html>
