Proj: Massive design overhaul to simplify code

Cut out Sass syntax, deleted old CSS rules, changed HTML to use
fewer lists and more cascading instead of specific rules. Still requires
compiling with sass to strip comments and compress, but would in theory
work on its own.

Reduced CSS file size by 2/3

2 files changed, 33 insertions, 36 deletions

diff --git a/app/pages/templates/pages/luxagraf/homepage.html b/app/pages/templates/pages/luxagraf/homepage.html
index c8075ea..7a768f9 100644
--- a/app/pages/templates/pages/luxagraf/homepage.html
+++ b/app/pages/templates/pages/luxagraf/homepage.html
@@ -18,8 +18,8 @@
 
 {% block primary %}<div class="banner">{% with object=homepage.featured %}
         <article class="h-entry hentry" itemscope itemType="http://schema.org/Article">
-            <figure class="post-image">
-                <a href="{{object.get_absolute_url}}" title="{{object.title}}">{%with image=homepage.featured_image%}
+            <figure class="large-top-image">
+                <a href="{{object.get_absolute_url}}" title="{{object.title}}">{%with image=object.featured_image%}
                     <img class="u-photo"  itemprop="image" sizes="(max-width: 960px) 100vw"
                     srcset="{{image.get_srcset}}"
                     src="{{image.get_src}}"
@@ -29,10 +29,11 @@
                     <div class="hero-text-wrapper">
                         <h1 class="p-name entry-title post-title" itemprop="headline">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|smartypants|safe}}{%else%}{{object.title|smartypants|safe}}{%endif%}</h1>
                         <h2 class="post-subtitle">{% if object.subtitle %}{{object.subtitle|smartypants|safe}}{%else%}{{homepage.tag_line|safe|smartypants}}{%endif%}</h2>
-                        <aside class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
-                            <div class="h-adr" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">{% if object.location.country_name == "United States" %}<span class="p-locality locality" itemprop="addressLocality">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/jrnl/united-states/" title="travel writing from the United States">{{object.location.state_name|safe}}</a>, <span class="p-country-name" itemprop="addressCountry">U.S.</span>{%else%}<span class="p-region" itemprop="addressRegion">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.location.country_slug}}/" title="travel writing from {{object.location.country_name}}"><span itemprop="addressCountry">{{object.location.country_name|safe}}</span></a>{%endif%}</div>
-                        </aside>
-                <time class="dt-published published dt-updated post-date" datetime="{{object.pub_date|date:'c'}}" itemprop="datePublished">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
+                <div class="post-dateline">
+                {% if object.location %}<div class="p-location h-adr adr post-smcaps" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
+                    <div class="h-adr" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">{% if object.location.country_name == "United States" %}<span class="p-locality locality" itemprop="addressLocality">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/jrnl/united-states/" title="travel writing from the United States">{{object.location.state_name|safe}}</a>, <span class="p-country-name" itemprop="addressCountry">U.S.</span>{%else%}<span class="p-region" itemprop="addressRegion">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.location.country_slug}}/" title="travel writing from {{object.location.country_name}}"><span itemprop="addressCountry">{{object.location.country_name|safe}}</span></a>{%endif%}</div>
+                </div>{%endif%}
+                <time class="dt-published published dt-updated hide" datetime="{{object.pub_date|date:'c'}}" itemprop="datePublished">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
                 <span class="hide" itemprop="author" itemscope itemtype="http://schema.org/Person">by <a class="p-author h-card" href="/about"><span itemprop="name">Scott Gilbertson</span></a></span>
                     <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>
@@ -40,58 +41,54 @@
             </figure>
     </article>{% endwith %} 
    </div>
-    <section class="bio-short">
+    <section class="homepage-bio-section">
         <h2 class="homepage-section-header">About Luxagraf</h2>
+        <div class="homepage-bio-wrapper">
         <img src="/media/img/usa-resize.svg" alt="map of travels" class="homepage-map-img" />
+        <div>
         <p>We’re a family of five living full time in a vintage 1969 Dodge Travco motorhome. We’ve been at it for three years now. People always ask: <a href="https://luxagraf.net/1969-dodge-travco-motorhome">What's it like for five people to live in a 26ft RV</a>? <a href="https://luxagraf.net/essay/why-a-vintage-rv">Why do we live this way</a>?</p>
         <p>The short answer is simple: because we like it and we can. If you want more than a soundbite, <a href="/jrnl/">read through the journal</a>. If you like it, sign up for the newsletter, <a href="/newsletter/friends/"><em>Friends of a Long Year</em></a>. I'd also <a href="/feed.xml">subscribe to the RSS feed</a>, but that's just <a href="/about">me</a>. <!-- If you’re interested there’s a guide section with some <a href="/guides/">advice, tips and tricks for those who’d aspire to live full time in a van or RV</a> --></p>
+        </div>
+        </div>
     </section>
     <section class="recent-popular">
         <div class="recent">
         <h2 class="homepage-section-header">Recent</h2>
-        <div  class="archive-grid">{% for object in object_list %}
-        <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  class="archive-grid archive-grid-double">{% for object in object_list %}
+        <article class="h-entry hentry archive-grid-card archive-grid-card-simple" itemscope itemType="http://schema.org/Article">
+            <div class="card-image-sm">
+                <a href="{{object.get_absolute_url}}" title="{{object.title}}">
+                    {% include "lib/img_archive.html" with image=object.featured_image %}</a>
             </div>
-            <h3 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></h3>
+            <h3 class="p-name card-hed-smit" 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></h3>
             <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">
+            <time class="dt-published published dt-updated card-smcaps" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
+                <span class="p-location h-adr adr card-smcaps" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
                     {% if object.location.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.location.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.location.country_slug}}/" title="travel writing from {{object.location.country_name}}">{{object.location.country_name}}</a>{%endif%}
                 </span> 
-            </p>
         </article> {% endfor %}
         </div>
         </div>
         <div class="popular">
         <h2 class="homepage-section-header">Popular</h2>
-        <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 class="archive-grid archive-grid-single">{% for object in homepage.popular.all %}
+        <article class="h-entry hentry archive-grid-card archive-grid-card-simple" itemscope itemType="http://schema.org/Article">
+            <div class="card-image-sm">
+                <a href="{{object.get_absolute_url}}" title="{{object.title}}">
+                    {% include "lib/img_archive.html" with image=object.featured_image %}</a>
             </div>
-            <h3 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></h3>
+            <h3 class="p-name card-hed-smit" 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></h3>
             <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.location.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.location.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.location.country.slug}}/" title="travel writing from {{object.location.country_name}}">{{object.location.country_name}}</a>{%endif%}
-                </span>
-            </p>
+            <time class="dt-published published dt-updated card-smcaps" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
+                <span class="p-location h-adr adr card-smcaps" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
+                    {% if object.location.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.location.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.location.country_slug}}/" title="travel writing from {{object.location.country_name}}">{{object.location.country_name}}</a>{%endif%}
+                </span> 
         </article> {% endfor %}
         </div>
         </div>
     </section>
-    <section>
-        <h5 class="homepage-next"><a href="/jrnl/">Browse the Archives</a></h5>
+    <section class="homepage-next">
+        <h5><a href="/jrnl/">Browse the Archives</a></h5>
     </section>
 {% endblock %}
 
diff --git a/app/pages/templates/pages/luxagraf/page_detail.html b/app/pages/templates/pages/luxagraf/page_detail.html
index 4644386..fc66917 100644
--- a/app/pages/templates/pages/luxagraf/page_detail.html
+++ b/app/pages/templates/pages/luxagraf/page_detail.html
@@ -7,7 +7,7 @@
 {%block bodyid%}id="{{object.title|slugify}}"{%endblock%}								
 {% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %}
 {% block primary %}<main>
-    <article>
+    <article class="content">
         <header class="post-header">
         <h1 class="post-title">{{object.title}}</h1>
         {%if object.sub_title %}<h2 class="post-subtitle">{{object.sub_title}}</h2>{%endif%}