From 0bac6f393845e66c22ab26f187d844dde8645c7e Mon Sep 17 00:00:00 2001
From: luxagraf <sng@luxagraf>
Date: Sat, 30 Jan 2021 12:12:16 -0500
Subject: lttr: added new design for Range signup page and added to main menu

---
 app/lttr/templates/lttr/range_list.html | 30 +++++++++++++++++++-----------
 design/templates/base.html              |  2 +-
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/app/lttr/templates/lttr/range_list.html b/app/lttr/templates/lttr/range_list.html
index 9810c3a..74cc782 100644
--- a/app/lttr/templates/lttr/range_list.html
+++ b/app/lttr/templates/lttr/range_list.html
@@ -4,7 +4,15 @@
 {% block metadescription %}A weekly photo, developed.{% endblock %}
 {% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %}
 {% block primary %}
-    <main role="main" class="archive-wrapper">
+<main role="main" class="archive-wrapper">{% for object in object_list %}{% if forloop.first %}
+        <figure class="large-top-image">
+            <a href="{{object.get_absolute_url}}" title="{{object.title}}">{%with image=object.featured_image%}
+                <img style="margin:0;" class="u-photo"  itemprop="image" sizes="(max-width: 960px) 100vw"
+                srcset="{{image.get_srcset}}"
+                src="{{image.get_src}}"
+                alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}">
+            </a>{%endwith%}{%endif%}{%endfor%}
+        </figure>
         <div class="archive-intro">
             <h1 class="list-hed">Range</h1>
             <h2 class="list-subhed">A weekly photo, developed.</h2>
@@ -14,17 +22,17 @@
             <p>Yes, I know about Instagram. This is an attempt to reclaim that space, sharing photos with friends, but without all the distractions of the corporate social web, without the endless scroll of photos, likes, stories, comments, whatever. This is just an image delivered once a week to your inbox. I've been trying to think of a way to make it reciprocal, so you can send a picture to my inbox. If you have ideas, <a href="mailto:comments@luxagraf.net">email me</a>.</p>
             <p>Unsubscribing is easy. It's <a href="/src/building-your-own-mailing-list-software">self-hosted</a> and <a href="/privacy" title="My privacy policy">respects your privacy</a>. If you don't want an email, there's also <a href="/newsletter/range/feed.xml">an RSS feed</a>, and it's all archived below.</p>
         </div>
-        <h3 class="archive-sans">Images</h3>
-        <ul class="archive-list">{% for object in object_list %}
-            <li class="h-entry hentry archive-list-card" itemscope itemType="http://schema.org/Article">
-            <a href="{{object.get_absolute_url}}" class="u-url">
-            {% if object.featured_image %}<div class="circle-img-wrapper"><img src="{{object.featured_image.get_thumbnail_url}}" alt="{{object.featured_image.alt}}" class="u-photo" /></div>{%endif%}
-                    <span class="date dt-published card-smcaps">issue {{object.get_issue_str}} &ndash; {{object.pub_date|date:"M y"}}</span>
-                    <h2 class="card-hed">{{object.title|safe|smartypants|widont}}</h2>
-                    {% if object.subtitle %}<h3 class="p-summary card-lede">{{object.subtitle|safe|smartypants|widont}}</h3>{%endif%}
+        <h3 class="archive-sans">Images</h3>{% for object in object_list %}
+        <article class="h-entry hentry archive-grid-card" itemscope itemType="http://schema.org/Article">
+            <div class="card-image">
+                <a href="{{object.get_absolute_url}}" title="{{object.title}}">
+                    {% include "lib/img_archive.html" with image=object.featured_image %}
                 </a>
-        </li>
-        {%endfor%}</ul>
+            </div>
+            <h2 class="p-name card-hed-it" itemprop="headline"><a href="{{object.get_absolute_url}}" class="u-url" title="{{object.title}}">{{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 card-smcaps" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
+        </article> {% endfor %}
     </main>
 {%endblock%}
 
diff --git a/design/templates/base.html b/design/templates/base.html
index 3b9dd31..871bcfa 100644
--- a/design/templates/base.html
+++ b/design/templates/base.html
@@ -31,8 +31,8 @@
         <nav>
             <a class="nav-item" href="{% url "jrnl:list" %}" title="Stories of life on the road.">Jrnl</a>{%comment%} &amp; <a href="{% url "fieldnotes:list" %}" title="Short stories, snapshots of daily life on the road.">Field Notes</a>
             <a href="{% url "guides:guide-base" %}" title="Advice, Tools, Tips and Tricks for Full Time Van or RV Life.">Guides</a>{%endcomment%}
-            <a class="nav-item" href="/newsletter/friends/" title="The 'friends of a long year' newsletter">newsletter</a>
             <a class="nav-item" href="/about" title="About Scott">About</a>
+            <span class="nav-item">Lttrs: <a href="/newsletter/friends/" title="Join 'friends of a long year'">Friends</a> &amp; <a href="/newsletter/range/" title="Range, a photo a week, in your inbox">Range</a></span>
         </nav>
     </header>
     {% block breadcrumbs %}{% endblock %}
-- 
cgit v1.2.3