From 5bb96d4c2c8b42474953ca29d2422b3be60da25b Mon Sep 17 00:00:00 2001
From: luxagraf <sng@luxagraf.net>
Date: Mon, 9 May 2011 16:22:25 -0400
Subject: updated styles and templates for revamped design

---
 templates/details/about.html           | 25 ++++++-------
 templates/details/code.html            | 15 +++-----
 templates/details/contact.html         | 11 +++---
 templates/details/entry.html           | 64 +++++++---------------------------
 templates/details/national-parks.html  | 21 ++++-------
 templates/details/photo_galleries.html | 16 +++------
 6 files changed, 44 insertions(+), 108 deletions(-)

(limited to 'templates/details')

diff --git a/templates/details/about.html b/templates/details/about.html
index f8b36c8..acbf2a1 100644
--- a/templates/details/about.html
+++ b/templates/details/about.html
@@ -2,12 +2,12 @@
 {% load typogrify %}
 {% block pagetitle %}Luxagraf | About{% endblock %}
 {% block metadescription %}About the site, luxagraf.net {% endblock %}
-
+{%block htmlclass%}class="single"{%endblock%}
 {%block bodyid%}id="about"{%endblock%}								
 				
 {% block primary %}<section id="page-header">
         <h1 class="hide">About Luxagraf</h1>
-        <nav id="page-nav">
+        <nav class="bl" id="page-nav">
             <ul id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                 <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
                 <li>About</li>
@@ -17,23 +17,18 @@
 
     <article role="main">
         <h1 class="hide">About Luxagraf</h1>
-        <section>
-            <div class="content">
+        <div class="post-body-single">
             <p>Luxagraf is written and published by Scott Gilbertson.</p>
-            <p><img src="{{MEDIA_URL}}img/bio.jpg" alt="Scott Gilbertson" /></p>
-            <p><small>Photo by <a href="http://twitter.com/lagsolo" >@lagsolo</a></small></p>
-            </div>
-        </section>
-        <section>
+            <p><img src="{{MEDIA_URL}}img/bio.jpg" alt="Scott Gilbertson" />
+            <small>Photo by <a href="http://twitter.com/lagsolo" title="@lagsolo on Twitter" >@lagsolo</a></small></p>
+        
             <h2>Colophon</h2>
-            <div class="content">
-            <p>Luxagraf is publishing using a custom content management system written with the <a href="http://docs.djangoproject.com/en/dev/ref/contrib/gis/">GeoDjango framework</a>. The site validates as HTML5 and uses @media rules to handle phones, iPads and the like. It should work in any modern web browser. If you have trouble, let me know.</p>
+            <p>Luxagraf is published using a custom content management system written with the <a href="http://docs.djangoproject.com/en/dev/ref/contrib/gis/">GeoDjango framework</a>. The site validates as HTML5 and uses @media rules to handle phones, iPads and the like. It should work in any modern web browser. If you have trouble, let me know.</p>
             
-            <p>I write in long hand because I am an old man and that's we used to roll. I make the clackity noise in BBEdit, the best text editor ever.</p>
+            <p>I write in long hand because I am an old man and that's we roll. I make the clackity noise in BBEdit, the best text editor ever.</p>
             
-            <p>Photos are processed with Adobe Lightroom and Photoshop. The galleries were inspired by the lovely <a href="http://www.pictorymag.com/">Pictory</a> photo showcase. Also note that the photos are licensed under the creative commons so you're free to use them so long as you attribute them to me.</p>
-            </div>
-        </section>  
+            <p>Currently photos are taken with a Panasonic GF1. In the past I have used a Panasonic LX2 and a Canon S45. Minimal processing is done with Adobe Lightroom and Photoshop. The photo gallery layout was inspired by the lovely <a href="http://www.pictorymag.com/" title="Pictory Mag">Pictory</a> photo showcase. Also note that while the writing is copyrighted to me, the photos are licensed under a Creative Commons <a href="http://creativecommons.org/licenses/by-sa/3.0/">attribution, share-alike license</a>, which means you're free to use them so long as you attribute them to me.</p>
+        </div>  
             
             {%comment%}
             <div class="content">{%for object in object_list %}{%if forloop.last %}
diff --git a/templates/details/code.html b/templates/details/code.html
index c603782..a593ae7 100644
--- a/templates/details/code.html
+++ b/templates/details/code.html
@@ -1,11 +1,10 @@
 {% extends 'base.html' %}
 {% load typogrify %}
 {% block pagetitle %}Luxagraf | Projects | Code and Other Experiments {% endblock %}
-{% block metadescription %}{% endblock %}
+{%block htmlclass%}class="single"{%endblock%}
+{% block metadescription %}Browser extentsions to block comments on onlineathens.com{% endblock %}
 {% block extrahead %}
 <style>
-#page-header {margin: 2em 0 0 0;}
-article[role="main"] header {margin-top: 0;}
 article[role="main"] a { color: #b53a04;}
 #ffext, #chrext, #bkmklt { 
     display: block;
@@ -37,8 +36,8 @@ article[role="main"] a { color: #b53a04;}
 {%block bodyid%}id="code"{%endblock%}								
 				
 {% block primary %}<section id="page-header">
-        <h1 class="hide">The National Parks Project</h1>
-        <nav>
+        <h1 class="hide">Code</h1>
+        <nav class="bl">
             <ul id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                 <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr;</li>
                 <li><a href="/projects/" title="luxagraf projects page" itemprop="url"><span itemprop="title">Projects</span></a> &rarr;</li>
@@ -51,13 +50,9 @@ article[role="main"] a { color: #b53a04;}
         <header>
             <h1>{{object.name}}</h1>
         </header> 
-        <div id="post-body"> 
+        <div class="post-body-single"> 
             {{object.body_html|smartypants|widont|safe}}
         </div>
-        <section id="comments">
-            <h4><a class="disqus-link-count" href="{{object.get_absolute_url}}#disqus_thread">Comments</a></h4>
-            <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>
     {% endfor %}
     </article>
     
diff --git a/templates/details/contact.html b/templates/details/contact.html
index d2106b1..5956e51 100644
--- a/templates/details/contact.html
+++ b/templates/details/contact.html
@@ -1,26 +1,26 @@
 {% extends 'base.html' %}
 {% load typogrify %}
-
+{%block htmlclass%}class="single"{%endblock%}
 {% block pagetitle %}Luxagraf: Email{% endblock %}
 {% block metadescription %}{% endblock %}
 {%block bodyid%}id="contact"{%endblock%}
 
 {% block primary %}<section id="page-header">
-        <h1 class="hide">Luxagraf: Email</h1>
-        <nav id="page-nav">
+        <h1 class="hide">Luxagraf: Contact</h1>
+        <nav id="page-nav" class="bl">
             <ul id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                 <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
                 <li>Contact</li>
             </ul>
         </nav>
     </section>
-    <section id="contact"> 
         <article role="main">
             <header>
                 <h1>Contact Information</h1>
             </header>
             <div id="post">
-                <p>I'd love to hear what you think about the posts on luxagraf. Sadly, I suck at email. Or rather I don't have the time to respond the way I would like to, so if you don't hear back from me, or you do but it's five months later and you've entirely forgotten that you even emailed me in the first place, please don't take it personally.</p>
+                <p>I'd love to hear what you think about the posts on luxagraf. If you use Twitter, send me a message: <a href="http://twitter.com/luxagraf" rel="me" title="follow luxagraf on Twitter">@luxagraf</a>.</p>
+                <p>Then there's email. I'm not a big fan. Or rather I don't have the time to respond the way I would like to, which makes me like it less. So if you email me and don't hear back, or you do but it's five months later and you've entirely forgotten that you even emailed me in the first place, please don't take it personally.</p>
                 
                 <p>Please send your thoughts to:</p>
                 <p>
@@ -42,6 +42,5 @@
                 </p>
             </div>
         </article>
-    </section>
 {% endblock %}
 
diff --git a/templates/details/entry.html b/templates/details/entry.html
index c94485d..9454a41 100644
--- a/templates/details/entry.html
+++ b/templates/details/entry.html
@@ -3,12 +3,6 @@
 
 {% block pagetitle %}{{object.title|title|smartypants|safe}} | Luxagraf, a travelogue | {% if object.country_name == "United States" %}{{object.location_name|smartypants|safe}}, {{object.state_name}}{%else%}{{object.location_name|smartypants|safe}}, {{object.country_name}}{%endif%}){% endblock %}
 
-{%block stylesheet%}{%if object.template_name == 2 or object.template_name == 3 %}<link rel="stylesheet" 
-          href="{{MEDIA_URL}}css/dark.css" 
-          type="text/css" 
-          media="screen">{%else%}{{block.super}}{%endif%}{%endblock%}
-
-
 {% block metadescription %}{{object.meta_description|striptags|safe}}{% endblock %}
 {%block extrahead%}
      <link rel="canonical" href="http://luxagraf.net{{object.get_absolute_url}}" />
@@ -17,15 +11,15 @@
      <meta name="geo.placename" content="{% if object.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_iso}}{%if object.state_iso != None %}-{{object.state_iso}}{%endif%}">
 {%endblock%}
-
-{%block bodyid%}class="{%if object.template_name == 0 %}single"{%endif%}{%if object.template_name == 2%}single"{%endif%}{%if object.template_name == 1 %}double"{%endif%}{%if object.template_name == 3 %}double"{%endif%}{%endblock%}
+{%block htmlclass%}{% with object.template_name as t %}
+class="{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%if t == 2 or t == 3 %} dark{%endif%}"{%endwith%}{%endblock%}
 								
 				
 {% block primary %}		
     <article role="main">
         <header>
             <h1>{{object.title|smartypants|widont|safe}}</h1>
-            <aside class="geo">
+            <aside class="geo bl">
                 <span class="location" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/​Geo">{% 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%}
                 <meta itemprop="latitude" content="{{object.latitude}}" />
                 <meta itemprop="longitude" content="{{object.longitude}}" /></span>
@@ -33,44 +27,29 @@
             </aside>
             <time datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
         </header>
-        <div id="post-body">
+        <div class="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|smartypants|widont|safe}}
         </div>{%if object.template_name == 1 %}
         <div class="clearfix"></div>{%endif%}{%if object.template_name == 3 %}<div class="clearfix"></div>{%endif%}
-        {% with object.get_next_published as next %}
-        {% with object.get_previous_published as prev %}
-        <nav id="page-navigation">
-            <table>{% if prev%}
-                <tr>
-                    <td><strong>Previous:</strong></td>
-                    <td><a href="{{ prev.get_absolute_url }}" title="{{prev.title}}">{{prev.title}}</a></td>
-                </tr>{%endif%}
-                <tr>{% if next%}
-                    <td><strong>Next:</strong></td>
-                    <td><a href="{{ next.get_absolute_url }}" title="{{next.title}}">{{next.title}}</a></td>
-                </tr>{%endif%}
-            </table> {%endwith%}{%endwith%}
-        </div>
         {%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 %}
         {% with object.get_next_published as next %}
         {% with object.get_previous_published as prev %}
         <nav id="page-navigation">
-            <ul>{% if next%}
-                <li id="prev"><span>Next:</span> 
-                    <a href="{{ next.get_absolute_url }}" title=" {{next.title}}">{{next.title}}</a>
-                </li>{%endif%}
-                {% if prev%}<li id="next"><span>Previous:</span> 
-                    <a href="{{ prev.get_absolute_url }}" title=" {{prev.title}}">{{prev.title}}</a>
+            <ul>{% if prev%}<li id="next"><span class="bl">Previous:</span> 
+                    <a href="{{ prev.get_absolute_url }}" title=" {{prev.title}}">{{prev.title|safe}}</a>
+                </li>{%endif%}{% if next%}
+                <li id="prev"><span class="bl">Next:</span> 
+                    <a href="{{ next.get_absolute_url }}" title=" {{next.title}}">{{next.title|safe}}</a>
                 </li>{%endif%}
             </ul>
         </nav>{%endwith%}{%endwith%}
-        {% endcomment %}
+        
         {%comment%}
         <section id="comments">
             <h4><a class="disqus-link-count" href="{{object.get_absolute_url}}#disqus_thread">Comments</a></h4>
@@ -80,23 +59,6 @@
     </article>
 {% endblock %}
 {% block js %}
-{%comment%}
-<script type="text/javascript">
-//<![CDATA[
-(function() {
-	var links = document.getElementsByTagName('a');
-	var query = '?';
-	for(var i = 0; i < links.length; i++) {
-	if(links[i].href.indexOf('#disqus_thread') >= 0) {
-		query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
-	}
-	}
-	document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/luxagraf/get_num_replies.js' + query + '"></' + 'script>');
-})();
-//]]>
-</script>
-{%endcomment%}
-{%if object.template_name == 1 or object.template_name == 3 %}
+{% with object.template_name as t %}{%if t == 1 or t == 3 %}
 <script src="{{MEDIA_URL}}js/hyphenate.min.js" type="text/javascript"></script>
-{%endif%}
-{% endblock%}
\ No newline at end of file
+{%endif%}{%endwith%}{%endblock%}
diff --git a/templates/details/national-parks.html b/templates/details/national-parks.html
index 2fefd28..8eaf232 100644
--- a/templates/details/national-parks.html
+++ b/templates/details/national-parks.html
@@ -3,32 +3,25 @@
 {% block pagetitle %}Luxagraf | Projects | National Parks {% endblock %}
 {% block metadescription %}{% endblock %}
 
-{%block stylesheet%}<link rel="stylesheet" 
-          href="{{MEDIA_URL}}css/dark.css" 
-          type="text/css" 
-          media="screen">{%endblock%}
-
-
 
 {%block bodyid%}id="projects-detail"{%endblock%}	
 
-{% block bodyevents %}{% endblock %}
+{% block htmlclass %}class="dark"{% endblock %}
 				
 {% block primary %}<section id="page-header">
         <h1 class="hide">The National Parks Project</h1>
-        <nav>
+        <nav class="bl">
             <ul id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                 <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr;</li>
                 <li><a href="/projects/" title="luxagraf projects page" itemprop="url"><span itemprop="title">Projects</span></a> &rarr;</li>
                 <li>National Parks</li>
             </ul>
         </nav>
-    </section>
-    <section id="parks">{% for object in object_list %}    
-        <article id="park-{{forloop.counter}}">
+    </section>{% for object in object_list %}    
+        <article id="park-{{forloop.counter}}" class="park">
             <h1>{{object.name}}</h1>
             <div class="figure">
-                <img src="{{object.image.url}}" alt="{{object.title}}" width="{{object.image_width}}" height="{{object.image_height}}" />
+                <img src="{{object.image.url}}" alt="{{object.name}}" width="{{object.image_width}}" height="{{object.image_height}}" />
             </div>
             <div class="legend">
                 <h2>{{object.tag_line}}</h2>
@@ -51,9 +44,7 @@
                     <dd>{{object.url|urlize}}</dd>
                 </dl>
             </div>
-        </article>
-        {% endfor %}
-    </section>
+        </article>{% endfor %}
 {% endblock %}
 {% block js %}
     <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.js"></script>
diff --git a/templates/details/photo_galleries.html b/templates/details/photo_galleries.html
index cd73b5f..acdc0e6 100644
--- a/templates/details/photo_galleries.html
+++ b/templates/details/photo_galleries.html
@@ -3,13 +3,7 @@
 {% load number_to_word  %}
 
 {% block pagetitle %}{{object.set_title}} - Luxagraf, Photos{% endblock %}
-
-{%block stylesheet%}
- <link rel="stylesheet" 
-          href="{{MEDIA_URL}}css/dark.css" 
-          type="text/css" 
-          media="screen"> 
-{%endblock%}
+{%block htmlclass%}class="black"{%endblock%}
 
 
 {% block metadescription %}{{object.meta_description|striptags|safe}}{% endblock %}
@@ -18,7 +12,7 @@
 
 {% block primary %}<section id="page-header">
         <h1 class="hide">Photos from {{object.set_title}}</h1>
-        <nav id="page-nav">
+        <nav class="bl" id="page-nav">
             <ul id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                 <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
                 <li><a href="/photos/" title="See all Photos" itemprop="url"><span>Photos</span></a> &rarr;</li> 
@@ -31,7 +25,7 @@
         {%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">&#8734; {{forloop.counter|number_to_word}} &#8734;</a></h6>
-            <div class="fig"><img src="{{photo.get_local_slideshow_url}}" alt="{{photo.title}}" title="{{photo.title}}" height="{{photo.slideshowimage_height}}" width="{{photo.slideshowimage_width}}" style="margin-left:{{photo.slideshowimage_marginleft}}px; " /></div>
+            <div class="fig"><img src="{{photo.get_local_slideshow_url}}" alt="{{photo.title}}" title="{{photo.title}}" {%if photo.is_portait %}class="v"{%endif%} height="{{photo.slideshowimage_height}}" width="{{photo.slideshowimage_width}}" /></div>
             <div class="figcaption">
                 <div class="caption" id="id-{{photo.id}}">
                     <h3>{{photo.title}} &nbsp;&nbsp;<span>{{photo.exif_date|date:"M j, Y"}}</span></h3>
@@ -39,7 +33,7 @@
                     {%if photo.description %}<p>{{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 == None %}Built-in{%endif%}</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 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 == None %}{%endif%}</p>
                     <p>{{photo.exif_exposure}} sec @ {{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>-->
@@ -66,7 +60,7 @@
                  </div>
                 {%endcomment%}
             </div>
-            </article>
+        </article>
         {% endfor %}
     </section>
 {%endblock%}
-- 
cgit v1.2.3-70-g09d2