{% extends "templates/base.html" %}

{% block page-metadata %}
<!-- General Metadata (per-page) -->
<meta name="author" content="Forgotten Roads MX">

<!-- Dublic Core Metadata (per-page) -->
<meta name="DC.title" lang="en" content="{{ page-data.site-title }}">
<meta name="DC.creator" content="Forgotten Roads MX">
<meta name="DC.subject" content="Site Landing Page">
<meta name="DC.identifier" scheme="DCTERMS.URI" content="http://forgotten.roads.mx/blog/">
<meta name="DCTERMS.abstract" content="{{ page-data.site-description }}">

<!-- Facebook's OpenGraph Metadata -->
<meta property="og:site_name" content="{{ page-data.site-title }}">
<meta property="og:title" content="{{ page-data.site-title }}">
<meta property="og:url" content="http://forgotten.roads.mx/blog/">
<meta property="og:type" content="blog">
<meta property="og:description" content="{{ page-data.site-description }}">
<meta property="og:image" content="http://forgotten.roads.mx/blog/img/roadtrip5-narrow-with-text.jpg">

<!-- Twitter Card Metadata -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ForgottenRdsMX">
<meta name="twitter:creator" content="@ForgottenRdsMX">
<meta name="twitter:title" content="{{ page-data.site-title }}">
<meta name="twitter:url" content="http://forgotten.roads.mx/blog/">
<meta name="twitter:description" content="{{ page-data.site-description }}">
<meta name="twitter:image" content="http://forgotten.roads.mx/blog/img/roadtrip5-narrow-with-text.jpg">
{% endblock %}

{% block header-class %}{% endblock %}

{% block head-postpends %}
  <script type="text/javascript">
    $(document).on('scroll', function() {
      if ($(document).scrollTop() > 0) {
        $('header').addClass('home-tiny');
      } else {
        $('header').removeClass('home-tiny');
      }
    });
  </script>
{% endblock %}

{% block contained-main-content %}
<div class="row">
  <div class="col-sm-8 blog-main">

    <!-- <h1>{{ page-data.site-title }}</h1> -->
    <p class="home-lead">{{ page-data.site-description }}</p>

    <div class="row">
      <div class="col-sm-12">

        <div class="headliner well">

          {% if headliner.header-image %}
            <img src="{{ page-data.base-path }}/{{ headliner.header-image }}" />
          {% endif %}
          <h2>
            <a href="{{ headliner.url }}">{{ headliner.title }}</a>
          </h2>
          {% if headliner.subtitle %}
            <h3>{{ headliner.subtitle }}</h3>
          {% endif %}
          <div class="row">
            <div class="col-sm-4 metadata">
              <p>Date: {{ headliner.datestamp }}</p>
            </div>
            <div class="col-sm-4 metadata">
              <p>Author: <a href="/blog/authors/#{{ headliner.author }}">{{ headliner.author }}</a></p>
            </div>
            <div class="col-sm-4 metadata">
              <p>Category: <a href="/blog/categories/#{{ headliner.category }}">{{ headliner.category }}</a></p>
            </div>
          </div>
          {% if headliner.excerpt-100 %}
            <p class="excerpt">{{ headliner.excerpt-100|safe }}</p>
            <div class="clearfix">
              <a href="{{ headliner.url }}" class="btn btn-tales-one">Read More</a>
            </div>
          {% endif %}

        </div>

      </div>
    </div>

    {% for row in posts-data %}
    <div class="row row-full-height subheadliner">
      {% for column in row %}
      <div class="col-sm-6 well subheadliner">

          {% if column.header-image %}
            <img src="{{ page-data.base-path }}/{{ column.header-image }}" />
          {% endif %}
          <h2>
            <a href="{{ column.url }}">{{ column.title }}</a>
          </h2>
          {% if column.subtitle %}
            <h3>{{ column.subtitle }}</h3>
          {% endif %}
          <div class="metadata">
            <p>Date: {{ column.datestamp }}</p>
            <p>Author: <a href="/blog/authors/#{{ column.author }}">{{ column.author }}</a></p>
            <p>Category: <a href="/blog/categories/#{{ column.category }}">{{ column.category }}</a></p>
          </div>
          {% if column.excerpt-50 %}
            <p class="excerpt">{{ column.excerpt-50|safe }}</p>
            <div class="clearfix">
              <a href="{{ column.url }}" class="btn btn-tales-one">Read More</a>
            </div>
          {% endif %}

      </div>
      {% endfor %}
    </div>
    {% endfor %}

    <div class="below-fold">
      {% for post in below-fold-data %}
      <div class="article">
        <div class="title"><h2><a href="{{ post.url }}">{{ post.title }}</a>{% if post.subtitle %} - {{ post.subtitle }}{% endif %}</h2></div>
        {% if post.excerpt-25 %}
        <div class="excerpt"><p>{{ post.excerpt-50|safe }}</p></div>
        {% endif %}
        <div class="author"><p>By <a href="/blog/authors/#{{ post.author }}">{{ post.author }}</a></p></div>
      </div>
      {% endfor %}
    </div>

    <div>
      <a href="/blog/archives/" class="btn btn-tales-one">View older posts</a>
    </div>

  </div>

  <aside class="col-md-4 blog-aside">

    <div class="aside-widget">
      <header>
        <h3>Featured Excursionists</h3>
      </header>
      <div class="body">
        <ul class="tales-list">
          <li><a href="/blog/archives/2017-06/16-170908/the-lower-48-challenge.html">The Lower-48 Challenge</a></li>
          <li><a href="/blog/archives/2016-07/31-114941/knucklehead-at-sturgis.html">Knucklehead at Sturgis</a></li>
        </ul>
      </div>
    </div>

    <div class="aside-widget">
      <header>
        <h3>Most Read</h3>
      </header>
      <div class="body">
        <ul class="tales-list">
          <li><a href="/blog/archives/2017-06/18-172828/lessons-learned-when-packing-a-cruiser-for-touring.html">Lessons Learned When Packing a Cruiser for Touring</a></li>
          <li><a href="/blog/archives/2017-08/13-193659/it-s-a-saddle-not-a-couch.html">It's a Saddle, Not a Couch</a></li>
          <li><a href="/blog/archives/2017-07/21-193252/frmx-google-maps-custom-theme.html">FRMX Google Maps Custom Theme</a></li>
          <li><a href="/blog/archives/2016-09/19-221343/the-beginning-of-a-new-project.html">The Beginning of a New Project</a></li>
        </ul>
      </div>
    </div>

    <div class="aside-widget subscribe-widget">
      <header>
        <h3>Subscribe</h3>
      </header>
      <div class="body">
        Receive notifications when there are new Forgotten Roads blog posts published by signing up <a href="https://groups.google.com/forum/#!forum/frmx-new-posts">here</a>.
      </div>
    </div>

    <div class="aside-widget tags-widget">
      <header>
        <h3>Tags</h3>
      </header>
      <div class="body">
        <ul>
          {% for tag in tags %}
          <li>
            <a href="{{ page-data.base-path }}/tags/#{{tag.name}}" class="tag-5star-{{ tag.five-star }}">{{ tag.name }}</a>
          </li>
          {% endfor %}
        </ul>
      </div>
    </div>

    <div class="aside-widget">
      <header>
        <h3>FRMX on Twitter</h3>
      </header>
      <p>
        <a class="twitter-timeline" data-lang="en" data-width="350" data-height="600" data-link-color="#c68533" href="https://twitter.com/ForgottenRdsMX">FRMX on Twitter</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
      </p>
    </div>

</div>
{% endblock %}