Correct image credit link display bug. Fixes #13

_layouts/page.html

@@ -14,8 +14,9 @@
 
 {% if page.image.feature %}
 <div class="entry-header">
-  <div class="entry-image"><img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }}">
+  {% if page.image.credit %}<div class="image-credit">Image source: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></div><!-- /.image-credit -->{% endif %}
-    {% if page.image.credit %}<div class="image-credit">Image source: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></div><!-- /.image-credit -->{% endif %}
+  <div class="entry-image">
+    <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }}">
   </div><!-- /.entry-image -->
 </div><!-- /.entry-header -->
 {% endif %}

_layouts/post-index.html

@@ -13,9 +13,10 @@
 {% include navigation.html %}
 
 <div class="entry-header">
+  {% if page.image.credit %}<div class="image-credit">Image source: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></div><!-- /.image-credit -->{% endif %}
   {% if page.image.feature %}
-    <div class="entry-image"><img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }}">
+    <div class="entry-image">
-      {% if page.image.credit %}<div class="image-credit">Image source: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></div><!-- /.image-credit -->{% endif %}
+      <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }}">
     </div><!-- /.entry-image -->
   {% endif %}
   <div class="header-title">

_layouts/post.html

@@ -14,8 +14,9 @@
 
 {% if page.image.feature %}
 <div class="entry-header">
-  <div class="entry-image"><img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }}">
+  {% if page.image.credit %}<div class="image-credit">Image source: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></div><!-- /.image-credit -->{% endif %}
-    {% if page.image.credit %}<div class="image-credit">Image source: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></div><!-- /.image-credit -->{% endif %}
+  <div class="entry-image">
+    <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }}">
   </div><!-- /.entry-image -->
 </div><!-- /.entry-header -->
 {% endif %}

assets/css/main.css

@@ -332,50 +332,6 @@ figcaption {
   color: #3c3c3c;
 }
 
-.image-credit {
-  max-width: 440px;
-  padding-top: 5px;
-  padding-right: 20px;
-  padding-left: 20px;
-  margin: 0 auto;
-  font-size: 14px;
-  font-size: 0.875rem;
-  line-height: 1.8571;
-  line-height: 1.3;
-  color: #6f6f6f;
-  text-align: right;
-  *zoom: 1;
-}
-
-.image-credit:before,
-.image-credit:after {
-  display: table;
-  line-height: 0;
-  content: "";
-}
-
-.image-credit:after {
-  clear: both;
-}
-
-@media only screen and (min-width: 48em) {
-  .image-credit {
-    max-width: 760px;
-    padding-right: 60px;
-    padding-left: 60px;
-  }
-}
-
-@media only screen and (min-width: 62.5em) {
-  .image-credit {
-    max-width: 960px;
-  }
-}
-
-.image-credit a {
-  color: #6f6f6f;
-}
-
 .notice {
   padding: .5em 1em;
   margin-top: 1.5em;
@@ -3833,6 +3789,7 @@ body {
 }
 
 .entry-header {
+  position: relative;
   width: 100%;
   overflow: hidden;
 }
@@ -3884,7 +3841,7 @@ body {
   top: 0;
   display: table;
   width: 100%;
-  height: 440px;
+  height: 400px;
   margin-top: 0;
   overflow: hidden;
 }
@@ -3930,7 +3887,7 @@ body {
   left: -50%;
   width: 200%;
   height: 200%;
-  min-height: 440px;
+  min-height: 400px;
   overflow: hidden;
 }
 
@@ -3960,7 +3917,9 @@ body {
   right: 0;
   bottom: 0;
   z-index: 10;
+  max-width: 440px;
   padding: 10px 15px;
+  margin: 0 auto;
   font-size: 12px;
   font-size: 0.75rem;
   color: #ffffff;
@@ -3983,6 +3942,18 @@ body {
           background-clip: padding-box;
 }
 
+@media only screen and (min-width: 48em) {
+  .image-credit {
+    max-width: 760px;
+  }
+}
+
+@media only screen and (min-width: 62.5em) {
+  .image-credit {
+    max-width: 960px;
+  }
+}
+
 .image-credit a {
   color: #ffffff;
   text-decoration: none;

assets/less/page.less

@@ -28,6 +28,7 @@ body {
 .entry-header {
 	width: 100%;
 	overflow: hidden;
+	position: relative;
 }
 .header-title {
 	text-align: center;
@@ -60,7 +61,7 @@ body {
 	display: table;
 	margin-top: 0;
 	width: 100%;
-	height: 440px;
+	height: 400px;
 	overflow: hidden;
 	.header-title-wrap {
 		display: table-cell;
@@ -97,7 +98,7 @@ body {
 	left: -50%; 
 	width: 200%; 
 	height: 200%;
-	min-height: 440px;
+	min-height: 400px;
 	overflow: hidden;
 	&:after {
 		content: '';
@@ -119,17 +120,26 @@ body {
 		min-height: 50%;
 	}
 }
+// Feature Image Caption
 .image-credit {
 	position: absolute;
 	bottom: 0;
 	right: 0;
+	margin: 0 auto;
+	max-width: 440px;
 	padding: 10px 15px;
-	color: @white;
 	background-color: fade(@base-color,50);
+	color: @white;
 	.font-rem(12);
 	text-align: right;
 	.border-radius(3px,0,0,3px);
 	z-index: 10;
+	@media @medium {
+		max-width: 760px;
+	}
+	@media @large {
+		max-width: 960px;
+	}
 	a {
 		color: @white;
 		text-decoration: none;

assets/less/typography.less

@@ -50,32 +50,6 @@ figcaption {
 	color: lighten(@text-color, 10);
 }
 
-// Feature Image Caption
-// --------------------------------------------------
-.image-credit {
-	margin: 0 auto;
-	max-width: 440px;
-	padding-top: 5px;
-	padding-right: 20px;
-	padding-left: 20px;
-	text-align: right;
-	.font(14);
-	line-height: 1.3;
-	color: lighten(@text-color, 30);
-	.clearfix();
-	@media @medium {
-		max-width: 760px;
-		padding-right: 60px;
-		padding-left: 60px;
-	}
-	@media @large {
-		max-width: 960px;
-	}
-	a {
-		color: lighten(@text-color, 30);
-	}
-}
-
 // Note text
 // --------------------------------------------------
 .notice {