improved html structure and tweaked stylesheet accordingly

3 files changed, 96 insertions, 111 deletions

diff --git a/templates/details/about.html b/templates/details/about.html
index 0c62d4d..7a25c0e 100644
--- a/templates/details/about.html
+++ b/templates/details/about.html
@@ -5,33 +5,35 @@
 
 {%block bodyid%}id="about"{%endblock%}								
 				
-{% block primary %}
-<article>
-    <ul id="breadcrumbs">
-        <li><a href="/" title="luxagraf homepage">Home</a> &rarr;</li>
-        <li>About</li>
-    </ul>
-    
-    <section>
-        <div class="image"><img src="{{IMAGES_URL}}bio.jpg" alt="me" /></div>
-        <div class="content">
-            {{top.content|smartypants|safe}}
-        </div>
+{% block primary %}<section id="page-header">
+        <nav id="page-nav">
+            <ul id="breadcrumbs">
+                <li><a href="/" title="luxagraf homepage">Home</a> &rarr;</li>
+                <li>About</li>
+            </ul>
+        </nav>
     </section>
+    <article>
+        <h1 class="hide">About Luxagraf</h1>
+        <section>
+            <div class="image"><img src="{{IMAGES_URL}}bio.jpg" alt="me" /></div>
+            <div class="content">
+                {{top.content|smartypants|safe}}
+            </div>
+        </section>
     <div class="clearfix"></div>
-    <section>
-        <div class="image"><img src="{{IMAGES_URL}}site.jpg" alt="me" /></div>
-        <div class="content">
-            {{middle.content|smartypants|safe}}
-        </div>
-    </section>
+        <section>
+            <div class="image"><img src="{{IMAGES_URL}}site.jpg" alt="me" /></div>
+            <div class="content">
+                {{middle.content|smartypants|safe}}
+            </div>
+        </section>
     <div class="clearfix"></div>
-    <section>
-        <div class="image"><img src="{{IMAGES_URL}}colo.jpg" alt="me" /></div>
-        <div class="content">
-            {{bottom.content|smartypants|safe}}
-        </div>
-    </section>
-
-</article>
+        <section>
+            <div class="image"><img src="{{IMAGES_URL}}colo.jpg" alt="me" /></div>
+            <div class="content">
+                {{bottom.content|smartypants|safe}}
+            </div>
+        </section>
+    </article>
 {% endblock %}
diff --git a/templates/details/entry.html b/templates/details/entry.html
index 0f0bca5..cea00b1 100644
--- a/templates/details/entry.html
+++ b/templates/details/entry.html
@@ -27,42 +27,35 @@
 				
 {% block primary %}		
     <article id="writing-detail">
-            <header>
-                <h1>{{object.title|smartypants|widont|safe}}</h1>
-                <aside class="meta">
-                    <section class="geo">{% if object.location.state.country.name == "United States" %}{{object.location.name|smartypants|safe}}, <a href="/writing/united-states/1/" title="travel writing from the United States">{{object.location.state.name}}</a>{%else%}{{object.location.name|smartypants|safe}}, <a href="/writing/{{object.location.state.country.slug}}/1/" title="travel writing from {{object.location.state.country.name}}">{{object.location.state.country.name}}</a>{%endif%} <span class="latitude hide">{{object.latitude}}</span> <span class="longitude hide">{{object.longitude}}</span>{%comment%} &nbsp;&nbsp;(<a href="" title="">Map</a>, <a href="" title="">Photos</a>){%endcomment%}</section>
-                    
-                    
-                    {%comment%}<span class="topics">Topics: {%for topic in object.topics.all%}<a href="{{topic.get_absolute_url}}" title="view more {{topic.name}} posts">{{topic.name}}</a>{%if forloop.last%}{%else%}, {%endif%}{% endfor %}</span>{%endcomment%}
-
-                </aside>
-            </header>
-            <div id="post-body">
-                {{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%}
-            <section id="post-metadata">
-                <h4 class="hide">About {{object.title|smartypants|safe}}</h4>
-                <p>Posted <time datetime="{{object.pub_date}}">{{object.pub_date|date:"F j, Y"}}</time>, from {{object.location.name|smartypants|safe}}, {%if object.location.state.country.name == 'United States'%}<a href="/map/#{{object.location.state.country.slug}}" title="see other entries from {{object.location.state.name}}">{{object.location.state.name|smartypants|safe}}</a>{% else %}<a href="/map/#{{object.location.state.country.slug}}" title="view all entries from {{object.location.state.country.name}}">{{object.location.state.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>
-            </section>
-            <section id="page-navigation">
-                <nav>
-                    <ul>{% if object.get_next_published%}
-                        <li id="prev">
-                            <a href="{{ object.get_next_published.get_absolute_url }}" title=" {{object.get_next_published.title}}">&larr; newer</a>
-                        </li>{%endif%}
-                        {% if object.get_previous_published%}<li id="next">
-                            <a href="{{ object.get_previous_published.get_absolute_url }}" title=" {{object.get_previous_published.title}}">older &rarr;</a>
-                        </li>{%endif%}
-                    </ul>
-                </nav>
-            </section>
-            <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>
+        <header>
+            <h1>{{object.title|smartypants|widont|safe}}</h1>
+            <aside class="meta">
+                <section class="geo">{%spaceless%}{% if object.location.state.country.name == "United States" %}{{object.location.name|smartypants|safe}}, <a href="/writing/united-states/1/" title="travel writing from the United States">{{object.location.state.name}}</a>{%else%}{{object.location.name|smartypants|safe}}, <a href="/writing/{{object.location.state.country.slug}}/1/" title="travel writing from {{object.location.state.country.name}}">{{object.location.state.country.name}}</a>{%endif%} <span class="latitude hide">{{object.latitude}}</span> <span class="longitude hide">{{object.longitude}}</span>{%comment%} &nbsp;&nbsp;(<a href="" title="">Map</a>, <a href="" title="">Photos</a>){%endcomment%}{%endspaceless%}</section>
+            </aside>
+        </header>
+        <div id="post-body">
+            {{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%}
+        <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 {{object.location.name|smartypants|safe}}, {%if object.location.state.country.name == 'United States'%}<a href="/map/#{{object.location.state.country.slug}}" title="see other entries from {{object.location.state.name}}">{{object.location.state.name|smartypants|safe}}</a>{% else %}<a href="/map/#{{object.location.state.country.slug}}" title="view all entries from {{object.location.state.country.name}}">{{object.location.state.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>
+        <nav id="page-navigation">
+            <ul>{% if object.get_next_published%}
+                <li id="prev">
+                    <a href="{{ object.get_next_published.get_absolute_url }}" title=" {{object.get_next_published.title}}">&larr; newer</a>
+                </li>{%endif%}
+                {% if object.get_previous_published%}<li id="next">
+                    <a href="{{ object.get_previous_published.get_absolute_url }}" title=" {{object.get_previous_published.title}}">older &rarr;</a>
+                </li>{%endif%}
+            </ul>
+        </nav>
+        <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>
     </article>
 {% endblock %}
 {% block js %}
diff --git a/templates/details/national-parks.html b/templates/details/national-parks.html
index c6099a8..63a2d8e 100644
--- a/templates/details/national-parks.html
+++ b/templates/details/national-parks.html
@@ -3,10 +3,8 @@
 {% block pagetitle %}Luxagraf | Projects | National Parks {% endblock %}
 {% block metadescription %}{% endblock %}
 
-{% block extrahead %}
-<link rel="stylesheet" 
+{% block extrahead %}<link rel="stylesheet" 
           href="{{MEDIA_URL}}css/dark.css" 
-          type="text/css" 
           media="screen">
 
 {% endblock %}
@@ -16,59 +14,51 @@
 
 {% block bodyevents %}{% endblock %}
 				
-{% block primary %}
-<article>
-    <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>
-    
-    <ul id="parks"> 
-        {% for object in object_list %}
-        <li id="park-{{forloop.counter}}">
+{% block primary %}<section id="page-header">
+        <h1 class="hide">The National Parks Project</h1>
+        <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="/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}}">
             <div class="figure">
                 <img src="{{object.image.url}}" alt="{{object.title}}" />
             </div>
-            <h4>{{object.name}}</h4>
+            <h1>{{object.name}}</h1>
             <div class="legend">
-                    <h5>{{object.tag_line}}</h5>
-                    
-                    <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" title="{{object.mpoly.centroid.y}},{{object.mpoly.centroid.x}},{{object.zoom}},{{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>
-                
-                
+                <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" title="{{object.mpoly.centroid.y}},{{object.mpoly.centroid.x}},{{object.zoom}},{{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>
-            
-        </li>
+        </article>
         {% endfor %}
-    </ul>
-
-</article>
-
+    </section>
 {% endblock %}
-
 {% block js %}
-<script type="text/javascript" src="{{MEDIA_URL}}js/jquery.js"></script>
-<script type="text/javascript" src="{{MEDIA_URL}}js/underscore-min.js"></script>
-<script type="text/javascript" src="{{MEDIA_URL}}js/natparks.js" ></script>
-<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
+    <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.js"></script>
+    <script type="text/javascript" src="{{MEDIA_URL}}js/underscore-min.js"></script>
+    <script type="text/javascript" src="{{MEDIA_URL}}js/natparks.js" ></script>
+    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 
 {% endblock %}
\ No newline at end of file