version 9 of stylesheet

1 files changed, 68 insertions, 72 deletions

diff --git a/design/templates/archives/homepage-light.html b/design/templates/archives/homepage-light.html
index 1d02e86..e9bc241 100644
--- a/design/templates/archives/homepage-light.html
+++ b/design/templates/archives/homepage-light.html
@@ -8,96 +8,92 @@
 
     {%block extrahead%}
 <style>
-    .homepage--hero {
+@media screen and (min-width: 1440px) {
+    .banner .post-image img {
         margin-top: {{homepage.image_offset_vertical}};
     }
+}
 </style>
 {%endblock%}
-{%block bodyid%}id="home" class="has-hero v082016"{%endblock%}
+{%block bodyid%}id="home" class="archive"{%endblock%}
 
 {% block primary %}<section class="banner">{% with object=homepage.featured %}
         <article class="h-entry hentry" itemscope itemType="http://schema.org/Article">
-            <div class="post--image">
-                <a href="{{object.get_absolute_url}}" title="{{object.title}}">
-                    {%with image=homepage.featured_image%}
-                    <img class="u-photo post-image homepage--hero"  itemprop="image" sizes="(max-width: 960px) 100vw"
-srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.name %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}
-                                                                                     {% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%}src="{% get_image_by_size image size.name %}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}">
-                    {%endwith%}
+            <figure class="post-image">
+                <a href="{{object.get_absolute_url}}" title="{{object.title}}">{%with image=homepage.featured_image%}
+                    <img class="u-photo"  itemprop="image" sizes="(max-width: 960px) 100vw"
+srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.name %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}{% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%} src="{% get_image_by_size image size.name %}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}">{%endwith%}
                 </a>
+                <figcaption> 
+                    <div class="hero-text-wrapper">
+                    <h2 class="p-name entry-title" itemprop="headline"><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></h2>
+                    <p class="p-author author hide" itemprop="author">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="post-summary">
+                        <span class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">{% if object.country.name == "United States" %}<span class="p-locality locality">{{object.location.name|smartypants|safe}}</span>, {{object.state.name}}, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, {{object.country.name}}{%endif%}</span>
+                        <span class="p-summary" itemprop="description">
+                            {{homepage.tag_line|safe|smartypants}}
+                        </span>
+                    </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>
+                </figcaption>
+            </figure>
+    </article>{% endwith %} 
+   </section>
+    <section class="bio-short">
+        <h1 class="homepage-section-header">About Luxagraf</h1>
+        <img src="/media/img/usa-resize.svg" alt="map of travels" class="homepage-map-img" />
+        <p>After nearly two years exploring the U.S. in our home, a 1969 Dodge Travco RV, we left the states to spend the winter in Mexico.</p>
+        <p>We left our former home in Athens, GA in the Spring of 2017. We were most recently in <span class="p-location h-adr adr " itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> {% if location.location.state.country.name == "United States" %}<span class="p-locality locality">{{location.location.name|smartypants|safe}}</span>, {{location.location.state.code|safe}}{%else%}<span class="p-region">{{location.location.name|smartypants|safe}}</span>, {{location.location.state.country.name|safe}}</a>{%endif%}</span>. The map <span class="addafter"><span class="subcontent">above</span></span> has a rough sketch of our route to date. You can read about our adventures in the <a href="/jrnl/">journal</a> section. There's more about us on the <a href="/about">about page</a> </p>
+    </section>
+    <section class="recent-popular">
+        <div class="recent">
+        <h1 class="homepage-section-header">Recent</h1>
+        <div  class="archive-grid">{% for object in recent %}
+        <article class="h-entry hentry archive-card {% cycle 'odd' 'even' %} {% cycle 'first' 'second' 'third' %}" itemscope itemType="http://schema.org/Article">
+            <div class="post-image">
+                <a href="{{object.get_absolute_url}}" title="{{object.title}}">{% if object.featured_image %}
+                    {% include "lib/img_archive.html" with image=object.featured_image %}
+                    {%else%}
+                    <img src="{{object.get_image_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" />{%endif%}</a>
             </div>
-            <div class="hero--wrapper">
-            <h2 class="p-name entry-title post--title main--header" itemprop="headline"><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></h2>
-            <p class="p-author author hide" itemprop="author">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="post--location main--location">
-                <span class="p-location h-adr adr" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
+            <h2 class="p-name entry-title post-title" itemprop="headline"><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></h2>
+            <p class="p-author author hide" itemprop="author"><span class="byline-author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Scott Gilbertson</span></span></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="post-summary">
+                <span class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
                     {% if object.country.name == "United States" %}<span class="p-locality locality">{{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%}
-                    <span style="display: none;" itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
-                        <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}">{{object.latitude}}</data>
-                        <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}">{{object.longitude}}</data>
-                    </span>
-                </span>
-            </p>
-            <p class="p-summary main--tag">
-            {{homepage.tag_line|safe|smartypants}}
+                </span> 
             </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>
+        </article> {% endfor %}
         </div>
-    </article>{% endwith %} 
-   </section>
-    <div class="homepage--about homepage--section">
-        <h3 class="homepage--arc-header">About Luxagraf</h3>
-        <p>Luxagraf is the notebook I use to record things for posterity. Something that, in an earlier age, you'd accidentally leave in the backseat of a taxi. Here it exists as long as there's energy to keep the internet on.</p>
-        <p>About us: We're currently exploring North America in our new home, a 1969 Dodge Travco RV.</p>
-            <p>We left our former home in Athens, GA in the Spring of 2017. We were most recently in <span class="p-location h-adr adr " itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> {% if location.location.state.country.name == "United States" %}<span class="p-locality locality">{{location.location.name|smartypants|safe}}</span>, {{location.location.state.code|safe}}{%else%}<span class="p-region">{{location.location.name|smartypants|safe}}</span>, {{location.location.state.country.name|safe}}</a>{%endif%}</span>. The map over there has a rough sketch of our route to date. You can read about our adventures in the <a href="/jrnl/">journal</a> section. </p>
-    </div>
-    <div class="homepage--section">
-    <section class="homepage--bright archive homepage--arc-big">
-        <h1 class="homepage--arc-header">Most Recent</h1>
-        {% for object in recent %}
-        <article class="h-entry hentry {%cycle "odd" "even"%}" itemscope itemType="http://schema.org/Article">
-            <div class="post--image">
-                <a href="{{object.get_absolute_url}}" title="{{object.title}}">
-                    <img src="{% for size in object.featured_image.sizes.all%}{% if size.name == 'featured_jrnl'%}{% get_image_by_size object.featured_image size.name %}{%endif%}{%endfor%}" alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}" />
+        </div>
+        <div class="popular">
+        <h1 class="homepage-section-header">Popular</h1>
+        <div class="archive-grid">{% for object in homepage.popular.all %}
+        <article class="h-entry hentry archive-card {% cycle 'odd' 'even' %} {% cycle 'first' 'second' 'third' %}" itemscope itemType="http://schema.org/Article">
+            <div class="post-image">
+                <a href="{{object.get_absolute_url}}" title="{{object.title}}">{% if object.featured_image %}
+                    {% include "lib/img_archive.html" with image=object.featured_image %}
+                    {%else%}
+                    <img src="{{object.get_image_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" />{%endif%}</a>
             </div>
-            <h2 class="p-name entry-title post--title" itemprop="headline"><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></h2>
-            <p class="p-author author hide" itemprop="author">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="post--location">
-                <span class="p-location h-adr adr" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
+            <h2 class="p-name entry-title post-title" itemprop="headline"><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></h2>
+            <p class="p-author author hide" itemprop="author"><span class="byline-author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Scott Gilbertson</span></span></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="post-summary">
+                <span class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
                     {% if object.country.name == "United States" %}<span class="p-locality locality">{{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%}
-                    <span style="display: none;" itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
-                        <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}">{{object.latitude}}</data>
-                        <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}">{{object.longitude}}</data>
-                    </span>
                 </span>
             </p>
-        </article>{% endfor %}
+        </article> {% endfor %}
+        </div>
+        </div>
     </section>
-    <section class="archive homepage--bright popular">
-        <h1 class="homepage--arc-header">Popular</h1>
-        <div class="arc-col">{% for object in homepage.popular.all %}
-        <article class="h-entry hentry {%cycle "odd" "even"%}" itemscope itemType="http://schema.org/Article">
-            <div class="post--image">
-                <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img src="{{object.get_image_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" /></a>
-            </div>
-            <h2 class="p-name entry-title post--title" itemprop="headline"><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></h2>
-            <p class="p-author author hide" itemprop="author">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="post--location">
-                <span class="p-location h-adr adr" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
-                    {% if object.country.name == "United States" %}<span class="p-locality locality">{{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%}
-                    <span style="display: none;" itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
-                        <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}">{{object.latitude}}</data>
-                        <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}">{{object.longitude}}</data>
-                    </span>
-                </span> 
-            </p>
-        </article> {% endfor %}</div>
+    <section>
+        <p class="homepage-next"><a href="/jrnl/">Browse the Archives</a></p>
     </section>
-        <p class="homepage--next"><a href="/jrnl/">Browse the Archives</a></p>
-    </div>
 {% endblock %}
 
 {% block js %}{% comment %} <script async src="/media/js/hyphenate.min.js" type="text/javascript"></script>{% endcomment%}{% endblock%}