improved figcaption design

3 files changed, 13 insertions, 12 deletions

diff --git a/design/sass/_writing_details.scss b/design/sass/_writing_details.scss
index c920735..78947c0 100644
--- a/design/sass/_writing_details.scss
+++ b/design/sass/_writing_details.scss
@@ -5,6 +5,15 @@
 // e.g. header, footnotes, images, page nav, two
 // col and dark page
 // ##############################################
+
+figcaption, figcaption a {
+    line-height: 1.9;
+    padding-left: .5em;
+    text-align: left !important;
+    @include fancy_sans;
+    @include fontsize(12);
+    color: #666;
+}
 .post--header {
     @include constrain_narrow();
     @include breakpoint(beta) {
@@ -27,7 +36,7 @@
     @include smcaps;
     @include fontsize(11);
 }
-.post--article, .notes .h-entry {
+.post--article, .notes .h-entry,  {
     h2, h3 {
         @include constrain_narrow;
         font-family: Helvetica Neue, Helvetica, sans-serif;
@@ -87,14 +96,6 @@
         border-bottom: 1px solid #eae6e6;
         padding-bottom: .5em;
     }
-    figcaption {
-        line-height: 1.9;
-        padding-left: .5em;
-        text-align: left !important;
-        @include fancy_sans;
-        @include fontsize(12);
-        color: #666;
-    }
     cite {
         font-style: italic;
     }
@@ -298,7 +299,7 @@ figure.picwide img.picwide {
 }
 .sans-caption {
     @include generic_sans;
-    small {     
+    small, a {     
         display: block;
         font-size: 64%;
     }
diff --git a/design/templates/lib/img_cluster.html b/design/templates/lib/img_cluster.html
index fd43a17..a16779f 100644
--- a/design/templates/lib/img_cluster.html
+++ b/design/templates/lib/img_cluster.html
@@ -3,6 +3,6 @@
 <figure class="{{cluster_class}}">{%endif%}
     <a href="{%get_image_by_size image "original"%}" title="view larger image">
         <img class="{% if caption or exif %}{%else%}{{cluster_class}}{%endif%} {%if extra%}{{extra}}{%endif%}" {%if cluster_class == "picwide"%} sizes="(max-width: 1280px) 100vw, (min-width: 1281px) 1280px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.name %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}{% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%} src="{% get_image_by_size image size.name%}"{%endif%}{%endfor%}{%else%} src="{% get_image_by_size image cluster_class %}"{%endif%} alt="{%if image.alt %}{{image.alt}}{%else%}{{image.title}}{%endif%} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}" data-jslghtbx="{%get_image_by_size image "original"%}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}></a>
-{% if caption or exif or image.photo_credit_source and cluster_class != "pic5" %}<figcaption>{% endif %}{% if caption %}{{image.caption|safe}}{% endif %}{% if exif %} | <small>Camera: {{image.exif_make}} {{image.exif_model}} with {{image.exif_lens}}</small>{% endif %}{% if image.photo_credit_source %} | image by {% if image.photo_credit_url %}<a href="{{image.photo_credit_url}}">{%endif%}{{image.photo_credit_source}}{% if image.photo_credit_url %}</a>{%endif%}{%endif%}{% if caption or exif or image.photo_credit_source and cluster_class != "pic5" %}</figcaption>
+{% if caption or exif or image.photo_credit_source and cluster_class != "pic5" %}<figcaption>{% endif %}{% if caption %}{{image.caption|safe}}{% endif %}{% if exif %} | <small>Camera: {{image.exif_make}} {{image.exif_model}} with {{image.exif_lens}}</small>{% endif %}{% if image.photo_credit_source %}{%if caption or exif %} | {%endif%}by {% if image.photo_credit_url %}<a href="{{image.photo_credit_url}}">{%endif%}{{image.photo_credit_source}}{% if image.photo_credit_url %}</a>{%endif%}{%endif%}{% if caption or exif or image.photo_credit_source and cluster_class != "pic5" %}</figcaption>
 </figure>
 {% endif %}
diff --git a/design/templates/lib/img_picwide.html b/design/templates/lib/img_picwide.html
index 95a9b7f..52e0936 100644
--- a/design/templates/lib/img_picwide.html
+++ b/design/templates/lib/img_picwide.html
@@ -2,6 +2,6 @@
 {% if caption or exif or image.photo_credit_source %}
 <figure class="picwide">{%endif%}
 <a href="{%get_image_by_size image "original"%} " title="view larger image"><img class="picwide" sizes="(max-width: 1280px) 100vw, (min-width: 1281px) 1280px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.name %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}{% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%} src="{% get_image_by_size image size.name%}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}" data-jslghtbx="{%get_image_by_size image "original"%}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}></a>
-{% if caption or exif or image.photo_credit_source %}<figcaption>{% endif %}{% if caption %}{{image.caption|safe}}{% endif %}{% if exif %} | <small>Camera: {{image.exif_make}} {{image.exif_model}} with {{image.exif_lens}}</small>{% endif %}{% if image.photo_credit_source %} | image by {% if image.photo_credit_url %}<a href="{{image.photo_credit_url}}">{%endif%}{{image.photo_credit_source}}{% if image.photo_credit_url %}</a>{%endif%}{%endif%}{% if caption or exif or image.photo_credit_source %}</figcaption>
+{% if caption or exif or image.photo_credit_source %}<figcaption>{% endif %}{% if caption %}{{image.caption|safe}}{% endif %}{% if exif %} | <small>Camera: {{image.exif_make}} {{image.exif_model}} with {{image.exif_lens}}</small>{% endif %}{% if image.photo_credit_source %}{%if caption or exif %} | {%endif%}image by {% if image.photo_credit_url %}<a href="{{image.photo_credit_url}}">{%endif%}{{image.photo_credit_source}}{% if image.photo_credit_url %}</a>{%endif%}{%endif%}{% if caption or exif or image.photo_credit_source %}</figcaption>
 </figure>
 {% endif %}