diff options
Diffstat (limited to 'design')
| -rw-r--r-- | design/sass/_archives.scss | 29 | ||||
| -rw-r--r-- | design/sass/_details.scss | 10 | ||||
| -rw-r--r-- | design/sass/_src.scss | 7 | ||||
| -rw-r--r-- | design/templates/fieldnotes/fieldnote_archive_list_date.html | 44 | ||||
| -rw-r--r-- | design/templates/fieldnotes/fieldnote_detail.html | 81 | ||||
| -rw-r--r-- | design/templates/fieldnotes/fieldnote_list.html | 46 |
6 files changed, 209 insertions, 8 deletions
diff --git a/design/sass/_archives.scss b/design/sass/_archives.scss index 1d2060e..36dca63 100644 --- a/design/sass/_archives.scss +++ b/design/sass/_archives.scss @@ -408,5 +408,32 @@ line-height: 1.3; margin-top: 4px; } - + h3.p-summary { + font-family: $headline_font_serif; + font-style: italic; + margin-top: .25rem; + margin-bottom: .25rem; + line-height: 1.2; + @include fontsize(22); + } + .post-location { + margin: .5rem 0 0 0; + } +} +.circle-img-wrapper { + width: 106px; + height: 106px; + float: left; + overflow: hidden; + border-radius: 50%; + border: 3px solid #666; + margin-right: .5rem; + img { + width: 160px; + max-width: 160px; + } + @include breakpoint(gamma) { + margin-left: -128px; + margin-top: -10px; + } } diff --git a/design/sass/_details.scss b/design/sass/_details.scss index 8f25038..8996712 100644 --- a/design/sass/_details.scss +++ b/design/sass/_details.scss @@ -41,11 +41,21 @@ display: inline-block; border-top: 1px solid #efefef; color: #b6b6b6; + text-align: center; a { color: #b6b6b6; text-decoration: underline; text-decoration-color: $orange; } + @include breakpoint(gamma) { + text-align: left; + } + } + .post-date { + text-align: center; + @include breakpoint(alpha) { + text-align: left; + } } .map { width: 100vw; diff --git a/design/sass/_src.scss b/design/sass/_src.scss index a20e1f3..3cdaa57 100644 --- a/design/sass/_src.scss +++ b/design/sass/_src.scss @@ -168,10 +168,3 @@ code > .comment::after { } } -#essay-archive h1 { - @include constrain_narrow; -} -#essay-archive h4 { - margin-bottom: 3em; - margin-top: -.85em; -} diff --git a/design/templates/fieldnotes/fieldnote_archive_list_date.html b/design/templates/fieldnotes/fieldnote_archive_list_date.html new file mode 100644 index 0000000..57bbb69 --- /dev/null +++ b/design/templates/fieldnotes/fieldnote_archive_list_date.html @@ -0,0 +1,44 @@ +{% extends 'base.html' %} +{% load typogrify_tags %} +{% load html5_datetime %} +{% load pagination_tags %} +{% block pagetitle %} Field Notes | luxagraf {% endblock %} +{% block metadescription %} Rough notes and sketches from the field {% endblock %} +{%block bodyid%}id="field-notes"{%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>{% if month or year %}<a href="{% url 'fieldnotes:list' %}">Field Notes</a> →{%else%}Field Notes{%endif%}</li> + <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> + <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> + <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> + {%endif%}{%endfor%}</ul> + </main> + +{% endblock %} + + + diff --git a/design/templates/fieldnotes/fieldnote_detail.html b/design/templates/fieldnotes/fieldnote_detail.html new file mode 100644 index 0000000..fb5e9e4 --- /dev/null +++ b/design/templates/fieldnotes/fieldnote_detail.html @@ -0,0 +1,81 @@ +{% extends 'base.html' %} +{% load typogrify_tags %} +{% load html5_datetime %} +{% load month_number_to_name %} +{% block pagetitle %}{{object.title|title|smartypants|safe}} - Luxagraf, Field Notes{% endblock %} + +{% block metadescription %}{{object.body_html|striptags|safe|truncatewords:30}}{% endblock %} +{%block extrahead%} + <link rel="canonical" href="http://luxagraf.net{{object.get_absolute_url}}" /> + <meta name="ICBM" content="{{object.latitude}}, {{object.longitude}}" /> + <meta name="geo.position" content="{{object.latitude}}; {{object.longitude}}" /> + <meta name="geo.placename" content="{% if object.location.country.name == "United States" %}{{object.location.name|smartypants|safe}}, {{object.state.name}}{%else%}{{object.location.name|smartypants|safe}}, {{object.country.name}}{%endif%}"> + <meta name="geo.region" content="{{object.country.iso2}}{%if object.state.code != '' %}-{{object.state.code}}{%endif%}"> +{%endblock%} +{% block bodyid %}class="notes--permalin detail" id="archive-{% if month %}{{month|month_number_to_name}}{%endif%}{{year}}"{%endblock%} + + +{% block primary %}<ul class="bl crumbs" 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><a href="/field-notes/" itemprop="url"><span itemprop="title">Field Notes</span></a> →</li> + <li><a href="/field-notes/{{object.pub_date|date:"Y"}}/">{{object.pub_date|date:"Y"}}</a> →</li> + <li itemprop="title"><a href="/field-notes/{{object.pub_date|date:"Y"}}/{{object.pub_date|date:"m"}}/">{{object.pub_date|date:"F"}}</a></li> + </ul> + <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> + {% if object.subtitle %}<h2 class="post-subtitle">{{object.subtitle|smartypants|safe}}</h2>{%endif%} + <aside 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.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> + {% with object.get_template_name_display as t %}{%if t == "single" or t == "single-dark" %} – <a href="" onclick="showMap({{object.latitude}}, {{object.longitude}}, { type:'point', lat:'{{object.latitude}}', lon:'{{object.longitude}}'}); return false;" title="see a map">Map</a>{%endif%}{%endwith%} + </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> + <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> + </header> + <div class="e-content"> + {{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"> + <ul>{% if prev%} + <li rel="previous" id="next"><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 rel="next" id="prev"><span class="bl">Next:</span> + <a href="{{ next.get_absolute_url }}" rel="next" title=" {{next.title}}">{{next.title|safe}}</a> + </li>{%endif%} + </ul> + </nav>{%endwith%}{%endwith%} + </article> +</main> +{% endblock %} diff --git a/design/templates/fieldnotes/fieldnote_list.html b/design/templates/fieldnotes/fieldnote_list.html new file mode 100644 index 0000000..c667ef3 --- /dev/null +++ b/design/templates/fieldnotes/fieldnote_list.html @@ -0,0 +1,46 @@ +{% extends 'base.html' %} +{% load typogrify_tags %} +{% load html5_datetime %} +{% load pagination_tags %} +{% block pagetitle %} Field Notes | luxagraf {% endblock %} +{% block metadescription %} Rough notes and sketches from the field {% endblock %} +{%block bodyid%}id="field-notes"{%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>Field Notes</li> + </ul> + <main role="main" id="essay-archive" class="essay-archive archive-list"> + <div class="essay-intro"> + <h2>Field Notes</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> + {% autopaginate object_list 30 %} + <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> + <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> + {%endif%}{%endfor%}</ul> + </main> + + <nav class="pagination"> + {% paginate %} + </nav> +{% endblock %} + + + |