version 9 of stylesheet

8 files changed, 132 insertions, 142 deletions

diff --git a/design/templates/archives/books.html b/design/templates/archives/books.html
index 1c139e6..59bac34 100644
--- a/design/templates/archives/books.html
+++ b/design/templates/archives/books.html
@@ -4,30 +4,30 @@
 {% load pagination_tags %}
 {% block pagetitle %} Books | luxagraf {% endblock %}
 {% block metadescription %}Books I've read and thoughts on them. {% endblock %}
-{%block bodyid%}class="books" id="books-archive"{%endblock%}
+{%block bodyid%}class="archive" id="books-archive"{%endblock%}
 
 {% block primary %}
     <ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
         <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
         <li>Books</li>
     </ul>
-        <main role="main">{% autopaginate object_list 24 %}
+    <main>{% autopaginate object_list 24 %}
         <h1 class="hide">Books</h1>
-<div class="book-list projects--intro">
-        <p>I wear glasses because as a child I would stay up late, covers pulled over my head, reading by the dim light of a dying flashlight. At least that's what an eye doctor told me when I was younger. Probably a load of crap, but I still love reading and I still often do it by poor light far later in the night than is reasonable.</p>
-        <p>I've always taken notes while reading, usually with a pen and paper, but sometimes as highlights in the Kindle. And of course since I have all this stuff in text files I thought might as well put it online. So here you have it, books I've read and things I've thought about them.</p>
-</div>
-    <nav class="pagination">{% paginate %}
-    </nav>
-       <div class="book-list"> {% for object in object_list %}
-            <article class="book-list-item {% cycle "odd" "even" %} {% cycle "uno" "dos" "tres" %}" itemscope itemtype="http://schema.org/Book">
+        <div class="intro">
+                <p>I wear glasses because as a child I would stay up late, covers pulled over my head, reading by the dim light of a dying flashlight. At least that's what an eye doctor told me when I was younger. Probably a load of crap, but I still love reading and I still often do it by poor light far later in the night than is reasonable.</p>
+                <p>I've always taken notes while reading, usually with a pen and paper, but sometimes as highlights in the Kindle. And of course since I have all this stuff in text files I thought might as well put it online. So here you have it, books I've read and things I've thought about them.</p>
+        </div>
+        <nav class="pagination">{% paginate %}
+        </nav>
+        <div class="archive-grid book-grid"> {% for object in object_list %}
+            <article class="archive-card" itemscope itemtype="http://schema.org/Book">
                 {% if object.image %}<div class="img-wrapper"><a href="{{object.get_absolute_url}}"><img itemprop="image" src="{{object.get_image_url}}" alt="cover art for {{object.title}} by {{object.author_name}}"/></a></div>{%endif%}
-            <h2 itemprop="name"><a href="{{object.get_absolute_url}}">{{object.title|amp|smartypants|widont|safe}}</a></h2>
-            <h4 itemprop="author">{{object.author_name}}</h4>
-            <div itemprop="review" itemscope itemtype="http://schema.org/Review">
-                {% if object.rating %}<span class="book-stars" itemprop="reviewRating">{% for i in object.ratings_range %}{% if i <= object.get_rating%}&#9733;{%else%}&#9734;{%endif%}{%endfor%}</span>{%endif%}
-                <span class="hide" itemprop="author">Scott Gilbertson</span>
-                <meta itemprop="datePublished" content="{{object.read_date|date:'F Y'}}"><span class="read-in">Read in: {{object.read_date|date:"F Y"}}</span></div>
+                <h2 class="post-title" itemprop="name"><a href="{{object.get_absolute_url}}">{{object.title|amp|smartypants|widont|safe}}</a></h2>
+                <h4 class="author" itemprop="author">{{object.author_name}}</h4>
+                <div class="post-summary" itemprop="review" itemscope itemtype="http://schema.org/Review">
+                    {% if object.rating %}<span class="book-stars" itemprop="reviewRating">{% for i in object.ratings_range %}{% if i <= object.get_rating%}&#9733;{%else%}&#9734;{%endif%}{%endfor%}</span>{%endif%}
+                    <span class="hide" itemprop="author">Scott Gilbertson</span>
+                    <meta itemprop="datePublished" content="{{object.read_date|date:'F Y'}}"><span class="read-in">Read in: {{object.read_date|date:"F Y"}}</span></div>
         </article>
         {% endfor %}</div>
     <nav class="pagination">{% paginate %}
diff --git a/design/templates/archives/figments.html b/design/templates/archives/figments.html
index 1ef636f..da7628e 100644
--- a/design/templates/archives/figments.html
+++ b/design/templates/archives/figments.html
@@ -1,5 +1,6 @@
 {% extends 'base.html' %}
 {% load typogrify_tags %}
+{%block bodyid%}class="archive" id="figments-archive"{%endblock%}
 
 {% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
     <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>{% if series %}
@@ -8,16 +9,18 @@
     <li>Figments</li>{%endif%}
     </ul>
     <main role="main" id="figments-archive" class="fig-archive">
-    <h1>Figments of Imagination</h1>
-    <p class="intro">I dislike the term &#8220;fiction&#8221; because it implies that there is a non-fiction and I categorically deny that such a thing can exist. So I call these stories &#8220;less true stories mostly made up&#8221; and hope for the best, where &#8220;the best&#8221; is that you enjoy them.</p>
-    
-    {% for object in object_list %}
-    <article id="{{object.slug}}{{object.pk}}" class="h-entry hentry figment" itemscope itemType="http://schema.org/CreativeWork">
-        <h2 class="p-name entry-title post--title" itemprop="headline"><a href="{{object.get_absolute_url}}" class="u-url permalink">{{object.title|smartypants|safe}}</a></h2>
+    <div class="intro-narrow">
+        <h1>Figments of Imagination</h1>
+        <p>The term &#8220;fiction&#8221; makes me uncomfortable because it implies that there is a corresponding term &#8220;non-fiction&#8221;, which would mean &#8220;truth&#8221;, and I don't think such a thing exists. There is no absolute truth when it comes to recording the world around you. It is always your subjective observations that allow you to record impressions in words. So I call these stories &#8220;less true stories mostly made up&#8221; and hope for the best, where &#8220;the best&#8221; is that you enjoy them.</p>
+    </div>
+    <div class="archive-grid figments-grid"> {% for object in object_list %}
+    <article id="{{object.slug}}{{object.pk}}" class="h-entry hentry" itemscope itemType="http://schema.org/CreativeWork">
+        <h2 class="p-name entry-title post-title" itemprop="headline"><a href="{{object.get_absolute_url}}" class="u-url permalink">{{object.title|smartypants|safe}}</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>
         <p class="hide p-category">Fiction</p>
         <p class="p-summary entry-summary">{{object.dek|safe|smartypants|widont}} <a href="{{object.get_absolute_url}}">Read&nbsp;&#8674;</a></p>
     </article>
         {%endfor%}
+    </div>
     </main>
 {% endblock %}
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%}
diff --git a/design/templates/archives/homepage.html b/design/templates/archives/homepage.html
index 2741232..8640dad 100644
--- a/design/templates/archives/homepage.html
+++ b/design/templates/archives/homepage.html
@@ -6,16 +6,13 @@
 <head itemscope itemtype="http://schema.org/WebSite">
     <title itemprop='name'>Luxagraf</title>
     <link rel="canonical" href="https://luxagraf.net/" itemprop="url">{%endblock%}
-{%block bodyid%}id="home" class="has-hero"{%endblock%}
+{%block bodyid%}id="home"{%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}}">
-                    {%for image in homepage.images.all%}
-                    <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 %} {{size}}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 %}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}">{%endfor%}
+            <div class="post--image">Hello world
+                <a href="{{object.get_absolute_url}}" title="{{object.title}}">{% with image=object.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 %} {{size}}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 %}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}">{%endwith%}
                 </a>
             </div>
             <div class="hero--wrapper">
diff --git a/design/templates/archives/jrnl.html b/design/templates/archives/jrnl.html
index 0c0c535..c95215e 100644
--- a/design/templates/archives/jrnl.html
+++ b/design/templates/archives/jrnl.html
@@ -5,7 +5,7 @@
 
 {% block pagetitle %}Luxagraf | {% if region %}Travel Writing from {{region.name|title|smartypants|safe}}{%else%}Travel Writing from Around the World {%endif%}{% if page != "1" %} -- Page {{page}}{%endif%}{% endblock %}
 {% block metadescription %}{% if region %}Travel writing, essays and dispatches from {{region.name|title|smartypants|safe}}{%else%}Travel writing, essays and dispatches from around the world{%endif%} Page {{page}}{% endblock %}
-{%block bodyid%}id="writing"{%endblock%}
+{%block bodyid%}id="writing" class="archive"{%endblock%}
 
 
 {% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
@@ -14,23 +14,23 @@
         <li itemprop="title">the United States</li>{%else%}<li><a href="/jrnl/" title="See all Journal Entries" itemprop="url"><span>Journal</span></a> &rarr;</li> 
         <li>{{region.name|title|smartypants|safe}}</li>{%endif%}{%else%}<li>Journal</li>{%endif%}
     </ul>
-    <main role="main" id="writing-archive" class="archive">
+    <main class="archive-grid">
         <h1 class="hide">{% if region %}Journal entries from {%if region.name == 'United States'%}the United States{%else%}{{region.name|title|smartypants|safe}}{%endif%}{%else%}Journal {%endif%}</h1>{% autopaginate object_list 24 %} {% for object in object_list %}
-        <article class="h-entry hentry {% cycle 'odd' 'even' %} {% cycle 'first' 'second' 'third' %}" itemscope itemType="http://schema.org/Article">
-            <div class="post--image">
+        <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 %}
-                    <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%}" />
-{%else%}
+                    {% 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>
+            <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>
-                <span class="p-location h-adr adr post--location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
+            <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> &ndash;
-                <span class="p-summary entry-summary hyphenate" itemprop="description">
+                <span class="p-summary" itemprop="description">
                     {{object.dek|safe}}
                 </span>
             </p>
diff --git a/design/templates/archives/map_data.html b/design/templates/archives/map_data.html
index 8e9c6d0..ef3a4c4 100644
--- a/design/templates/archives/map_data.html
+++ b/design/templates/archives/map_data.html
@@ -524,6 +524,6 @@ L.tileLayer.provider('Esri.WorldTopoMap', {maxZoom: 18,attribution: 'Map data &c
 
 //loop through and set up markers/info windows
 {% for entry in object_list %}
-L.marker([{{entry.latitude}}, {{entry.longitude}}]).bindPopup('<div class="infowin"><h4>{{entry.title}}<\/h4><span class="date blok">{{entry.pub_date|date:"F j, Y"}} ({% if entry.location.state.country.name == "United States" %}{{entry.location.name|smartypants|safe}}, {{entry.location.state.name}}){%else%}{{entry.location.name|smartypants|safe}}, {{entry.location.state.country.name}}){%endif%}<\/span><p><img src="{{entry.get_thumbnail_url}}" height="100" alt="{{ entry.title }}"  style="float: left; border: #000 10px solid; margin-right: 8px; margin-bottom: 4px; height: 100px;" \/>{{entry.dek|escapejs}} <a href="{{entry.get_absolute_url}}">Read it &raquo;<\/a><\/p><\/div>').addTo(map);
+L.marker([{{entry.latitude}}, {{entry.longitude}}]).bindPopup('<div class="infowin"><h4>{{entry.title}}<\/h4><span class="date blok">{{entry.pub_date|date:"F j, Y"}} ({% if entry.location.state.country.name == "United States" %}{{entry.location.name|smartypants|safe}}, {{entry.location.state.name}}){%else%}{{entry.location.name|smartypants|safe}}, {{entry.location.state.country.name}}){%endif%}<\/span><p><img src="{{entry.get_featured_image_thumb}}" height="100" alt="{{ entry.title }}"  style="float: left; border: #000 10px solid; margin-right: 8px; margin-bottom: 4px; height: 100px;" \/>{{entry.dek|escapejs}} <a href="{{entry.get_absolute_url}}">Read it &raquo;<\/a><\/p><\/div>').addTo(map);
 {% endfor %}
 
diff --git a/design/templates/archives/projects.html b/design/templates/archives/projects.html
index 5918feb..2ad2e37 100644
--- a/design/templates/archives/projects.html
+++ b/design/templates/archives/projects.html
@@ -3,25 +3,27 @@
 {% block pagetitle %}Luxagraf | Projects {% endblock %}
 {% block metadescription %}Travel Themes and Experiments {% endblock %}
 
-{%block bodyid%}id="projects-page"{%endblock%}								
+{%block bodyid%}class="archive"{%endblock%}								
 				
 {% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
         <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
         <li>Projects</li>
     </ul>
-    <main role="main" class="projects">
-    <div class="projects--intro">
+    <main class="projects">
+    <div class="intro">
         <p>Luxagraf has become a bit like an iceberg over the years. I keep adding things to it, but never actually make them public. So I decided to try making some of it more public. </p>
         <p>This will lead you to some of the previously submerged stuff that doesn't always neatly fit in with the travel narrative portion of luxagraf. </p>
     </div>
-    <ul id="projects-archive" class="projects--list">{%for object in object_list %}
+    <ul id="projects-archive" class="wide-list">{%for object in object_list %}
         <li>
-            <h1><a href="{{object.get_absolute_url}}" title="{{object.title}}">{{object.title|safe}} {{object.subtitle|safe}}</a></h1>
-            <div class="img">
-                <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img sizes="(max-width: 640px) 100vw, (min-width: 641px) 640px" srcset="{{object.get_project_image|slice:"0:-4"}}_lg.jpg 1280w" src="{{object.get_project_image}}" alt="{{ object.title }}" class="post-image" /></a>
+            <a href="{{object.get_absolute_url}}" title="{{object.title}}">
+                <img sizes="(max-width: 850px) 100vw, (min-width: 851px) 720px" srcset="{{object.get_project_image|slice:"0:-4"}}_lg.jpg 1280w" src="{{object.get_project_image}}" alt="{{ object.title }}" class="post-image" />
+            </a>
+            <div class="wide-wrapper">
+                <h2 class="post-title"><a href="{{object.get_absolute_url}}" title="{{object.title}}">{{object.title|safe}} {{object.subtitle|safe}}</a></h2>
+                <div class="post-summary">{{object.lede|safe|smartypants}}</div>
+                <a class="permalink" href="{{object.get_absolute_url}}">Explore&nbsp;&#8674;</a>
             </div>
-            <div class="hyphenate">{{object.lede|safe|smartypants}}</div>
-            <p class="projects--button"><a href="{{object.get_absolute_url}}">Explore&nbsp;&#8674;</a></p>
         </li> {% endfor %}
     </ul>
     </main>
diff --git a/design/templates/archives/sightings.html b/design/templates/archives/sightings.html
index 713ab09..3eb8ef6 100644
--- a/design/templates/archives/sightings.html
+++ b/design/templates/archives/sightings.html
@@ -4,7 +4,7 @@
 
 {% block pagetitle %}Luxagraf | Plants and Animals seen {% if region %}in {{region.name|title|smartypants|safe}}{%else%}by {{user}}{%endif%}{% if page != "1" %} -- Page {{page}}{%endif%}{% endblock %}
 {% block metadescription %}Plants and Animals  seen {% if region %} in {{region.name|title|smartypants|safe}}{%else%}by {{user}}{%endif%} Page {{page}}{% endblock %}
-{%block bodyid%}id="birds"{%endblock%}
+{%block bodyid%}id="birds" class="archive"{%endblock%}
 
 
 {% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
@@ -13,29 +13,21 @@
         <li itemprop="title">the United States</li>{%else%}<li><a href="/jrnl/" title="See all Journal Entries" itemprop="url"><span>Plants and Animals</span></a> &rarr;</li> 
         <li>{{region.name|title|smartypants|safe}}</li>{%endif%}{%else%}<li>dialogues</li>{%endif%}
     </ul>
-    <main role="main" class="archive">{% autopaginate object_list 24%}
+    <main class="archive-grid dialogue-grid">{% autopaginate object_list 24%}
     <h1 class="hide">Plants and Animals seen {% if region %}in {%if region.name == 'United States'%}the United States{%else%}{{region.name|title|smartypants|safe}}{%endif%}{%else%} by {{user}}{%endif%}</h1> {% for object in object_list %}
-        <article class="{% cycle 'odd' 'even' %} {% cycle 'first' 'second' 'third' %}">
+    <article class="archive-card">{% if object.ap.image%} 
             <div class="post--image">
-{% load get_image_by_size %}
-{% load get_image_width %}{% if object.ap.image%}
-<figure>
-<a href="{{object.ap.get_absolute_url}}" title="{{object.ap}}">
-    <img src="{% get_image_by_size object.ap.image 'pic5' %}" /> 
-</a>
-</figure>{%endif%}
-            </div>
-            <h3 class="post--title"><a href="{{object.ap.get_absolute_url}}" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.ap}}{%endif%}">{{object.ap|safe|smartypants|widont}}</a> (<span class="sci">{{object.ap.scientific_name}}</span>)</h3>
-            <time class="post--date" datetime="{{object.pub_date|date:'c'}}">Last Seen: {{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
-            <p>
-                <span class="sighting location place post--location" itemscope itemtype="http://schema.org/Place">Loc:
+                <a href="{{object.ap.get_absolute_url}}" title="{{object.ap}}">
+                    {% include "lib/img_archive.html" with image=object.ap.image  %}
+                </a>
+            </div>{% endif %}
+            <h2 class="post-title"><a href="{{object.ap.get_absolute_url}}" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.ap}}{%endif%}">{{object.ap|safe|smartypants|widont}}</a> (<span class="sci">{{object.ap.scientific_name}}</span>)</h2>
+            <time class="post-date" datetime="{{object.pub_date|date:'c'}}">Last Seen: {{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
+            <div class="post-summary">
+                <span class="post-location" 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}}</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>
+            </div>
         </article> {% endfor %}
     </main>
     <nav class="pagination">