Correct image credit link display bug. Fixes #13

This commit is contained in:
Michael Rose 2014-02-26 11:25:00 -05:00
parent a6a884ccbd
commit 75e72ebc6a
7 changed files with 41 additions and 83 deletions

View File

@ -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 %}

View File

@ -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 }}">
{% 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 -->
{% endif %}
<div class="header-title">

View File

@ -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 %}

View File

@ -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;

File diff suppressed because one or more lines are too long

View File

@ -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;

View File

@ -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 {