1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-12 08:05:18 +01:00
blog/_src/_assets/styl/content-photo.styl

87 lines
1.8 KiB
Stylus

//
// kremalicious3
// --------------
// Content - Photo Post
//
.hentry.format-photo
@extend .textcenter
figure
@extend .aligncenter
position: relative
display: inline-block
img,
figcaption
margin-bottom: 0
figcaption
@extend .transition
position: absolute
top: 25%
min-width: 45%
text-align: right
font-family: $headings-font-family
font-weight: $headings-font-weight
font-style: normal
font-size: $font-size-small
padding: ($line-height-computed/3)
background: $link-color
background: alpha($link-color, .7)
color: #fff
text-shadow: 0 1px 0 #000
left: -8%
@media $breakpoint2
left: -16%
opacity: 0
transform: translate(0, -20px)
&:hover figcaption
opacity: 1
transform: translate(0, 0)
.entry-content
text-align: left
margin-top: $line-height-computed
.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
transform: translate(0,0)
top: auto
bottom: 0
background: #000
background: rgba(#000, .4)
.photo-link
display: block
&:active
background: none
//
// Photo background change adjustment
//
.ab-dark
.entry-content
color: $text-color-dimmed
.byline, time, .comments
color: $text-color-light