<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>{{ page.title }}</title>
    <meta name="viewport" content="width=device-width">

    <!-- syntax highlighting CSS -->
    <link rel="stylesheet" href="/css/syntax.css">
    <!--<link href="/css/bootstrap.css" rel="stylesheet">-->
    <link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">

    <!--<link rel="stylesheet" href="/css/bootstrap-responsive.min.css">-->

    <!-- Custom CSS -->
    <link rel="stylesheet" media="only screen" href="/css/main.css">
    <link rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 599px)" href="/css/main-xs.css">
    <link rel="stylesheet" media="only screen and (min-width: 600px) and (max-width: 1199px)" href="/css/main-medium.css">
    <link rel="stylesheet" media="only screen and (min-width: 1200px)" href="/css/main-desktop.css">
    <link href='http://fonts.googleapis.com/css?family=Overlock|Comfortaa' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <div id="container" class="container">
      <header id="header">
      <h1 id="headline"><a href="/">balkian</a><a href="/">.com</a></h1>
        <div id="navbar" class="navbar navbar-inverse navbar-static-bottom">
          <div class="container">
            <div class="navbar-header">
              <ul class="nav navbar-nav">
                <li {% if page.categories contains "blog" %}class="active" {% endif %}>
                    <a href="/"><i class="icon-home icon-large"></i> Blog</a>
                  </li>
                {% for p in site.pages reversed %} {% if p.url contains "/page" %} {% else %} {% if p.url != "/index.html" %}
                  <li {% if p.url == page.url %} class="active" {% else %} {% if page.categories contains p.categories %} class="active" {% endif %} {% endif %} >
                    <a href="{{ p.url | remove: "/index.html" }}">{{ p.title }}</a>
                  </li> {% endif %} {% endif %}
                {% endfor %}
                <!--<li class="dropdown">-->
                <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>-->
                <!--<ul class="dropdown-menu">-->
                  <!--<li><a href="#">Action</a></li>-->
                  <!--<li><a href="#">Another action</a></li>-->
                  <!--<li><a href="#">Something else here</a></li>-->
                  <!--<li class="divider"></li>-->
                  <!--<li class="dropdown-header">Nav header</li>-->
                  <!--<li><a href="#">Separated link</a></li>-->
                  <!--<li><a href="#">One more separated link</a></li>-->
                <!--</ul>-->
                <!--</li>-->
              </ul>
          </div>
        </div>
      </header>
      <div id="contentwrapper">
        <div id="sidebar" >
          <div id="badge" class="flip-container" ontouchstart="this.classList.toggle('hover');">
              <div class="flipper">
                <div class="front sticky">
                  <!-- front content -->
                  <img id="avatar" width=100% src="/img/me.png">
                </div>
                <div class="back stickyback">
                  <!-- back content -->
                  <img id="picture" width=100% src="/img/me.jpg">
                </div>
              </div>
          </div>
          <div class="entries">
            <h1 class="title">Latest entries</h1>
            <dl>
                {% for p in site.posts limit: 5 %}
                <dt><a href="{{ p.url }}">{{ p.title }}</a></dt>
                  {% for c in p.tags %}
                  <dd class="label label-default">{{ c }}</dd>
                  {% endfor %}
                {% endfor %}
            </dl>
          </div>
            <!--Sidebar content-->
        </div>
        <div id="content">
          <!--Body content-->
          {{ content }}
        </div>
        <div class="clear"></div>
      </div>
      <footer role="contentinfo">
        <div class="contact">
          <p>
          J. Fernando Sánchez Rada | balkian
          </p>
        </div>
        <ul id="social">
          <li><a href="http://github.com/balkian"><i class="icon-github"></i></a></li>
          <li><a href="http://bitbucket.com/balkian"><i class="icon-bitbucket"></i></a></li>
          <li><a href="http://twitter.com/balkian"><i class="icon-twitter"></i></a></li>
          <li><a href="https://plus.google.com/u/0/111897020957944410316"><i class="icon-google-plus"></i></a></li>
          <li><a href="http://linkedin.com/in/jfsanchezrada"><i class="icon-linkedin"></i></a></li>
          <li><a href="http://facebook.com/balkian"><i class="icon-facebook-sign"></i></a></li>
        </ul>
          <p>
          Creative Commons A-SA-NC
          </p>
      </footer>
    </div>

    <script src="/js/jquery-2.0.2.min.js"></script>
    <!--<script src="/js/bootstrap.min.js"></script>-->
  </body>
</html>
