Rewrote all sass and reconfigured HTML to use more microformats and

clearer class names

1 files changed, 10 insertions, 29 deletions

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">&#8734; {{forloop.counter|number_to_word}} &#8734;</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}} &nbsp;&nbsp;<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>