blog/_src/_assets/styl/_kremalicious/content-photo.styl

//
// kremalicious3
// --------------
// Content - Photo Post
//

.hentry.format-photo
    @extend .textcenter

    .entry-title
        margin-bottom: 0

    figure
        position: relative
        display: inline-block

        img,
        figcaption
            margin-bottom: 0

        figcaption
            @extend .transition, .h4
            transition-property: transform, opacity
            position: absolute
            min-width: 45%
            text-align: right
            padding: ($spacer/3)
            background: $link-color
            background: alpha($link-color, .7)
            color: #fff
            text-shadow: 0 1px 0 #000

            left: 0
            top: $spacer * 4
            opacity: 0
            transform: translate3d(0, -20px, 0)

        &:hover figcaption
            opacity: 1
            transform: translate3d(0, 0, 0)

    .entry-content
        text-align: left
        margin-top: $spacer

    .page-single &
        padding-top: 0
        padding-bottom: ($spacer*3)

        @media $screen-sm
            padding-top: 0
            padding-bottom: ($spacer*6)

        figure img
            max-height: none


.photo-link
    display: block;

    img
        @extend .media-frame

    &,
    &:hover,
    &:focus,
    &:active
        box-shadow: none

    &:hover,
    &:focus
        img
            border-color: $link-color-hover
            border-radius: $border-radius-base

    &:active
        background: none

//
// EXIF metadata display
//
.exif
    @extend .small, .text-dimmed
    text-align: left
    position: absolute
    bottom: -($spacer * 1.25)
    left: $spacer
    right: $spacer

    .container
        display: flex
        flex-wrap: wrap
        justify-content: space-between

//
// Photo background change adjustment
//
.ab-dark
    .entry-content
        @extend .text-dimmed

    .byline, time, .comments
        color: $text-color-light