1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-14 17:15:18 +01:00
blog/_src/assets/less/content-photo.less

75 lines
1.6 KiB
Plaintext
Raw Normal View History

// PHOTO POST
/////////////////////////////////////
.hentry.format-photo {
2014-07-02 15:49:55 +02:00
text-align: center;
figure {
position: relative;
display: inline-block;
margin-left: auto;
margin-right: auto;
img,
figcaption {
margin-bottom: 0;
}
img { max-height: 540px }
figcaption {
position: absolute;
left: 0;
top: 25%;
max-width: 55%;
min-width: 45%;
text-align: right;
font-family: @headings-font-family;
font-weight: @headings-font-weight;
font-style: normal;
font-size: .9em;
padding: @line-height-computed/3;
background: @link-color;
background: fade(@link-color, 70%);
color: #fff;
text-shadow: 0 1px 0 #000;
opacity: 0;
.translate(0,-20px);
.transition;
}
&:hover figcaption {
opacity: 1;
.translate(0,0);
}
}
2014-07-02 15:49:55 +02:00
.entry-content { text-align: left; }
.page-single & {
padding-top: @line-height-computed*2;
padding-bottom: @line-height-computed*3;
@media @breakpoint2 {
padding-top: @line-height-computed*4;
padding-bottom: @line-height-computed*6;
}
figure img { max-height: none }
figcaption {
opacity: 1;
.translate(0,0);
top: auto;
bottom: 0;
background: #000;
background: fade(#000, 40%);
}
}
}
.photo-link {
display: block;
}