diff options
| author | luxagraf <sng@luxagraf> | 2021-01-15 14:54:30 -0500 |
|---|---|---|
| committer | luxagraf <sng@luxagraf> | 2021-01-15 14:54:30 -0500 |
| commit | 47b79fd9d4329e73cef7929ed8f64d9eeb287ae5 (patch) | |
| tree | 189381bfe0d81fdc1105679910114deaab3cdb58 /app/lttr/templates | |
| parent | e61f3d2c4537a2670c40b33eb02231a71dfb028a (diff) | |
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
Diffstat (limited to 'app/lttr/templates')
| -rw-r--r-- | app/lttr/templates/lttr/friends_detail.html | 82 | ||||
| -rw-r--r-- | app/lttr/templates/lttr/friends_list.html | 26 | ||||
| -rw-r--r-- | app/lttr/templates/lttr/newslettermailing_detail.html | 7 |
3 files changed, 51 insertions, 64 deletions
diff --git a/app/lttr/templates/lttr/friends_detail.html b/app/lttr/templates/lttr/friends_detail.html index 52a2a2a..11520a6 100644 --- a/app/lttr/templates/lttr/friends_detail.html +++ b/app/lttr/templates/lttr/friends_detail.html @@ -52,43 +52,41 @@ } </script> {%endblock%} -{%block bodyid%}id="home" class="archive"{%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> → +{%block bodyid%}id="home" class="friends"{%endblock%} +{% block breadcrumbs %}<nav class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList"> + <span class="nav-item" itemprop="item"> + <a href="/" itemprop="name">Home</a> <meta itemprop="position" content="1" /> - </li> - <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> - <a href="/newsletter/" itemprop="item"><span itemprop="name">Friends of a Long Year</span></a> - <meta itemprop="position" content="3" />→ - </li> - <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> - <span itemprop="item"> - <span itemprop="name">{{object.get_issue_str}}</span> - </span> - <meta itemprop="position" content="4" /> - </li> - </ol> + </span> + <span class="nav-item" itemprop="item"> + <a href="/newsletter/friends/" itemprop="name">Friends of a Long Year</a> + <meta itemprop="position" content="2" /> + </span> + <span class="nav-item" itemprop="item"> + <span itemprop="name">{{object.get_issue_str}}</span> + <meta itemprop="position" content="3" /> + </span> + </nav> {% endblock %} {% block primary %} <main> - <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}}" - alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}"> - </a>{%endwith%} - </figure> - <article class="h-entry hentry entry-content content lttr" 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" itemprop="headline">{{object.title|smartypants|safe}}</h1> - <div class="post-linewrapper"> + <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}}" + alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}"> + </a>{%endwith%} + </figure> + <article class="h-entry hentry 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> + <div class="post-dateline"> <time class="dt-published published dt-updated post-date lttr-box" datetime="{{object.pub_date|date:'c'}}" itemprop="datePublished">Transmission {{object.get_issue_str}} – {{object.pub_date|date:"F, 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"> + <div id="article" class="e-content entry-content post-body" itemprop="articleBody"> {{object.body_html|safe|smartypants}} </div> {%if object.books.all %}<div class="entry-footer"> @@ -133,23 +131,15 @@ {% with object.get_next_published as next %} {% with object.get_previous_published as prev %} - <div class="nav-wrapper"> - <nav id="page-navigation" class="page-nav-photo{%if wildlife or object.field_notes.all or object.books.all %}{%else%} page-border-top"{%endif%}> - <h4>Next / Previous</h4> - <ul>{% if next %} - <li id="next"> - <a href="{{ next.get_absolute_url }}" rel="next" title=" {{next.title}}"> - <img class="prev-next-img" src="{%get_image_by_size next.featured_image "navigation_thumb"%}" alt="{{next.featured_image.alt}}" /> - <div class="nav-title">{{next.get_issue_str}} – {{next.title|safe}}</div> - </a> - </li>{%endif%}{% if prev%} - <li id="prev"> - <a href="{{ prev.get_absolute_url }}" rel="prev" title=" {{prev.title}}"> - <img src="{%get_image_by_size prev.featured_image "navigation_thumb"%}" /> - <div class="nav-title">{{prev.get_issue_str}} – {{prev.title|safe}}</div> - </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"> diff --git a/app/lttr/templates/lttr/friends_list.html b/app/lttr/templates/lttr/friends_list.html index def730e..635492d 100644 --- a/app/lttr/templates/lttr/friends_list.html +++ b/app/lttr/templates/lttr/friends_list.html @@ -3,29 +3,25 @@ {% block pagetitle %}Luxagraf | Friends of a Long Year {% endblock %} {% block metadescription %}An infrequesnt mailing list about travel, photography, tools, walking, the natural world and other ephemera.{% 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> → </li> - <li>Lttr</li> - </ul> - <main role="main" id="essay-archive" class="essay-archive archive-list"> - <div class="essay-intro"> +{% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %} +{% block primary %} + <main role="main" class="archive-wrapper"> + <div class="archive-intro"> <h1 class="list-hed">Join the <em>Friends of a Long Year</em>.</h1> <iframe target='_parent' style="border:none; background:white; width:100%;" title="embedded form for subscribing the the Friends of a Long Year newsletter" src="{% url 'lttr:subscribe' slug='friends' %}"></iframe> - <h2 class="subhead">Say what? </h2> + <h2 class="list-subhed">Say what? </h2> <p><em>Friends of a Long Year</em> is a monthly letter about living outdoors, travel, literature, music, vintage vehicles, and other ephemera. Unsubscribing is easy. It's all <a href="/src/building-your-own-mailing-list-software">self-hosted</a>, secure, and <a href="/privacy" title="My privacy policy">private</a>.</p> <p>The name <em>Friends of a Long Year</em> comes from the early 20th century explorer and desert rat, Mary Hunter Austin, whose collected essays, <a href="https://archive.org/details/lostbordersillu00brotgoog/page/n8"><cite>Lost Borders</cite></a> is dedicated to the "Friends of a Long Year".</p> <p>While I came up with this name last year, it seems particularly fitting in 2020, which is shaping up to be a long year. If you like to travel with friends, mentally for now, please, join us.</p> </div> - <h3 class="list-title">Letters</h3> - <ul class="fancy-archive-list">{% for object in object_list %} - <li class="h-entry hentry" itemscope itemType="http://schema.org/Article"> + <h3 class="archive-sans">Letters</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">issue {{object.get_issue_str}} – {{object.pub_date|date:"M 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%} + <span class="date dt-published card-smcaps">issue {{object.get_issue_str}} – {{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%} </a> </li> {%endfor%}</ul> diff --git a/app/lttr/templates/lttr/newslettermailing_detail.html b/app/lttr/templates/lttr/newslettermailing_detail.html index 71aa294..1a89200 100644 --- a/app/lttr/templates/lttr/newslettermailing_detail.html +++ b/app/lttr/templates/lttr/newslettermailing_detail.html @@ -64,8 +64,9 @@ alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}"> </a>{%endwith%} </figure> - <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 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.location %}<div class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> @@ -76,7 +77,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%}" itemprop="articleBody"> + <div id="article" class="e-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 %} |