diff options
Diffstat (limited to 'design/templates')
| -rw-r--r-- | design/templates/archives/map.html | 2 | ||||
| -rw-r--r-- | design/templates/archives/notes.html | 31 | ||||
| -rw-r--r-- | design/templates/archives/notes_date.html | 64 | ||||
| -rw-r--r-- | design/templates/archives/photos.html | 22 | ||||
| -rw-r--r-- | design/templates/archives/projects.html | 20 | ||||
| -rw-r--r-- | design/templates/archives/writing.html | 38 | ||||
| -rw-r--r-- | design/templates/base.html | 26 | ||||
| -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 | ||||
| -rw-r--r-- | design/templates/fluent_comments/templatetags/flat_list.html | 17 |
12 files changed, 211 insertions, 183 deletions
diff --git a/design/templates/archives/map.html b/design/templates/archives/map.html index 493fefd..92fdc15 100644 --- a/design/templates/archives/map.html +++ b/design/templates/archives/map.html @@ -20,7 +20,7 @@ Google Maps code <li><a href="/" itemprop="url" title="luxagraf homepage"><span itemprop="title">Home</span></a> →</li> <li>Map</li> </ul> - <section> + <main role="main" class="map--wrapper"> <h1 class="hide">Browse luxagraf by map</h1> <div id="map-canvas"> <div id="map-inner-canvas" style="width: 100%; height: 100%; border: none !important;"></div> diff --git a/design/templates/archives/notes.html b/design/templates/archives/notes.html index cd4029c..b73e722 100644 --- a/design/templates/archives/notes.html +++ b/design/templates/archives/notes.html @@ -14,7 +14,8 @@ <h1>Notes</h1> {% for object in object_list %} <article class="h-entry"> - <div class="p-name e-content"> + <h2 class="p-name note--title hide">{{object.title|safe|amp|smartypants}}</h2> + <div class="e-content"> {{object.render|safe|amp|smartypants|urlizetrunc:45 }} </div> <span class="p-author h-card"> @@ -23,7 +24,7 @@ </span> <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>, @@ -32,18 +33,22 @@ <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}}"> + <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> </article> diff --git a/design/templates/archives/notes_date.html b/design/templates/archives/notes_date.html index d150792..8794da3 100644 --- a/design/templates/archives/notes_date.html +++ b/design/templates/archives/notes_date.html @@ -13,16 +13,17 @@ <main role="main"> <h1>Notes Published in {% if month %}{{month|month_number_to_name}}{%endif%} {{year}}</h1>{% if month %}{% for object in object_list %} <article class="h-entry"> - <div class="p-name e-content"> + <h2 class="p-name note--title hide">{{object.title|safe|amp|smartypants}}</h2> + <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>, @@ -31,18 +32,22 @@ <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}}"> + <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> </article> {% endfor %} @@ -51,26 +56,37 @@ <section class="month--divider"> <h2 class="month--header">{{ month.list.0.date_created|date:"F Y" }}</h2>{% for object in month.list|dictsortreversed:"date_created" %} <article class="h-entry"> - <div class="p-name e-content"> + <h2 class="p-name note--title hide">{{object.title|safe|amp|smartypants}}</h2> + <div class="e-content"> {{object.render|safe|amp|smartypants|urlizetrunc:45 }} </div> - <footer> - <p class="meta"> - <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time datetime="{{object.date_created|html5_datetime}}">{{object.date_created|date:"d M Y"}}</time></a> + <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:"F j, Y"}}</time></a> </p>{% if object.location %} - <p class="p-location h-adr meta location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> + <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>, <span class="p-region">{{object.state_name}}</span>, <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="meta twitter"> - <a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">View on Twitter</a> - <a href="https://twitter.com/intent/tweet?in_reply_to={{object.twitter_id}}">Reply</a> + <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> - <a href="https://twitter.com/intent/favorite?tweet_id={{object.twitter_id}}">Favourite</a> - </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> </article> {% endfor %} diff --git a/design/templates/archives/photos.html b/design/templates/archives/photos.html index e8d5ea6..c8d3db5 100644 --- a/design/templates/archives/photos.html +++ b/design/templates/archives/photos.html @@ -13,20 +13,20 @@ {% if region %}{%if region.name == 'United States'%} <li><a href="/photos/" title="See all Photos" itemprop="url"><span itemprop="title">Photos</span></a> →</li> <li>the United States</li>{%else%}<li><a href="/photos/" title="See all Photos" itemprop="url"><span itemprop="title">Photos</span></a> →</li> <li>{{region.name|title|smartypants|safe}}{%endif%}{%else%}<li>Photos </li>{%endif%} </ul> - <section> + <main role="main"> <h1 class="hide">{% if region %}Photographs from {{region.name|title|smartypants|safe}}{%else%}Photographs from Around the World {%endif%}</h1> - <ul id="photo-galleries">{% autopaginate object_list 18 %} {% for object in object_list %} - <li> - <div class="figure"> - <a href="{{object.get_absolute_url}}" title="view images from {{ object.set_title }}"><img src="{{object.get_main_image}}" alt="{{ object.set_title }}" width="291" height="350" /></a> - <div class="legend"> + <ul id="photo-galleries" class="image-gallery--list">{% autopaginate object_list 24 %} {% for object in object_list %} + <li class="{% cycle 'first' 'second' 'third' 'fourth'%} {% cycle 'one' 'two' 'three'%}"> + <figure class="image-gallery--figure"> + <a href="{{object.get_absolute_url}}" title="view images from {{ object.set_title }}"><img src="{{object.get_main_image}}" alt="{{ object.set_title }}" /></a> + <figcaption class="image-gallery--legend"> <h1>{{object.set_title}}</h1> <p>{{object.set_desc|truncatewords:30|smartypants|safe}}</p> - </div> - </div> + </figcaption> + </figure> </li>{% endfor %} </ul> - </section> - <div id="pagination">{% paginate %} - </div> + </main> + <nav class="pagination">{% paginate %} + </nav> {% endblock %} diff --git a/design/templates/archives/projects.html b/design/templates/archives/projects.html index 29aa160..cd0543a 100644 --- a/design/templates/archives/projects.html +++ b/design/templates/archives/projects.html @@ -9,21 +9,23 @@ <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> → </li> <li>Projects</li> </ul> - <div class="top"> - <p class="col hyphenate">These are a few of the things that I use to inspire myself to do more. The truth is, just about <a href="http://www.youtube.com/watch?v=8r1CZTLk-Gk" title="Louis CK talking about how everything is amazing">everything is amazing</a> when viewed from the proper perspective. </p> - <p class="col two hyphenate">The projects on luxagraf are more or less goals I've created in effort to get my body in motion, because the difference between the mundane and the amazing is often simply motion. To move is to do, and to do is to live.</p> + <main role="main" class="projects"> + <div class="projects--intro"> + <p>These projects are all designed to get my body and mind moving. Theories are interesting, goals are good, but ultimately talk is just talk. Your life – that thing you get maybe 76 or so years of, if you're lucky – is made up of what you do, not what you say.</p> + + <p>Some people, including me some days, think these sorts of goals, lists and self-experiments are silly and contrived. They are. But they also help me <em>do</em> more and remind me that <a href="http://www.youtube.com/watch?v=8r1CZTLk-Gk" title="Louis CK talking about how everything is amazing">everything is amazing</a> provided you remember that everything is amazing.</p> </div> - <section id="projects-archive" class="archive"> - <h1 class="hide">Projects</h1>{%for object in object_list %} - <article> + <ul id="projects-archive" class="projects--list">{%for object in object_list %} + <li> <h1><a href="{{object.get_absolute_url}}" title="{{object.title}}">{{object.title|safe}} {{object.subtitle|safe}}</a></h1> <div class="img"> <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img src="{{object.get_project_image}}" alt="{{ object.title }}" class="post-image" /></a> </div> <div class="hyphenate">{{object.lede|safe|smartypants}}</div> - <!--<span class="button"><a href="{{project.get_absolute_url}}">More »</a></span>--> - </article> {% endfor %} - </section> + <p class="projects--button"><a href="{{project.get_absolute_url}}">View Project ⇢</a></p> + </li> {% endfor %} + </ul> + </main> {% endblock %} {% block js %}<script src="/media/js/hyphenate.min.js" type="text/javascript"></script>{% endblock%} diff --git a/design/templates/archives/writing.html b/design/templates/archives/writing.html index 33a2b69..b752160 100644 --- a/design/templates/archives/writing.html +++ b/design/templates/archives/writing.html @@ -13,24 +13,30 @@ <li itemprop="title">the United States</li>{%else%}<li><a href="/writing/" title="See all Writing" itemprop="url"><span>Writing</span></a> →</li> <li>{{region.name|title|smartypants|safe}}</li>{%endif%}{%else%}<li>Writing </li>{%endif%} </ul> - <section id="writing-archive" class="archive"> - <h1 class="hide">{% if region %}Writing from {%if region.name == 'United States'%}the United States{%else%}{{region.name|title|smartypants|safe}}{%endif%}{%else%}Writing Archive {%endif%}</h1>{% autopaginate object_list 10 %} {% for object in object_list %} - <article class="h-entry"> - <h1 class="p-name"><a href="{{object.get_absolute_url}}" class="u-url" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">{{object.title|smartypants|widont|safe}}</a></h1> - <div class="img"> - <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img src="{{object.get_image_url}}" alt="{{ object.title }}" width="{{object.image_width}}" height="{{object.image_height}}" class="u-photo post-image" /></a> + <main role="main" id="writing-archive" class="archive"> + <h1 class="hide">{% if region %}Writing from {%if region.name == 'United States'%}the United States{%else%}{{region.name|title|smartypants|safe}}{%endif%}{%else%}Writing Archive {%endif%}</h1>{% autopaginate object_list 24 %} {% for object in object_list %} + <article class="h-entry hentry {% cycle 'odd' 'even' %} {% cycle 'first' 'second' 'third' %}"> + <div class="post--image"> + <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img src="{{object.get_image_url}}" alt="{{ object.title }}" class="u-photo post-image" /></a> </div> - <div class="dateline"> - <p class="h-adr location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">{% if object.country_name == "United States" %}<span class="p-locality">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name" href="/writing/united-states/" title="travel writing from the United States">{{object.location.state.name}}</a>{%else%}<span class="p-locality">{{object.location.name|smartypants|safe}}</span></a>, <a class="p-country-name" href="/writing/{{object.location.state.country.slug}}/" title="travel writing from {{object.location.state.country.name}}">{{object.location.state.country.name}}</a>{%endif%} - <data class="p-latitude" value="{{object.latitude}}"></data> - <data class="p-longitude" value="{{object.longitude}}"></data></p> - <time class="dt-published published updated" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"m/d/y"}}</time> - </div> - <p class="p-summary hyphenate">{{object.dek|safe}}</p> + <h1 class="p-name entry-title post--title"><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></h1> + <p class="p-author author hide">Scott Gilbertson</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> + <span 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}}</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> + </span> – + <span class="p-summary hyphenate"> + {{object.dek|safe}} + </span> + </p> </article> {% endfor %} - </section> - <div id="pagination">{% paginate %} - </div> + </main> + <nav class="pagination"> + {% paginate %} + </nav> {% endblock %} diff --git a/design/templates/base.html b/design/templates/base.html index c3d0b72..5c9ca21 100644 --- a/design/templates/base.html +++ b/design/templates/base.html @@ -15,7 +15,7 @@ title="Luxagraf RSS feed" href="https://luxagraf.net/rss/"> {%block stylesheet%}<link rel="stylesheet" - href="/media/stylesv6.css" + href="/media/screenv8.css" media="screen">{%endblock%} <!--[if IE]> <link rel="stylesheet" @@ -25,22 +25,24 @@ {%block extrahead%}{%endblock%} </head> <body {%block bodyid%}{%endblock%}{%block bodyevents%}{%endblock%}> - <header role="banner"> - <a id="logo" href="/" title="home"> - <h1>Luxagraf</h1> - <h2>{Walk Slowly}</h2> - </a> + <div class="wrapper"> + <div class="header-wrapper"> + <header role="banner"> + <h1><a id="logo" href="/" title="home">Luxagraf</a></h1> + <h2>Walk Slowly</h2> + </header> <nav role="navigation" class="bl"> <ul> - <li id="stories"><a href="/writing/" title="An archive of writings from around the world">Writing</a>,</li> - <li id="photos"><a href="/photos/" title="Photos from travels around the world">Photos</a>,</li> + <li id="stories"><a href="/writing/" title="An archive of writings from around the world">Writing</a></li> + <li id="photos"><a href="/photos/" title="Photos from travels around the world">Photos</a></li> <!--<li id="guides"><a href="/travel-guide/1/" title="Travel Guides, Tips, Tricks and Recommendations">Guides</a>,</li>--> - <li id="maps"><a href="/map/" title="Maps and miscellanea">Map</a>,</li> - <li id="projects" ><a href="/projects/" title="Luxagraf: Projects">Projects</a>,</li> - <li id="etc"><a href="/about/" title="About Luxagraf">Etc</a></li> + <li id="notes"><a href="/notes/" title="Short thoughts, sometimes syndicated to twitter">Notes</a></li> + <li id="maps"><a href="/map/" title="Maps and miscellanea">Map</a></li> + <li id="projects" ><a href="/projects/" title="Luxagraf: Projects">Projects</a></li> + <li id="etc" class="last"><a href="/about/" title="About Luxagraf">Etc</a></li> </ul> </nav> - </header> + </div> {% block primary %}{% endblock %} {% block extrabody %}{% endblock %} <footer role="contentinfo"> 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> diff --git a/design/templates/fluent_comments/templatetags/flat_list.html b/design/templates/fluent_comments/templatetags/flat_list.html new file mode 100644 index 0000000..28c74ab --- /dev/null +++ b/design/templates/fluent_comments/templatetags/flat_list.html @@ -0,0 +1,17 @@ +{% comment %} + + The normal list, spiced up. + This is included via comments/list.html + + The id="comments" is required for JavaScript, + the 'comments/comment.html template is also used by the Ajax view. + +{% endcomment %} +{% if comment_list %} +<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}fluent_comments/css/ajaxcomments.css" /> +<script src="/media/js/jquery-1.8.3.min.js" type="text/javascript"></script> +<script type="text/javascript" src="{{ STATIC_URL }}fluent_comments/js/ajaxcomments.js"></script> +<div id="comments" class="comment--container"> + <h4>Comments</h4> + {% for comment in comment_list %}{% include "comments/comment.html" %}{% endfor %} +</div>{% endif %} |