Rewrote all sass and reconfigured HTML to use more microformats and

clearer class names

6 files changed, 103 insertions, 74 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> &rarr;</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> &rarr;</li>
        <li>the United States</li>{%else%}<li><a href="/photos/" title="See all Photos" itemprop="url"><span itemprop="title">Photos</span></a> &rarr;</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> &rarr; </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 &ndash; that thing you get maybe 76 or so years of, if you're lucky &ndash; 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&nbsp;&raquo;</a></span>-->
-        </article> {% endfor %}
-    </section>
+            <p class="projects--button"><a href="{{project.get_absolute_url}}">View&nbsp;Project&nbsp;&#8674;</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> &rarr;</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> &ndash;
+                <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 %}