{% extends 'base.html' %}
{% load typogrify_tags %}
{%block htmlclass%}class="black"{%endblock%}
{%block bodyid%}id="home" class="has-hero"{%endblock%}

{% block primary %}<section class="banner">{% with object=homepage.banner %}
        <article class="h-entry hentry">
            <div class="post--image">
                <a href="{{object.get_absolute_url}}" title="{{object.title}}">
                    <picture>
                    <!--<source media="(min-width: 45em)" srcset="large.jpg">-->
                        <source media="(max-width: 30em)" srcset="{{object.get_image_hero_url_sm}}">
                        <img src="{{object.get_image_hero_url}}" alt="{{ object.title }}" class="u-photo post-image homepage--hero" />
                    </picture>
                </a>
            </div>
            <div class="hero--wrapper">
            <h1 class="p-name entry-title post--title main--header"><a href="{{object.get_absolute_url}}" class="u-url" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">{{object.title|safe|smartypants}}</a></h1>
            <p class="p-author author hide">Scott Gilbertson</p>
            <time class="dt-published published dt-updated post--date" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
            <p class="p-location h-adr adr post--location main--location">
                    {% if object.country.name == "United States" %}<span class="p-locality locality" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/jrnl/united-states/" title="travel writing from the United States">{{object.state.name}}</a>, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.country.slug}}/" title="travel writing from {{object.country.name}}">{{object.country.name}}</a>{%endif%}
                    <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}"></data>
                    <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}"></data>
            </p>
            <p class="p-summary main--tag">
              Explore the lost era of oyster farmers.      
            </p>
            <a href="{{object.get_absolute_url}}" class="u-url btn" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">Read</a>
        </div>
    </article>{% endwith %} 
   </section>
    {%comment%}<section id="currently">
            <div class="project-tease"><a href="/projects/5x5/"><h4 id="proj">5<span>x</span>5</h4> Interviews From The Road</a><p>Lorem sit amet, consectetur adipiscing elit. Duis cursus sodales eros <cite>&ndash; William Brandon III</cite></p></div>
       </section>{%endcomment%}
    <div class="homepage--about homepage--section">
        <h3 class="homepage--arc-header">About Luxagraf</h3>
        <p>I like to think of luxagraf as the notebook you might have found, something I might have accidentally dropped between the cushions of a jostling, camel-powered taxi winding its way through the narrow, bumpy, dusty streets of Tangier circa 1910.</p>
        <p>It could just be a website though. Except that I don&#8217;t do lists. And I&#8217;m not trying to make&nbsp;money.</p><p>Luxagraf is a collection of field notes, a record of some of my time on earth. Enjoy.</p> 
    </div>
    <div class="homepage--section">
    <section class="archive homepage--archives">
        <h1 class="homepage--arc-header">Most Popular</h1>
        {% for object in homepage.entry_list.all %}
        <article class="h-entry hentry">
            <div class="post--image">
                <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img src="{{object.get_image_wide_url}}" alt="{{ object.title }}" class="u-photo post-image" /></a>
            </div>
            <h1 class="p-name entry-title post--title"><a href="{{object.get_absolute_url}}" class="u-url" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">{{object.title|safe|smartypants|widont}}</a></h1>
            <p class="p-author author hide">Scott Gilbertson</p>
            <time class="dt-published published dt-updated post--date" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
            <p class="p-location h-adr adr post--location">
                {% if object.country.name == "United States" %}<span class="p-locality locality" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/jrnl/united-states/" title="travel writing from the United States">{{object.state.name}}</a>, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.country.slug}}/" title="travel writing from {{object.country.name}}">{{object.country.name}}</a>{%endif%}
                <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}"></data>
                <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}"></data>
            </p>
        </article> {% endfor %}
        <p><a href="/" class="homepage--next">Read More</a></p>
    </section>
    <section class="homepage--bright">
        <h1 class="homepage--arc-header">Join the Mailing List</h1>
        {% include 'mailing_list.html' %}
    </section>
    </div>
{% endblock %}

{% block js %}{% comment %} <script async src="/media/js/hyphenate.min.js" type="text/javascript"></script>{% endcomment%}{% endblock%}