fixed display, added author tags and an h-card to the footer

9 files changed, 100 insertions, 49 deletions

diff --git a/app/notes/build.py b/app/notes/build.py
index 09612dc..884c114 100644
--- a/app/notes/build.py
+++ b/app/notes/build.py
@@ -9,7 +9,7 @@ class BuildNotes(Build):
         self.build_detail_pages()
 
     def queryset(self):
-        return self.get_model().objects.all().order_by('date_created')
+        return self.get_model().objects.all().order_by('-date_created')
 
     def get_model(self):
         return get_model('notes', 'note')
@@ -19,7 +19,7 @@ class BuildNotes(Build):
         Grab all the notes, render them to a template string and write that out to the filesystem
         '''
         for entry in self.queryset():
-            c = Context({'object': entry, 'MEDIA_URL': settings.BAKED_MEDIA_URL, 'IMAGES_URL': settings.BAKED_IMAGES_URL})
+            c = Context({'object': entry, 'MEDIA_URL': settings.BAKED_MEDIA_URL, 'IMAGES_URL': settings.BAKED_IMAGES_URL, 'SITE_URL':settings.SITE_URL})
             t = render_to_string('details/note.html', c).encode('utf-8')
             path = 'notes/%s/' % (entry.date_created.strftime("%Y/%m").lower())
             self.write_file(path, t, 'html', entry.slug)
diff --git a/app/notes/views.py b/app/notes/views.py
index 2542293..e89087e 100644
--- a/app/notes/views.py
+++ b/app/notes/views.py
@@ -16,9 +16,9 @@ def entry_detail(request, year, month, slug):
 
 def date_list(request, year, month=None):
     if month:
-        qs = Note.objects.filter(date_created__year=year, date_created__month=month)
+        qs = Note.objects.filter(date_created__year=year, date_created__month=month).order_by('-date_created')
     else:
-        qs = Note.objects.filter(date_created__year=year)
+        qs = Note.objects.filter(date_created__year=year).order_by('-date_created')
     context = {
         'year': year,
         'month': month,
diff --git a/config/settings.py b/config/settings.py
index a7d51e2..7f204b8 100644
--- a/config/settings.py
+++ b/config/settings.py
@@ -25,7 +25,7 @@ DATABASES = {
 TIME_ZONE = 'America/New_York'
 LANGUAGE_CODE = 'en-us'
 SITE_ID = 1
-SITE_URL = 'http://luxagraf.net/'
+SITE_URL = 'https://luxagraf.net/'
 USE_I18N = False
 USE_L10N = True
 USE_TZ = False
diff --git a/design/sass/_480.sass b/design/sass/_480.sass
index 5bef89e..3d426ca 100644
--- a/design/sass/_480.sass
+++ b/design/sass/_480.sass
@@ -204,39 +204,53 @@ article[role="main"]
 
 //****************  Notes Structure ************************
 
+.notes main 
+    margin-top: 3em
 .notes .h-entry
     border: none
     padding: 0
     margin-top: 3em
     &:after
+        display: block
+        content: ""
         margin-top: 3em
         height: 1px
-        visibility: visible
-        background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0))
-    &:last-child:after
-        background: none
+        width: 100%
+        background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0))
+        background: -moz-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0))
+    //&:last-child:after
+    //    background: none
 
 .notes .e-content
     a
         color: $orange
-.notes .u-url
+.notes time 
     font-family: sans-serif
-.notes .twitter
+.notes .note--twitter
     font-size: .75em
-    a:after
+    action a:after, a:first-child:after
         content: "\2219"
         margin-left: .25em
         padding-right: .35em
         padding-left: .35em
-    a:last-child:after
+    action:last-child a:after
         content: ""
+        padding-right: 0
+        padding-left: 0
+        margin-left: 0
+        
+.notes--location
+    text-align: left
+.month--divider
+    margin-top: 2em
 .month--header
     font-size: .75em
     margin: 0
     letter-spacing: 1px
     text-transform: uppercase
     border-bottom: 1px dotted rgba(0,0,0,0.2)
-    
+.permalink .h-entry:after
+    background: none 
 //*******************  Footer **********************
 
 
diff --git a/design/sass/_768.sass b/design/sass/_768.sass
index f9ff3f1..9c4f8b8 100644
--- a/design/sass/_768.sass
+++ b/design/sass/_768.sass
@@ -211,20 +211,27 @@
             width: 100%
         main
             max-width: 600px
-            margin: 0 auto
+            margin-left: auto
+            margin-right: auto
+            margin-bottom: 5em
         article footer
             margin-top: 1em
         article p
             float: none
-        .twitter
+        .note--location
+            float: left
+        .note--date
+            float: right 
+        .note--twitter
+            clear: both
             float: right
             padding-top: 1em
+        time
+            display: inline
+            float: right
     .permalink
         main
             margin-top: 5em
-        #license
-            text-align: center
-            float: none
             
     //map
     #map-canvas
diff --git a/design/templates/archives/notes.html b/design/templates/archives/notes.html
index 9eb55f3..b39dab3 100644
--- a/design/templates/archives/notes.html
+++ b/design/templates/archives/notes.html
@@ -3,7 +3,7 @@
 {% load html5_datetime %}
 {% block pagetitle %} Notes | luxagraf {% endblock %}
 {% block metadescription %} The LongHandPixels Blog Archive, covering HTML, CSS and other web nerdery.{% endblock %}
-{%block bodyid%}class="archive notes" id="notes-archive"{%endblock%}
+{%block bodyid%}class="notes" id="notes-archive"{%endblock%}
 
 {% block primary %}
     <ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
@@ -17,24 +17,35 @@
             <div class="p-name e-content">
             {{object.link_twitter_names|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>
-                <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>
-                </p>{% if object.twitter_id %}
-                <p class="h-adr meta location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">
+                <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>
+                </p>{% if object.location %}
+                <p class="p-location 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.location %}
-                <p class="meta twitter">
-                    View on <a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">Twitter</a>
+                    </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}}">
                     <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>
-                </p>{% endif %}
+                </action>
+                    </p>{% endif %}
             </footer>
+
         </article>
 {% endfor %}
         </main>
diff --git a/design/templates/archives/notes_date.html b/design/templates/archives/notes_date.html
index aabd996..ac38af0 100644
--- a/design/templates/archives/notes_date.html
+++ b/design/templates/archives/notes_date.html
@@ -3,7 +3,7 @@
 {% load html5_datetime %}
 {% load month_number_to_name %}
 {% block pagetitle %} Notes Published in  {% if month %}{{month|month_number_to_name}}{%endif%} {{year}} | luxagraf{% endblock %}
-{% block bodyid %}class="archive notes" id="archive-{% if month %}{{month|month_number_to_name}}{%endif%}{{year}}"{%endblock%}
+{% block bodyid %}class="notes" id="archive-{% if month %}{{month|month_number_to_name}}{%endif%}{{year}}"{%endblock%}
 {% block primary %}<ul class="bl crumbs" 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="/notes/" itemprop="url"><span itemprop="title">Notes</span></a> &rarr;</li>
@@ -14,31 +14,41 @@
         <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">
-            {{object.link_twitter_names|safe|urlizetrunc:45|amp|smartypants }}
+            {{object.link_twitter_names|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>
-                 <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>
+                <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>
                 </p>{% if object.location %}
-                <p class="h-adr meta location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">
+                <p class="p-location 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">
+                    </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}}">
                     <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 %}
             </footer>
         </article>
         {% endfor %}
     {% else %}
 {% regroup object_list by date_created.month as entries_by_month %}{% for month in entries_by_month %}
-    <section>
+    <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">
@@ -48,7 +58,7 @@
                 <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>
                 </p>{% if object.location %}
-                <p class="h-adr meta location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">
+                <p class="p-location meta 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>
@@ -66,8 +76,6 @@
                  {% endfor %}
              </section>
         {% endfor %}
-    </ul>
     {% endif %}
-                
-    </section>
+    </main>
 {% endblock%}
diff --git a/design/templates/base.html b/design/templates/base.html
index 98be112..c3d0b72 100644
--- a/design/templates/base.html
+++ b/design/templates/base.html
@@ -53,7 +53,8 @@
             </ul>
         </nav>
         <p id="license">
-            &copy; 2003-{% now "Y" %} Scott Gilbertson, except photos, which are licensed under the Creative Commons (<a href="http://creativecommons.org/licenses/by-sa/3.0/" title="read the Attribution-Share Alike 3.0 deed">details</a>).
+            &copy; 2003-{% now "Y" %} 
+            <span class="h-card"><a class="p-name u-url" href="https://luxagraf.net/">Scott Gilbertson</a><data class="p-nickname" value="luxagraf"></data><data class="p-locality" value="Athens"></data><data class="p-region" value="Georgia"></data><data class="p-country-name" value="United States"></data></span>, except photos, which are licensed under the Creative Commons (<a href="http://creativecommons.org/licenses/by-sa/3.0/" title="read the Attribution-Share Alike 3.0 deed">details</a>).
         </p>
     </footer>
     {% block js %}{% endblock%}
diff --git a/design/templates/details/note.html b/design/templates/details/note.html
index f0d5cb0..0a0d3d9 100644
--- a/design/templates/details/note.html
+++ b/design/templates/details/note.html
@@ -12,7 +12,7 @@
      <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="archive 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 %}		
@@ -21,22 +21,32 @@
             <div class="p-name e-content">
             {{object.link_twitter_names|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>
-                <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>
+                <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>
                 </p>{% if object.location %}
-                <p class="h-adr meta location bl" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">
+                <p class="p-location 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">
-                    <a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">Twitter</a>
+                <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}}">
                     <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 %}
             </footer>
 
@@ -44,10 +54,10 @@
         {% with object.get_previous_published as prev %}
         <nav id="page-navigation">
             <ul>{% if prev%}
-                <li id="next"><span class="bl">Previous:</span> 
+                <li rel="previous" id="next"><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 rel="next" id="prev"><span class="bl">Next:</span> 
                     <a href="{{ next.get_absolute_url }}" rel="next" title=" {{next.title}}">{{next.title|safe}}</a>
                 </li>{%endif%}
             </ul>