diff options
Diffstat (limited to 'app/posts')
| -rw-r--r-- | app/posts/templates/posts/essay_detail.html | 10 | ||||
| -rw-r--r-- | app/posts/templates/posts/essay_list.html | 36 | ||||
| -rw-r--r-- | app/posts/templates/posts/fieldnote_archive_list_date.html | 24 | ||||
| -rw-r--r-- | app/posts/templates/posts/fieldnote_detail.html | 39 | ||||
| -rw-r--r-- | app/posts/templates/posts/fieldnote_list.html | 26 | ||||
| -rw-r--r-- | app/posts/templates/posts/guide_base.html | 22 | ||||
| -rw-r--r-- | app/posts/templates/posts/guide_by_topic.html | 43 | ||||
| -rw-r--r-- | app/posts/templates/posts/guide_detail.html | 8 | ||||
| -rw-r--r-- | app/posts/templates/posts/jrnl_detail.html | 99 | ||||
| -rw-r--r-- | app/posts/templates/posts/jrnl_list.html | 12 | ||||
| -rw-r--r-- | app/posts/templates/posts/post_detail.html | 10 | ||||
| -rw-r--r-- | app/posts/templates/posts/src_detail.html | 86 | ||||
| -rw-r--r-- | app/posts/templates/posts/src_list.html | 25 |
13 files changed, 212 insertions, 228 deletions
diff --git a/app/posts/templates/posts/essay_detail.html b/app/posts/templates/posts/essay_detail.html index 3902e33..b6a0db8 100644 --- a/app/posts/templates/posts/essay_detail.html +++ b/app/posts/templates/posts/essay_detail.html @@ -32,9 +32,9 @@ {% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %} {% block primary %} <main> - <article class="h-entry hentry {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}" itemscope itemType="http://schema.org/Article"> - <header id="header" class="post-header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}"> - <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> + <article class="h-entry hentry" itemscope itemType="http://schema.org/Article"> + <header id="header" class="post-header"> + <h1 class="p-name post-title" itemprop="headline">{{object.title|smartypants|safe}}</h1> <h2 class="post-subtitle">{{object.subtitle|smartypants|safe}}</h2> <div class="post-linewrapper"> {% if object.originally_published_by %}<h4 class="post-source">Originally Published By: <a href="{{object.originally_published_by_url}}" title="View {{object.title}} on {{object.originally_published_by}}">{{object.originally_published_by}}</a></h4>{%endif%} @@ -46,7 +46,7 @@ <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> </div> </header> - <div id="article" class="e-content entry-content post--body post--body--{% with object.template_name as t %}{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%endwith%} post-essay" itemprop="articleBody"> + <div id="article" class="e-content post-body" itemprop="articleBody"> {% if object.prologue_html %}<div class="afterward"> {{object.prologue_html|smartypants|safe}} </div>{%endif%} @@ -148,6 +148,7 @@ document.addEventListener("DOMContentLoaded", function(event) { {%endif%}{%endwith%} } + {%comment%} lightbox.onload = function() { var opts= { //nextOnClick: false, @@ -165,6 +166,7 @@ document.addEventListener("DOMContentLoaded", function(event) { var lightbox = new Lightbox(); lightbox.load(opts); } + {%endcomment%} {% if object.enable_comments %} {% get_comment_count for object as comment_count %} {%if comment_count > 0 %} diff --git a/app/posts/templates/posts/essay_list.html b/app/posts/templates/posts/essay_list.html index 8a35225..cdd272f 100644 --- a/app/posts/templates/posts/essay_list.html +++ b/app/posts/templates/posts/essay_list.html @@ -4,21 +4,39 @@ {% block pagetitle %}Collected Essays of Scott Gilbertson {% endblock %} {% block metadescription %}Collected writing: essays, articles and stories on travel, photography, tools, walking, the natural world and other ephemera.{% endblock %} {% block breadcrumbs %}{% if breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{%endif%}{% endblock %} -{% block primary %}<main role="main" id="essay-archive" class="essay-archive archive-list"> - <div class="essay-intro"> - <h2>Essays & Articles</h2> +{% block primary %}<main role="main" class="archive-wrapper"> + <div class="archive-intro"> + <h2 class="archive-hed">Essays & Articles</h2> <p>Topics include travel, writing, photography, free software, culture, and once, Del Taco.</p> <p>Some essays below were previously published in: <em><a href="https://www.wired.com/author/scott-gilbertson/" rel="me">WIRED</a></em>, <em><a href="https://www.budgettravel.com/article/0902_HTTN_SocialNetwork_5488">Budget Travel</a></em>, <em><a href="https://arstechnica.com/">Ars Technica</a></em>, <em><a href="https://www.epicurious.com/contributors/scott-gilbertson" rel="me">Epicurious</a></em>, <em><a href="https://web.archive.org/web/20100904114555/http://one.longshotmag.com/article/going-for-seconds">Longshot Magazine</a>,</em> <em><a href="https://web.archive.org/web/20150506051746/http://1888.center/scott-gilbertson/" rel="me">The Cost of Paper</a></em> and elsewhere.</a></p> </div> - <h1 class="topic-hed">Essays</h1> - <ul>{% for object in object_list %} - <li class="h-entry hentry" itemscope itemType="http://schema.org/Article"> - <span class="date dt-published">{{object.pub_date|date:"F Y"}}</span> + <h1 class="archive-sans">Essays</h1> + <ul class="archive-list">{% for object in object_list %} + <li class="h-entry hentry archive-list-card archive-list-card-sm" itemscope itemType="http://schema.org/Article"> + <span class="date dt-published card-smcaps">{{object.pub_date|date:"F Y"}}</span> <a href="{{object.get_absolute_url}}"> - <h2>{{object.title|safe|smartypants|widont}}</h2> - <p class="p-summary">{% if object.subtitle %}{{object.subtitle|safe|smartypants}}{%else%}{{object.meta_description}}{%endif%}</p> + <h2 class="card-hed">{{object.title|safe|smartypants|widont}}</h2> + <p class="p-summary card-lede">{% if object.subtitle %}{{object.subtitle}}{%else%}{{object.meta_description|safe|smartypants|widont}}{%endif%}</p> </a> </li> {%endfor%}</ul> </main> {%endblock%} + + + <ul class="article-card-list">{% for object in object_list %} + <li class="h-entry hentry card-cir-mini-image" itemscope itemType="http://schema.org/Article"> + <span class="date"></span><span class="date dt-published card-date">{{object.pub_date|date:"F d, Y"}}</span> + <a href="{{object.get_absolute_url}}"> + <h2 class="card-title">{{object.title|safe|smartypants|widont}}</h2> + {% if object.subtitle %}<h3 class="p-summary card-summary">{{object.subtitle|safe|smartypants|widont}}</h3>{%endif%} + </a> + {% if object.location %}<h4 class="p-location h-adr card-location" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> + <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, + <span class="p-region">{{object.location.state_name}}</span>, + <span class="p-country-name">{{object.location.country_name}}</span> + <data class="p-latitude" value="{{object.latitude}}"></data> + <data class="p-longitude" value="{{object.longitude}}"></data> + </h4>{% endif %} + </li> + {%endfor%}</ul> diff --git a/app/posts/templates/posts/fieldnote_archive_list_date.html b/app/posts/templates/posts/fieldnote_archive_list_date.html index 5d6865f..9294867 100644 --- a/app/posts/templates/posts/fieldnote_archive_list_date.html +++ b/app/posts/templates/posts/fieldnote_archive_list_date.html @@ -12,21 +12,21 @@ <li>{% if not month %}{{year|date:"Y"}}{%else%}<a href="/field-notes/{{month|date:"Y"}}/">{{month|date:"Y"}}</a> →{%endif%}</li> {% if month %}<li itemprop="title">{{month|date:"F"}}</li>{% endif %} </ul> - <main role="main" id="essay-archive" class="essay-archive archive-list"> - <div class="essay-intro"> - <h2>Field Notes {% if month or year %}{% if month %} from {{month|date:"F"}} {{month|date:"Y"}}{%else%} from {{year|date:"Y"}}{%endif%}{%endif%}</h2> + <main role="main" id="essay-archive" class="archive-list"> + <div class="archive-intro"> + <h2 class="post-title">Field Notes {% if month or year %}{% if month %} from {{month|date:"F"}} {{month|date:"Y"}}{%else%} from {{year|date:"Y"}}{%endif%}{%endif%}</h2> <p>Quick notes, sketches and images from the road. This is the semi-orgnized brain dump that comes before the more organized <a href="/jrnl/" title="read the journal">journal entries</a> and <a href="/essays/" title="read essays">essays</a>. If I used social media this is the stuff I'd probably put there, but I prefer to put it here, even if it means a lot few people read it.</p> </div> - <ul class="fancy-archive-list">{% for object in object_list %}{% if object.slug != 'about' %} - <li class="h-entry hentry" itemscope itemType="http://schema.org/Article"> - <a href="{{object.get_absolute_url}}"> - {% if object.featured_image %}<div class="circle-img-wrapper"><img src="{{object.featured_image.get_thumbnail_url}}" alt="{{object.featured_image.alt}}" /></div>{%endif%} - <span class="date dt-published">{{object.pub_date|date:"F d, Y"}}</span> + <ul class="article-card-list article-card-list-circle">{% for object in object_list %} + <li class="h-entry hentry card-cir-mini-image" 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"></span><span class="date dt-published card-date">{{object.pub_date|date:"F d, Y"}}</span> <a href="{{object.get_absolute_url}}"> - <h2>{{object.title|safe|smartypants|widont}}</h2> - {% if object.subtitle %}<h3 class="p-summary">{{object.subtitle|safe|smartypants|widont}}</h3>{%endif%} + <h2 class="card-title">{{object.title|safe|smartypants|widont}}</h2> + {% if object.subtitle %}<h3 class="p-summary card-summary">{{object.subtitle|safe|smartypants|widont}}</h3>{%endif%} </a> - {% if object.location %}<h4 class="p-location h-adr post-location" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> + {% if object.location %}<h4 class="p-location h-adr card-location" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, <span class="p-region">{{object.location.state_name}}</span>, <span class="p-country-name">{{object.location.country_name}}</span> @@ -34,7 +34,7 @@ <data class="p-longitude" value="{{object.longitude}}"></data> </h4>{% endif %} </li> - {%endif%}{%endfor%}</ul> + {%endfor%}</ul> </main> {% endblock %} diff --git a/app/posts/templates/posts/fieldnote_detail.html b/app/posts/templates/posts/fieldnote_detail.html index 3368c56..0cb8dd1 100644 --- a/app/posts/templates/posts/fieldnote_detail.html +++ b/app/posts/templates/posts/fieldnote_detail.html @@ -34,9 +34,10 @@ </ol> {% endblock %} {% block primary %}<main role="main"> - <article class="h-entry hentry {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}" itemscope itemType="http://schema.org/BlogPosting"> - <header id="header" class="post-header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}"> - <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> + <article class="h-entry hentry" itemscope itemType="http://schema.org/BlogPosting"> + <article class="h-entry hentry entry-content content" itemscope itemType="http://schema.org/BlogPosting"> + <header id="header" class="post-header"> + <h1 class="p-name entry-title post-title" itemprop="headline">{{object.title|smartypants|safe}}</h1> {% if object.subtitle %}<h2 class="post-subtitle">{{object.subtitle|smartypants|safe}}</h2>{%endif%} <div class="post-linewrapper"> {% if object.location %}<div class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> @@ -47,37 +48,9 @@ <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> </div> </header> - <div class="e-content"> - {{object.body_html|safe|smartypants}} + <div id="article" class="e-content entry-content post-body" itemprop="articleBody"> + {{object.body_html|safe|smartypants}} </div> - <span class="p-author h-card"> - <data class="p-name" value="Scott Gilbertson"></data> - <data class="u-url" value="https://luxagraf.net/"></data> - </span> - <footer> - {%comment%}<p class="note--date"> - <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time class="dt-published" datetime="{{object.pub_date|html5_datetime}}">{{object.pub_date|date:"F j, Y"}}</time></a> - </p>{%endcomment%} - {% comment %} {% if object.twitter_id %} - <ul class="note--actions"> - <li><a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">View on Twitter</a></li> - <li> - <indie-action do="reply" with="{{SITE_URL}}{{object.get_absolute_url}}"><a href="https://twitter.com/intent/tweet?in_reply_to={{object.twitter_id}}">Reply</a></indie-action> - </li> - <li> - <indie-action do="post" with="{{SITE_URL}}{{object.get_absolute_url}}"> - <a href="https://twitter.com/intent/retweet?tweet_id={{object.twitter_id}}">Retweet</a> - </indie-action> - </li> - <li> - <indie-action do="bookmark" with="{{SITE_URL}}{{object.get_absolute_url}}"> - <a href="https://twitter.com/intent/favorite?tweet_id={{object.twitter_id}}">Favourite</a> - </indie-action> - </li> - </ul>{% endif %}{% endcomment %} - </footer> - - {% with object.get_next_published as next %} {% with object.get_previous_published as prev %} <nav id="page-navigation"> diff --git a/app/posts/templates/posts/fieldnote_list.html b/app/posts/templates/posts/fieldnote_list.html index 14d61c0..cd7601e 100644 --- a/app/posts/templates/posts/fieldnote_list.html +++ b/app/posts/templates/posts/fieldnote_list.html @@ -20,22 +20,22 @@ </li> </ol> {% endblock %} -{% block primary %}<main role="main" id="essay-archive" class="essay-archive archive-list"> - <div class="essay-intro"> - <h2>Field Notes</h2> +{% block primary %}<main role="main" class="archive-wrapper"> + <div class="archive-intro"> + <h2 class="archive-hed">Field Notes</h2> <p>Quick notes, sketches, and images from the road. This is the semi-organized brain dump that comes before the more organized <a href="/jrnl/" title="read the journal">journal entries</a>. If I used social media this is the stuff I'd probably put there, but I prefer to put it here, even if it means a lot fewer people read it.</p> </div> {% autopaginate object_list 24 %} - <ul class="fancy-archive-list">{% for object in object_list %} - <li class="h-entry hentry" 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="datei"></span><span class="date dt-published">{{object.pub_date|date:"F d, Y"}}</span> - <a href="{{object.get_absolute_url}}"> - <h2>{{object.title|safe|smartypants|widont}}</h2> - {% if object.subtitle %}<h3 class="p-summary">{{object.subtitle|safe|smartypants|widont}}</h3>{%endif%} - </a> - {% if object.location %}<h4 class="p-location h-adr post-location" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> + <ul class="archive-list">{% for object in object_list %} + <li class="h-entry hentry archive-list-card" itemscope itemType="http://schema.org/Article"> + {% if object.featured_image %}<a href="{{object.get_absolute_url}}" class="u-url"> + <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">{{object.pub_date|date:"F Y"}}</span> + <a href="{{object.get_absolute_url}}"> + <h2 class="card-hed">{{object.title|safe|smartypants|widont}}</h2> + <p class="p-summary card-lede">{% if object.subtitle %}{{object.subtitle}}{%else%}{{object.meta_description|safe|smartypants|widont}}{%endif%}</p> + </a> + {% if object.location %}<h4 class="p-location h-adr card-location card-smcaps" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, <span class="p-region">{{object.location.state_name}}</span>, <span class="p-country-name">{{object.location.country_name}}</span> diff --git a/app/posts/templates/posts/guide_base.html b/app/posts/templates/posts/guide_base.html index e7764db..0f1f482 100644 --- a/app/posts/templates/posts/guide_base.html +++ b/app/posts/templates/posts/guide_base.html @@ -9,26 +9,26 @@ <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> → </li> <li itemprop="title">guide</li> </ul> - <main role="main" id="guide-archive" class="essay-archive guide-archive archive-list"> - <div class="essay-intro"> - <h2>Roaming Guide</h2> - <h3>Advice, Tools, Tips, and Tricks for Full Time Van or RV Life.</h3> + <main role="main" id="guide-archive" class="archive-list"> + <div class="archive-intro"> + <h2 class="post-title">Roaming Guide</h2> + <h3 class="post-subtitle">Advice, Tools, Tips, and Tricks for Full Time Van or RV Life.</h3> <p>I don't want to tell you how to travel. Everyone is different. Besides, even after twenty some odd years of travel, I am still learning. </p> <p>I've always been most inspired by wandering monks and nuns, those who walked or sailed with next to nothing and survived. Mostly. Today most of us are not that skilled or strong of will, but keeping that example in mind is helpful. The less stuff you travel with the better off you are. Up to a point. Having the right tools is important. The right tools make life easier and more fun.</p> <p>I put this together to help you find the tools you need. These aren't casual reviews. These are things I have spent years seeking out, using, and refining. In the end what you need are not things, but strategies and tools that allow you to create solutions to problems. </p> </div> - <h1 class="topic-hed">Reviews</h1> + <h1 class="archive-hed">Reviews</h1> {% autopaginate object_list 30 %} - <ul class="fancy-archive-list">{% for object in object_list %} - <li class="h-entry hentry" itemscope itemType="http://schema.org/Article"> + <ul class="article-card-list article-card-list-circle">{% for object in object_list %} + <li class="h-entry hentry card-cir-mini-image" itemscope itemType="http://schema.org/Article"> <a href="{{object.get_absolute_url}}" class="u-url"> <div class="circle-img-wrapper"><img src="{{object.featured_image.get_thumbnail_url}}" alt="{{object.featured_image.alt}}" class="u-photo" /></div> - <span class="date dt-published">{{object.pub_date|date:"F d, Y"}}</span> + <span class="date dt-published card-date">{{object.pub_date|date:"F d, Y"}}</span> <a href="{{object.get_absolute_url}}"> - <h2>{{object.title|safe|smartypants|widont}}</h2> - {% if object.subtitle %}<h3 class="p-summary">{{object.subtitle|safe|smartypants|widont}}</h3>{%endif%} + <h2 class="card-title">{{object.title|safe|smartypants|widont}}</h2> + {% if object.subtitle %}<h3 class="p-summary card-summary">{{object.subtitle|safe|smartypants|widont}}</h3>{%endif%} </a> - {% if object.location %}<h4 class="p-location h-adr post-location" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> + {% if object.location %}<h4 class="p-location h-adr card-location" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, <span class="p-region">{{object.location.state_name}}</span>, <span class="p-country-name">{{object.location.country_name}}</span> diff --git a/app/posts/templates/posts/guide_by_topic.html b/app/posts/templates/posts/guide_by_topic.html index 625ac5e..1cafaa1 100644 --- a/app/posts/templates/posts/guide_by_topic.html +++ b/app/posts/templates/posts/guide_by_topic.html @@ -10,30 +10,29 @@ <li><a href="/guides/" title="luxagraf guides" itemprop="url"><span itemprop="title">Guides</span></a> → </li> <li itemprop="title">{{topic}}</li> </ul> - <main role="main" id="guide-archive" class="essay-archive guide-archive archive-list"> - <div class="essay-intro"> - <h2>{{topic}} Guides</h2> - <h3>{{topic.description|safe|smartypants|widont}}</h3> + <main role="main" class="archive-wrapper"> + <div class="archive-intro"> + <h2 class="archive-hed">{{topic}} Guides</h2> + <h3 class="archive-lede">{{topic.description|safe|smartypants|widont}}</h3> {{topic.intro_html|safe|smartypants|widont}} </div> {% autopaginate object_list 30 %} - <ul class="fancy-archive-list">{% for object in object_list %} - <li class="h-entry hentry" itemscope itemType="http://schema.org/Article"> - <a href="{{object.get_absolute_url}}" class="u-url"> - <div class="circle-img-wrapper"><img src="{{object.featured_image.get_thumbnail_url}}" alt="{{object.featured_image.alt}}" class="u-photo" /></div> - <span class="date dt-published">{{object.pub_date|date:"F d, Y"}}</span> - <a href="{{object.get_absolute_url}}"> - <h2>{{object.title|safe|smartypants|widont}}</h2> - {% if object.subtitle %}<h3 class="p-summary">{{object.subtitle|safe|smartypants|widont}}</h3>{%endif%} - </a> - {% if object.location %}<h4 class="p-location h-adr post-location" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> - <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, - <span class="p-region">{{object.location.state_name}}</span>, - <span class="p-country-name">{{object.location.country_name}}</span> - <data class="p-latitude" value="{{object.latitude}}"></data> - <data class="p-longitude" value="{{object.longitude}}"></data> - </h4>{% endif %} - </li> - {%endfor%}</ul> + <h3 class="archive-sans">Guides</h3> + <ul class="archive-grid">{% for object in object_list %} + <li class="archive-grid-card"><a href="{{object.get_absolute_url}}" title="{{object.title}}"> + {% if object.featured_image %}{% include "lib/img_archive.html" with image=object.featured_image nolightbox=True %}{%endif%} + <h2 class="p-name entry-title card-hed-it" itemprop="headline">{% if object.title %}{{object.title|safe|smartypants|widont}}{% else %}{{object.common_name}}{%endif%}</h2> + <span class="p-author author hide" itemprop="author"><span class="byline-author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Scott Gilbertson</span></span></span> + <span class="post-summary"> + {% if object.location %}<span class="p-location h-adr adr card-smcaps" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> + {% if object.location.country_name == "United States" %}{{object.location.state_name}}{%else%}{{object.location.country_name}}{%endif%} + </span>{%endif%} + {% if object.location and object.model_name.model != 'page' %}–{%endif%} + {% if object.model_name.model != 'page' %}<time class="dt-published published dt-updated card-smcaps" datetime="{{object.pub_date|date:'c'}}"><span>{{object.pub_date|date:"F Y"}}</span></time>{%endif%} + </span> + </a> + </li> + {% endfor %}</ul> + </main> {%endblock%} diff --git a/app/posts/templates/posts/guide_detail.html b/app/posts/templates/posts/guide_detail.html index 7e5df74..998d6ce 100644 --- a/app/posts/templates/posts/guide_detail.html +++ b/app/posts/templates/posts/guide_detail.html @@ -37,13 +37,13 @@ <li><a href="/field-tests/" title="Advice, Tools, Tips and Tricks for Full Time Van, RV, and School Bus Life." itemprop="url"> <span itemprop="title">Field-Tests</span></a> → </li> <li itemprop="title">{{object.short_title|smartypants|safe}}</li> </ul> - <article class="h-entry hentry {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}" itemscope itemType="http://schema.org/Article"> + <article class="h-entry hentry" itemscope itemType="http://schema.org/Article"> <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> <meta itemprop="image" content="https://images.luxagraf.net/header.gif" /> <!--{{self.featured_image.url}}" />--> - <header id="header" class="post-header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}"> - <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> + <header id="header" class="post-header"> + <h1 class="p-name post-title" itemprop="headline">{{object.title|smartypants|safe}}</h1> <h2 class="post-subtitle">{{object.subtitle|smartypants|safe}}</h2> <div class="post-linewrapper"> {% if object.originally_published_by %}<h4 class="post-source">Originally Published By: <a href="{{object.originally_published_by_url}}" title="View {{object.title}} on {{object.originally_published_by}}">{{object.originally_published_by}}</a></h4>{%endif%} @@ -55,7 +55,7 @@ <time class="dt-published published dt-updated post-date" datetime="{{object.pub_date|date:'c'}}" itemprop="datePublished">Last Updated: {{object.last_updated|date:"F"}} <span>{{object.last_updated|date:"j, Y"}}</span></time> </div> </header> - <div id="article" class="e-content entry-content post--body post--body--{% with object.template_name as t %}{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%endwith%} post-guide" itemprop="articleBody"> + <div id="article" class="e-content entry-content post-body post-guide" itemprop="articleBody"> {% if object.preamble %}<div class="afterward"> {{object.preamble_html|smartypants|safe}} </div>{%endif%} diff --git a/app/posts/templates/posts/jrnl_detail.html b/app/posts/templates/posts/jrnl_detail.html index 7801f6a..09e6b5f 100644 --- a/app/posts/templates/posts/jrnl_detail.html +++ b/app/posts/templates/posts/jrnl_detail.html @@ -54,31 +54,30 @@ } </script> {%endblock%} -{%block htmlclass%}{% with object.template_name as t %} -class="detail {%if t == 1 or t == 3 or t == 5 %}double{%else%}single{%endif%}{%if t == 2 or t == 3 %} dark{%endif%}{%if t == 4 or t == 5 %} black{%endif%}"{%endwith%}{%endblock%} - - {% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %} -{% block primary %} - <main> - <article class="h-entry hentry entry-content content{% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}" itemscope itemType="http://schema.org/BlogPosting"> - <header id="header" class="post-header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}"> - <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> + {% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %} + {% block primary %}<main> + <article class="h-entry hentry entry-content content" itemscope itemType="http://schema.org/BlogPosting"> + <header id="header" class="post-header"> + <h1 class="p-name post-title" itemprop="headline">{{object.title|smartypants|safe}}</h1> {% if object.subtitle %}<h2 class="post-subtitle">{{object.subtitle|smartypants|safe}}</h2>{%endif%} - <div class="post-linewrapper"> + <div class="post-dateline"> {% if object.location %}<div class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> - <h3 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%}</h3> + <span 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%} + </span> – <a href="" onclick="showMap({{object.latitude}}, {{object.longitude}}, { type:'point', lat:'{{object.latitude}}', lon:'{{object.longitude}}'}); return false;" title="see a map">Map</a> </div>{%endif%} <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> <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> </div> </header> - <div id="article" class="e-content entry-content post--body post--body--{% with object.template_name as t %}{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%endwith%}" itemprop="articleBody"> - {{object.body_html|safe|smartypants}} - </div> + <div class="e-content entry-content post-body" itemprop="articleBody"> + {{object.body_html|safe|smartypants}} + </div> {%if wildlife or object.field_notes.all or object.books.all %}<div class="entry-footer">{%if wildlife %} <aside id="wildlife"> - <h3>Fauna and Flora</h3> + <h3 class="hedtinycaps">Fauna and Flora</h3> {% regroup wildlife by ap.apclass.get_kind_display as wildlife_list %} <ul> {% for object_list in wildlife_list %} @@ -90,14 +89,14 @@ class="detail {%if t == 1 or t == 3 or t == 5 %}double{%else%}single{%endif%}{%i </aside> {% endif %}{%if object.field_notes.all %} <aside {% if wildlife %}class="margin-left-none" {%endif%}id="field_notes"> - <h3>Field Notes</h3> + <h3 class="hedtinycaps">Field Notes</h3> <ul>{% for obj in object.field_notes.all %} <li><a href="{% url 'fieldnotes:detail' year=obj.pub_date.year month=obj.pub_date|date:"m" slug=obj.slug %}">{{obj}}</a></li> {% endfor %}</ul> </aside>{% endif %} {%if object.books.all %} <aside id="recommended-reading" {%if object.field_notes.all and wildlife %}class="rr-clear{%endif%}" > - <h3>Recommended Reading</h3> + <h3 class="hedtinycaps">Recommended Reading</h3> <ul>{% for obj in object.books.all %} <li><a href="{% url 'books:detail' slug=obj.slug %}"><img src="{{obj.get_small_image_url}}" /></a></li> {% endfor %}</ul> @@ -106,40 +105,39 @@ class="detail {%if t == 1 or t == 3 or t == 5 %}double{%else%}single{%endif%}{%i </article> {% with object.get_next_published as next %} {% with object.get_previous_published as prev %} - <div class="nav-wrapper"> - <nav id="page-navigation" {%if wildlife or object.field_notes.all or object.books.all %}{%else%}class="page-border-top"{%endif%}> - <ul>{% if prev%} - <li id="prev"><span class="bl">Previous:</span> - <a href="{{ prev.get_absolute_url }}" rel="prev" title=" {{prev.title}}">{{prev.title|safe}}</a> - </li>{%endif%}{% if next%} - <li id="next"><span class="bl">Next:</span> - <a href="{{ next.get_absolute_url }}" rel="next" title=" {{next.title}}">{{next.title|safe}}</a> - </li>{%endif%} - </ul> + <nav class="page-navigation"> + <div>{% if prev%} + <span class="label">Previous:</span> + <a href="{{ prev.get_absolute_url }}" rel="prev" title=" {{prev.title}}">{{prev.title|safe}}</a> + </div>{%endif%}{% if next%} + <div> + <span class="label">Next:</span> + <a href="{{ next.get_absolute_url }}" rel="next" title=" {{next.title}}">{{next.title|safe}}</a> + </div>{%endif%} </nav>{%endwith%}{%endwith%} - </div> {% if object.related.all %}<div class="article-afterward related"> - <div class="related-bottom"> + <div class="related-bottom"> <h6 class="hedtinycaps">You might also enjoy</h6> - <ul class="article-card-list">{% for object in related %} - <li class="article-card-mini"><a href="{{object.get_absolute_url}}" title="{{object.title}}"> - <div class="post-image post-mini-image"> - {% if object.featured_image %} - {% include "lib/img_archive.html" with image=object.featured_image nolightbox=True %} - {%endif%} - </div> - <h4 class="p-name entry-title post-title" itemprop="headline">{% if object.title %}{{object.title|safe|smartypants|widont}}{% else %}{{object.common_name}}{%endif%}</h4> - <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="post-summary"> - {% if object.location %}<span class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> - {% if object.location.country_name == "United States" %}{{object.location.state_name}}{%else%}{{object.location.country_name}}{%endif%} - </span>{%endif%} - {% if object.location and object.model_name.model != 'page' %}–{%endif%} - {% if object.model_name.model != 'page' %}<time class="dt-published published dt-updated post-date" datetime="{{object.pub_date|date:'c'}}"><span>{{object.pub_date|date:" Y"}}</span></time>{%endif%} - </p> + <div class="archive-grid-quad">{% for object in related %} + <div class="archive-grid-card archive-grid-card-simple"> + <a href="{{object.get_absolute_url}}" title="{{object.title}}"> + <div class="card-image-tiny"> + {% if object.featured_image %} + {% include "lib/img_archive.html" with image=object.featured_image nolightbox=True %} + {%endif%} + </div> + <h4 class="p-name card-hed" itemprop="headline">{% if object.title %}{{object.title|safe|smartypants|widont}}{% else %}{{object.common_name}}{%endif%}</h4> + <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> + <span class="card-smcaps"> + {% if object.location %}<span class="p-location h-adr adr card-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> + {% if object.location.country_name == "United States" %}{{object.location.state_name}}{%else%}{{object.location.country_name}}{%endif%} + </span>{%endif%} + {% if object.location and object.model_name.model != 'page' %}–{%endif%} + {% if object.model_name.model != 'page' %}<time class="dt-published published dt-updated" datetime="{{object.pub_date|date:'c'}}"><span>{{object.pub_date|date:" Y"}}</span></time>{%endif%} + </span> </a> - </li> - {% endfor %}</ul> + </div> + {% endfor %}</div> </div> </div>{%endif%} @@ -150,6 +148,7 @@ class="detail {%if t == 1 or t == 3 or t == 5 %}double{%else%}single{%endif%}{%i {% if object.enable_comments %} {% get_comment_count for object as comment_count %} {%if comment_count > 0 %} +<div class="comment-wrapper"> <p class="comments--header">{{comment_count}} Comment{{ comment_count|pluralize }}</p> {% render_comment_list for object %} {%endif%} @@ -159,6 +158,7 @@ class="detail {%if t == 1 or t == 3 or t == 5 %}double{%else%}single{%endif%}{%i {% else %} <p class="comments--header" style="text-align: center">Sorry, comments have been disabled for this post.</p> {%endif%} +</div> </main> {% endblock %} {% block js %} @@ -181,7 +181,7 @@ document.addEventListener("DOMContentLoaded", function(event) { } {%endif%}{%endwith%} } - + {%comment%} lightbox.onload = function() { var opts= { //nextOnClick: false, @@ -199,6 +199,7 @@ document.addEventListener("DOMContentLoaded", function(event) { var lightbox = new Lightbox(); lightbox.load(opts); } + {%endcomment%} {% if object.enable_comments %} {% get_comment_count for object as comment_count %} {%if comment_count > 0 %} @@ -208,7 +209,7 @@ document.addEventListener("DOMContentLoaded", function(event) { var c = dataattr[i].parentNode; var img = document.createElement("img"); img.src = 'https://images.luxagraf.net/gravcache/' + dataattr[i].getAttribute('data-hash') + '.jpg'; - img.className += "gravatar"; + img.className += "comment-card-image"; img.alt = "gravatar icon"; c.insertBefore(img, c.childNodes[3]); } diff --git a/app/posts/templates/posts/jrnl_list.html b/app/posts/templates/posts/jrnl_list.html index 6eefe10..6b4411f 100644 --- a/app/posts/templates/posts/jrnl_list.html +++ b/app/posts/templates/posts/jrnl_list.html @@ -7,18 +7,18 @@ {% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %} {% block primary %}<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 archive-card {% cycle 'odd' 'even' %} {% cycle 'first' 'second' 'third' %}" itemscope itemType="http://schema.org/Article"> - <div class="post-image"> + <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}}">{% 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> + <h2 class="p-name card-hed-it" 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"> + <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> + <p class="card-summary card-dek"> + <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> – <span class="p-summary" itemprop="description"> diff --git a/app/posts/templates/posts/post_detail.html b/app/posts/templates/posts/post_detail.html index 9e82786..4c897fc 100644 --- a/app/posts/templates/posts/post_detail.html +++ b/app/posts/templates/posts/post_detail.html @@ -37,10 +37,10 @@ <li><a href="/field-tests/" title="Advice, Tools, Tips and Tricks for Full Time Van, RV, and School Bus Life." itemprop="url"> <span itemprop="title">{{object.get_post_type_display}}</span></a> → </li> <li itemprop="title">{{object.short_title|smartypants|safe}}</li> </ul> - <article class="h-entry hentry {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}" itemscope itemType="http://schema.org/Article"> - <header id="header" class="post-header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}"> - <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">{{object.subtitle|smartypants|safe}}</h2> + <article class="h-entry hentry entry-content content" itemscope itemType="http://schema.org/BlogPosting"> + <header id="header" class="post-header"> + <h1 class="p-name post-title" itemprop="headline">{{object.title|smartypants|safe}}</h1> + {% if object.subtitle %}<h2 class="post-subtitle">{{object.subtitle|smartypants|safe}}</h2>{%endif%} <div class="post-linewrapper"> {% if object.originally_published_by %}<h4 class="post-source">Originally Published By: <a href="{{object.originally_published_by_url}}" title="View {{object.title}} on {{object.originally_published_by}}">{{object.originally_published_by}}</a></h4>{%endif%} {% if object.location %}<div class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> @@ -51,7 +51,7 @@ <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> </div> </header> - <div id="article" class="e-content entry-content post--body post--body--{% with object.template_name as t %}{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%endwith%} post-essay" itemprop="articleBody"> + <div id="article" class="e-content entry-content post-body" itemprop="articleBody"> {% if object.preamble %}<div class="afterward"> {{object.preamble_html|smartypants|safe}} </div>{%endif%} diff --git a/app/posts/templates/posts/src_detail.html b/app/posts/templates/posts/src_detail.html index 8e58b3b..179bb68 100644 --- a/app/posts/templates/posts/src_detail.html +++ b/app/posts/templates/posts/src_detail.html @@ -22,26 +22,13 @@ {% block bodyid %}class="src detail single"{% endblock %} {%block sitesubtitle %}Code Slowly{% endblock%} -{% block breadcrumbs %}<ol class="bl" id="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList"> - <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> - <a itemprop="item" href="/"> - <span itemprop="name">Home</span> - </a> → - <meta itemprop="position" content="1" /> - </li> - <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> - <a href="/src/" itemprop="item"> - <span itemprop="name">Src</span> - </a> - <meta itemprop="position" content="2" /> - </li> - </ol>{% endblock %} +{% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %} {% block primary %}<main role="main"> - <article class="hentry post-article{% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}" itemscope itemType="http://schema.org/Article"> - <header id="header" class="post-header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}"> - <h1 class="p-name entry-title post--title" itemprop="headline">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|safe|smartypants}}{%else%}{{object.title|safe|smartypants|widont}}{%endif%}</h1> - <h2 class="post-subtitle">{% if object.subtitle %}{{object.subtitle|smartypants|safe}}{%else%}{{object.meta_description|safe|smartypants|widont}}{%endif%}</h2> - <div class="post-linewrapper"> + <article class="h-entry hentry entry-content content" itemscope itemType="http://schema.org/BlogPosting"> + <header id="header" class="post-header"> + <h1 class="p-name post-title" itemprop="headline">{{object.title|smartypants|safe}}</h1> + <h2 class="post-subtitle">{% if object.subtitle %}{{object.subtitle|smartypants|safe}}{%else%}{{object.meta_description|safe|smartypants|widont}}{%endif%}</h2> + <div class="post-dateline"> {% if object.originally_published_by %}<h4 class="post-source">Originally Published By: <a href="{{object.originally_published_by_url}}" title="View {{object.title}} on {{object.originally_published_by}}">{{object.originally_published_by}}</a></h4>{%endif%} <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> <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> @@ -49,12 +36,12 @@ </header> - <div id="article" class="e-content entry-content post-body post-body-{% with object.template_name as t %}{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%endwith%}" itemprop="articleBody"> + <div id="article" class="e-content entry-content post-article post-body-{% with object.template_name as t %}{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%endwith%}" itemprop="articleBody"> {{object.body_html|safe|smartypants|widont}} </div> </article> <div class="entry-footer"> - <aside id="donate"> + <aside class="donate"> <h3>Donate</h3> <p>I've had several people ask about tipping for the articles here. That's not necessary, but if this article saved you some time and you feel like that's worth some money, I won't turn it down. You can donate here:</p> <div class="donate-btn"> @@ -69,42 +56,41 @@ </div> </aside> </div> - {% if object.slug != 'about' %} {% with object.get_next_published as next %} {% with object.get_previous_published as prev %} - <nav id="page-navigation"> - <ul>{% if prev%} - <li id="prev"><span class="bl">Previous:</span> - <a href="{{ prev.get_absolute_url }}" rel="prev" title=" {{prev.title}}">{{prev.title|safe}}</a> - </li>{%endif%}{% if next%} - <li id="next"><span class="bl">Next:</span> - <a href="{{ next.get_absolute_url }}" rel="next" title=" {{next.title}}">{{next.title|safe}}</a> - </li>{%endif%} - </ul> + <nav class="page-navigation"> + <div>{% if prev%} + <span class="label">Previous:</span> + <a href="{{ prev.get_absolute_url }}" rel="prev" title=" {{prev.title}}">{{prev.title|safe}}</a> + </div>{%endif%}{% if next%} + <div> + <span class="label">Next:</span> + <a href="{{ next.get_absolute_url }}" rel="next" title=" {{next.title}}">{{next.title|safe}}</a> + </div>{%endif%} </nav>{%endwith%}{%endwith%} - {%endif%} {% if object.related.all %}<div class="article-afterward related"> <div class="related-bottom"> <h6 class="hedtinycaps">You might also enjoy</h6> - <ul class="article-card-list">{% for object in related %} - <li class="article-card-mini"><a href="{{object.get_absolute_url}}" title="{{object.title}}"> - <div class="post-image post-mini-image"> - {% if object.featured_image %} - {% include "lib/img_archive.html" with image=object.featured_image nolightbox=True %} - {%endif%} - </div> - <h4 class="p-name entry-title post-title" itemprop="headline">{% if object.title %}{{object.title|safe|smartypants|widont}}{% else %}{{object.common_name}}{%endif%}</h4> - <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="post-summary"> - {% if object.location %}<span class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> - {% if object.location.country_name == "United States" %}{{object.location.state_name}}{%else%}{{object.location.country_name}}{%endif%} - </span>{%endif%} - {% if object.location and object.model_name.model != 'page' %}–{%endif%} - {% if object.model_name.model != 'page' %}<time class="dt-published published dt-updated post-date" datetime="{{object.pub_date|date:'c'}}"><span>{{object.pub_date|date:"F Y"}}</span></time>{%endif%} - </p> + <div class="archive-grid-quad">{% for object in related %} + <div class="archive-grid-card archive-grid-card-simple"> + <a href="{{object.get_absolute_url}}" title="{{object.title}}"> + <div class="card-image-tiny"> + {% if object.featured_image %} + {% include "lib/img_archive.html" with image=object.featured_image nolightbox=True %} + {%endif%} + </div> + <h4 class="p-name card-hed" itemprop="headline">{% if object.title %}{{object.title|safe|smartypants|widont}}{% else %}{{object.common_name}}{%endif%}</h4> + <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> + <span class="card-smcaps"> + {% if object.location %}<span class="p-location h-adr adr card-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> + {% if object.location.country_name == "United States" %}{{object.location.state_name}}{%else%}{{object.location.country_name}}{%endif%} + </span>{%endif%} + {% if object.location and object.model_name.model != 'page' %}–{%endif%} + {% if object.model_name.model != 'page' %}<time class="dt-published published dt-updated" datetime="{{object.pub_date|date:'c'}}"><span>{{object.pub_date|date:" Y"}}</span></time>{%endif%} + </span> </a> - </li> - {% endfor %}</ul> + </div> + {% endfor %}</div> </div> </div>{%endif%} </main> diff --git a/app/posts/templates/posts/src_list.html b/app/posts/templates/posts/src_list.html index 21a8c4e..dd8ff24 100644 --- a/app/posts/templates/posts/src_list.html +++ b/app/posts/templates/posts/src_list.html @@ -1,30 +1,35 @@ {% extends 'base.html' %} {% load typogrify_tags %} +{% load pagination_tags %} {% load comments %} {% block pagetitle %}Tutorials and tools for building great things{% endblock %} {% block metadescription %}Tutorials and tools for building great things on the web - by Scott Gilbertson.{% endblock %} {%block sitesubtitle %}Code Slowly{% endblock%} {% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %} -{% block primary %}<main role="main" id="essay-archive" class="essay-archive archive-list"> - <div class="essay-intro"> - <h2>Tutorials and tools for building great things on the web.</h2> +{% block primary %}<main role="main" class="archive-wrapper"> + <div class="archive-intro"> + <h2 class="archive-hed">Tutorials and tools for building great things on the web.</h2> <p>The indie web is an amazing democratic publishing platform unlike anything in history. The catch is, to avoid serving at the pleasure of the corporate king, you need to know <em>how</em> to publish. That's what these articles are here for, to help you learn how to use independent, community supported open source tools. The web won't last forever, let's build something cool while we can.</p> <p>Topics include HTML, CSS, Django, Linux, Nginx, Python, Postgresql, free software, and, once, the evil that is Google AMP.</p> <p>A few of the articles below were previously published in: <em><a href="https://arstechnica.com/">Ars Technica</a></em>, <em><a href="https://www.wired.com/author/scott-gilbertson/">Wired</a></em>, and <em><a href="https://www.theregister.co.uk/Author/Scott-Gilbertson/">The Register</a></em></p> </div> - <h1 class="topic-hed">Articles</h1> - <ul class="fancy-archive-list">{% for object in object_list %}{% if object.slug != 'about' %} - <li class="h-entry hentry" itemscope itemType="http://schema.org/Article"> - <span class="date dt-published">{{object.pub_date|date:"F Y"}}</span> + <h1 class="archive-sans">Articles</h1>{% autopaginate object_list 24 %} + <ul class="archive-list">{% for object in object_list %} + <li class="h-entry hentry archive-list-card archive-list-card-sm" itemscope itemType="http://schema.org/Article"> + <span class="date dt-published card-smcaps">{{object.pub_date|date:"F Y"}}</span> <a href="{{object.get_absolute_url}}"> - <h2>{{object.title|safe|smartypants|widont}}</h2> - <p class="p-summary">{% if object.subtitle %}{{object.subtitle}}{%else%}{{object.meta_description|safe|smartypants|widont}}{%endif%}</p> + <h2 class="card-hed">{{object.title|safe|smartypants|widont}}</h2> + <p class="p-summary card-lede">{% if object.subtitle %}{{object.subtitle}}{%else%}{{object.meta_description|safe|smartypants|widont}}{%endif%}</p> </a> </li> - {%endif%}{%endfor%}</ul> + {%endfor%}</ul> + <nav aria-label="page navigation" class="pagination"> + {% paginate %} + </nav> </main> {%endblock%} + |