diff options
Diffstat (limited to 'design/templates/details')
| -rw-r--r-- | design/templates/details/entry.html | 44 | ||||
| -rw-r--r-- | design/templates/details/national-parks.html | 54 | ||||
| -rw-r--r-- | design/templates/details/note.html | 37 | ||||
| -rw-r--r-- | design/templates/details/photo_galleries.html | 39 |
4 files changed, 77 insertions, 97 deletions
diff --git a/design/templates/details/entry.html b/design/templates/details/entry.html index 393f233..bfbae23 100644 --- a/design/templates/details/entry.html +++ b/design/templates/details/entry.html @@ -16,37 +16,31 @@ class="{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%en {% block primary %} - <article role="main" class="h-entry hentry"> - <header> - <h1 class="p-name entry-title">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|smartypants|safe}}{%else%}{{object.title|smartypants|widont|safe}}{%endif%}</h1> - <time class="dt-published published updated" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time> - <p class="p-author author hide">Scott Gilbertson</p> - <aside class="h-adr adr geo bl"> - {% if object.country.name == "United States" %}<span class="p-locality locality" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/writing/united-states/" title="travel writing from the United States">{{object.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="/writing/{{object.country.slug}}/" title="travel writing from {{object.country.name}}">{{object.country.name}}</a>{%endif%} - <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}"></data> - <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}"></data> - {%comment%} (<a href="" title="">Map</a>, <a href="" title="">Photos</a>){%endcomment%} - </aside> - </header> - <div class="e-content entry-content 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%}"> + <main role="main"> + <article class="h-entry hentry post--article{% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}"> + <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">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|smartypants|safe}}{%else%}{{object.title|smartypants|widont|safe}}{%endif%}</h1> + <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="p-author author hide">Scott Gilbertson</p> + <aside class="p-location h-adr adr post--location"> + {% if object.country.name == "United States" %}<span class="p-locality locality" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/writing/united-states/" title="travel writing from the United States">{{object.state.name|safe}}</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="/writing/{{object.country.slug}}/" title="travel writing from {{object.country.name}}">{{object.country.name|safe}}</a>{%endif%} + <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}"></data> + <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}"></data> + {%comment%} (<a href="" title="">Map</a>, <a href="" title="">Photos</a>){%endcomment%} + </aside> + </header> + <div 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%}"> {{object.body_html|safe|smartypants|widont}} - </div>{%if object.template_name == 1 %} - <div class="clearfix"></div>{%endif%}{%if object.template_name == 3 %}<div class="clearfix"></div>{%endif%} - {%comment%} - <footer id="post-metadata"> - <h4 class="hide">About {{object.title|smartypants|safe}}</h4> - <p>Posted <time datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F j, Y"}}</time>, from {% if object.country_name == "United States" %}{{object.location_name|smartypants|safe}}, <a href="/writing/united-states/1/" title="travel writing from the United States">{{object.state_name}}</a>{%else%}{{object.location_name|smartypants|safe}}, <a href="/writing/{{object.country_name|slugify}}/1/" title="travel writing from {{object.country_name}}">{{object.country_name}}</a>{%endif%}. - Follow along on <a href="http://twitter.com/luxagraf" title="twitter" rel="me">Twitter</a> or by subscribing to the <a href="http://feeds.feedburner.com/luxagraf/blog" title="writing RSS 2.0 feed">RSS Feed</a>. For more about me, see the <a href="/about/" title="about luxagraf">about page</a>. To get in touch please use the <a href="/contact/" title="contact me">contact form</a> or leave a comment below.</p> - </footer> - {% endcomment %} + </div> + </article> {% with object.get_next_published as next %} {% with object.get_previous_published as prev %} <nav id="page-navigation"> <ul>{% if prev%} - <li id="next"><span class="bl">Previous:</span> + <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="prev"><span class="bl">Next:</span> + <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> @@ -67,7 +61,7 @@ class="{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%en <div id="disqus_thread"></div><script type="text/javascript" src="http://disqus.com/forums/luxagraf/embed.js"></script><noscript><a href="http://luxagraf.disqus.com/?url=ref">View the discussion thread.</a></noscript><a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a> </section> {%endcomment%} - </article> + </main> {% endblock %} {% block js %} {% with object.template_name as t %}{%if t == 1 or t == 3 %} diff --git a/design/templates/details/national-parks.html b/design/templates/details/national-parks.html index e05bd12..baa2b08 100644 --- a/design/templates/details/national-parks.html +++ b/design/templates/details/national-parks.html @@ -18,36 +18,36 @@ <li><a href="/projects/" title="luxagraf projects page" itemprop="url"><span itemprop="title">Projects</span></a> →</li> <li>National Parks</li> </ul> - <section> + <main role="main" class="main--full"> <h1 class="hide">The National Parks Project</h1>{% for object in object_list %} <article id="park-{{forloop.counter}}" class="park"> - <h1>{{object.name}}</h1> - <div class="figure"> - <img src="{{object.get_image_url}}" alt="{{object.name}}" width="{{object.image_width}}" height="{{object.image_height}}" /> - </div> - <div class="legend"> - <h2>{{object.tag_line}}</h2> - <ul class="buttons"> - <li><a href="{{object.post.get_absolute_url}}" title="{{object.post.title}}">Read Journal</a></li> - {%if object.gallery%}<li><a href="{{object.gallery.get_absolute_url}}" title="Photos of {{object.unit_name}}">View Photos</a></li>{%endif%} - <li><a href="#" class="map-link" data-latitude="{{object.mpoly.centroid.y}}" data-longitude="{{object.mpoly.centroid.x}}" data-zoom="{{object.zoom}}" data-id="{{object.id}}">Map</a></li> - <li><a href="#" id="more-{{forloop.counter}}" class="more-link" title="More about {{object.unit_name}}">More</a></li> - </ul> - <dl class="meta" style="visibility: hidden;"> - <dt>Visited:</dt> - <dd>{{object.date_visited_begin|date:"m/d/y"}} - {{object.date_visited_end|date:"m/d/y"}}</dd> - <dt>State:</dt> - <dd>{{object.state}}</dd> - <dt>Size:</dt> - <dd>{{object.size}} sq miles</dd> - <dt>Cost:</dt> - <dd>${{object.fee}} / ${{object.camping_fee}} (entry/camping)</dd> - <dt>Link:</dt> - <dd>{{object.url|urlize}}</dd> - </dl> - </div> + <h1 class="park--title">{{object.name}}</h1> + <figure class="fig"> + <img src="{{object.get_image_url}}" alt="{{object.name}}" /> + <figcaption class="park--legend"> + <h2 class="park--subtitle">{{object.tag_line}}</h2> + <ul class="buttons"> + <li><a href="{{object.post.get_absolute_url}}" title="{{object.post.title}}">Read Journal</a></li> + {%if object.gallery%}<li><a href="{{object.gallery.get_absolute_url}}" title="Photos of {{object.unit_name}}">View Photos</a></li>{%endif%} + <li><a href="#" class="map-link" data-latitude="{{object.mpoly.centroid.y}}" data-longitude="{{object.mpoly.centroid.x}}" data-zoom="{{object.zoom}}" data-id="{{object.id}}">Map</a></li> + <li><a href="#" id="more-{{forloop.counter}}" class="more-link" title="More about {{object.unit_name}}">More</a></li> + </ul> + <dl class="meta" style="visibility: hidden;"> + <dt>Visited:</dt> + <dd>{{object.date_visited_begin|date:"m/d/y"}} - {{object.date_visited_end|date:"m/d/y"}}</dd> + <dt>State:</dt> + <dd>{{object.state}}</dd> + <dt>Size:</dt> + <dd>{{object.size}} sq miles</dd> + <dt>Cost:</dt> + <dd>${{object.fee}} / ${{object.camping_fee}} (entry/camping)</dd> + <dt>Link:</dt> + <dd>{{object.url|urlize}}</dd> + </dl> + </figcaption> + </figure> </article>{% endfor %} - </section> + </main> {% endblock %} {% block js %} <script type="text/javascript" src="/media/js/jquery.js"></script> diff --git a/design/templates/details/note.html b/design/templates/details/note.html index 66dff36..87a1e25 100644 --- a/design/templates/details/note.html +++ b/design/templates/details/note.html @@ -12,22 +12,23 @@ <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 permalink" id="archive-{% if month %}{{month|month_number_to_name}}{%endif%}{{year}}"{%endblock%} +{% block bodyid %}class="notes--permalink" id="archive-{% if month %}{{month|month_number_to_name}}{%endif%}{{year}}"{%endblock%} {% block primary %} <main role="main"> <article class="h-entry"> - <div class="p-name e-content"> + <h1 class="p-name note--title hide">{{object.title|safe|amp|smartypants}}</h1> + <div class="e-content"> {{object.render|safe|amp|smartypants|urlizetrunc:45 }} </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> + <footer class="note--footer"> <p class="note--date"> - <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time class="dt-published" datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"d M y"}}</time></a> + <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time class="dt-published" datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"F j, Y"}}</time></a> </p>{% if object.location %} <p class="p-location h-adr note--location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, @@ -35,19 +36,23 @@ <span class="p-country-name">{{object.location.state.country.name}}</span> <data class="p-latitude" value="{{object.latitude}}"></data> <data class="p-longitude" value="{{object.longitude}}"></data> - </p>{% endif %}{% if object.twitter_id %} - <p class="note--twitter"> - <a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">View on Twitter</a> - <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> - </action> - <action do="post" with="{{SITE_URL}}{{object.get_absolute_url}}"> + </p>{% endif %}{% 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> + <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></action> + </li> + <li> + <action do="post" with="{{SITE_URL}}{{object.get_absolute_url}}"> <a href="https://twitter.com/intent/retweet?tweet_id={{object.twitter_id}}">Retweet</a> - </action> - <action do="bookmark" with="{{SITE_URL}}{{object.get_absolute_url}}"> - <a href="https://twitter.com/intent/favorite?tweet_id={{object.twitter_id}}">Favourite</a> - </action> - </p>{% endif %} + </action> + </li> + <li> + <action do="bookmark" with="{{SITE_URL}}{{object.get_absolute_url}}"> + <a href="https://twitter.com/intent/favorite?tweet_id={{object.twitter_id}}">Favourite</a> + </action> + </li> + </ul>{% endif %} </footer> {% with object.get_next_published as next %} diff --git a/design/templates/details/photo_galleries.html b/design/templates/details/photo_galleries.html index f508bb4..5275f2d 100644 --- a/design/templates/details/photo_galleries.html +++ b/design/templates/details/photo_galleries.html @@ -22,45 +22,26 @@ <li>{{object.set_title}}</li> </ul> <p class="directions">Use left/right arrow keys to navigate through photos</p> - <section id="slides"> + <main id="slides" class="image-gallery--wrapper"> <h1 class="hide">Photos from {{object.set_title}}</h1>{%for photo in object.photos.all reversed %} <article id="image-{{forloop.counter}}"> <h6><a href="#image-{{forloop.counter}}" class="permalink" title="link to this image">∞ {{forloop.counter|number_to_word}} ∞</a></h6> - <div class="fig"><img src="{{photo.get_local_slideshow_url}}" {% if photo.has_retina %}srcset="{{photo.get_retina_slideshow_url}} 2x"{% endif %} alt="{{photo.title}}" title="{{photo.title}}" {%if photo.is_portait %}class="v"{%endif%} height="{{photo.slideshowimage_height}}" width="{{photo.slideshowimage_width}}" style="max-width: {{photo.slideshowimage_width}}px" /></div> - <div class="figcaption"> + <figure class="fig"><img src="{{photo.get_local_slideshow_url}}" {% if photo.has_retina %}srcset="{{photo.get_retina_slideshow_url}} 2x"{% endif %} alt="{{photo.title}}" {%if photo.is_portait %}class="v"{%endif%} /> + <figcaption class="figcaption"> <div class="caption" id="id-{{photo.id}}"> - <h3>{{photo.title}} <time datetime="{{photo.exif_date|date:'c'}}" pubdate>{{photo.exif_date|date:"M j, Y"}}</time></h3> + <h3 class="figcaption--title">{{photo.title}}</h3> + <time class="figcaption--date" datetime="{{photo.exif_date|date:'c'}}">{{photo.exif_date|date:"M j, Y"}}</time> <a class="map-link" href="#" data-latitude="{{photo.lat}}" data-longitude="{{photo.lon}}" data-imgid="id-{{photo.id}}">Map</a> - {%if photo.description %}<p>{{photo.description|safe}}</p> {%endif%} + {%if photo.description %}<p class="figcaption--desc">{{photo.description|safe}}</p> {%endif%} </div> <div class="photo-options"> - <p>{% if photo.exif_make == 'Canon'%}{{photo.exif_model}}{%endif%}{% if photo.exif_model == 'DMC-LX2'%}{{photo.exif_make}} {{photo.exif_model}}{%endif%}{%if photo.exif_model == 'DMC-GF1' %}Panasonic GF1 w/{%endif%} {%if photo.exif_lens == 'LUMIX G VARIO 14-45/F3.5-5.6' %}<a href="http://amzn.to/azIr5w" title="buy the {{photo.exif_lens}} on Amazon">Lumix 14-45mm lens</a>{%endif%}{%if photo.exif_lens == 'LUMIX G 20/F1.7' %}<a href="http://amzn.to/daMYOm" title="buy the {{photo.exif_lens}} on Amazon">Lumix 20mm prime lens</a>{%endif%}{%if photo.exif_lens == 'LUMIX G VARIO 45-200/F4.0-5.6' %}<a href="http://amzn.to/a9DfV7" title="buy the {{photo.exif_lens}} on Amazon">Lumix 45-200mm lens</a>{%endif%}{%if photo.exif_lens == 'OLYMPUS M.9-18mm F4.0-5.6' %}<a href="http://amzn.to/mGNVkl" title="buy the {{photo.exif_lens}} on Amazon">Olympus 9-18mm lens</a>{%endif%}{%if photo.exif_lens == None %}{%endif%}</p> - <p>{{photo.exif_exposure}} sec @ {{photo.exif_aperture}}, ISO {{photo.exif_iso}} </p> + <p>{% if photo.exif_make == 'Canon'%}{{photo.exif_model}}{%endif%}{% if photo.exif_model == 'DMC-LX2'%}{{photo.exif_make}} {{photo.exif_model}}{%endif%}{%if photo.exif_model == 'DMC-GF1' %}Panasonic GF1 with {%endif%} {%if photo.exif_lens == 'LUMIX G VARIO 14-45/F3.5-5.6' %}<a href="http://amzn.to/azIr5w" title="buy the {{photo.exif_lens}} on Amazon">Lumix 14-45mm lens</a>{%endif%}{%if photo.exif_lens == 'LUMIX G 20/F1.7' %}<a href="http://amzn.to/daMYOm" title="buy the {{photo.exif_lens}} on Amazon">Lumix 20mm prime lens</a>{%endif%}{%if photo.exif_lens == 'LUMIX G VARIO 45-200/F4.0-5.6' %}<a href="http://amzn.to/a9DfV7" title="buy the {{photo.exif_lens}} on Amazon">Lumix 45-200mm lens</a>{%endif%}{%if photo.exif_lens == 'OLYMPUS M.9-18mm F4.0-5.6' %}<a href="http://amzn.to/mGNVkl" title="buy the {{photo.exif_lens}} on Amazon">Olympus 9-18mm lens</a>{%endif%}{%if photo.exif_lens == None %}{%endif%}</p> + <p>{{photo.exif_exposure}} sec at f/{{photo.exif_aperture}}, ISO {{photo.exif_iso}} </p> <!--<p><a href="{{photo.flickr_link}}" title="View this Photo on Flickr.com">View on Flickr</a></p>--> <!--<a href="#" class="exif-link" title="{{photo.id}}">Camera</a>--> </div> - - {%comment%} - <div class="meta" style="display: none;"> - <dl> - <dt>Camera:</dt> - <dd>{% if photo.exif_make == 'Canon'%}{{photo.exif_model}}{%endif%}{% if photo.exif_model == 'DMC-LX2'%}{{photo.exif_make}} {{photo.exif_model}}{%endif%}{%if photo.exif_model == 'DMC-GF1' %}<a href="http://amzn.to/cLQozJ" title="Buy on Amazon">{{photo.exif_make}} {{photo.exif_model}}</a>{%endif%}</dd> - <dt>Lens: </dt> - <dd>{%if photo.exif_lens == 'LUMIX G VARIO 14-45/F3.5-5.6' %}<a href="http://amzn.to/azIr5w" title="buy the {{photo.exif_lens}} on Amazon">{{photo.exif_lens}}</a>{%endif%}{%if photo.exif_lens == 'LUMIX G 20/F1.7' %}<a href="http://amzn.to/daMYOm" title="buy the {{photo.exif_lens}} on Amazon">{{photo.exif_lens}}</a>{%endif%}{%if photo.exif_lens == 'LUMIX G VARIO 45-200/F4.0-5.6' %}<a href="http://amzn.to/a9DfV7" title="buy the {{photo.exif_lens}} on Amazon">{{photo.exif_lens}}</a>{%endif%}{%if photo.exif_lens == None %}Built-in{%endif%}</dd> - <dt>Exposure</dt> - <dd>{{photo.exif_exposure}}</dd> - <dt>Aperture</dt> - <dd>{{photo.exif_aperture}}</dd> - <dt>Focal Length: </dt> - <dd>{{photo.exif_focal_length}}</dd> - <dt>ISO: </dt> - <dd>{{photo.exif_iso}}</dd> - <dt>Comments: </dt> - <dd><a href="{{photo.flickr_link}}" title="View this Photo on Flickr.com">View on Flickr</a></dd> - </dl> - </div> - {%endcomment%} - </div> + </figcaption> + </figure> </article> {% endfor %} </section> |