blog/_src/_assets/styl/content.styl

//
// kremalicious3
// --------------
// Generic Content
//


// Page Title
/////////////////////////////////////

.page-title
    @extend .h2, .heading-band
    color: $brand-grey-light
    margin-top: $spacer
    margin-bottom: $spacer

    .hash
        @extend .h3
        color: darken($page-bg, 15%)
        margin-right: 2px

.hentry
    @extend .divider-bottom
    padding-top: ($spacer*2)
    padding-bottom: ($spacer*2)
    width: 100%

    @media $breakpoint2
        padding-top: ($spacer*3)
        padding-bottom: ($spacer*3)

    .page-single &
        border: none
        padding-top: 0

        &:before
            @extend .hide

// Post Title
/////////////////////////////////////

.entry-title
    @extend .h1, .textcenter
    color: $headings-color
    margin-top: 0
    margin-bottom: $spacer

    .format-link &
        @extend .h3


// Post/photo teaser
/////////////////////////////////////

.hentry__teaser
    picture
        max-width: none
        display: block
        margin: ($spacer*1.5) -8%

        @media $breakpoint2
            margin-left: -16%
            margin-right: -16%

    img
        @extend .media-frame
        border-radius: 0

        @media $breakpoint2
            border-radius: $border-radius-base

.hentry__teaser--link
    &:hover,
    &:focus
        img
            border-color: $link-color

// Post Content
/////////////////////////////////////

.entry-content
    h1,
    h2
        @extend .heading-band

    h1
        @extend .h2
    h2
        @extend .h3
    h3
        @extend .h4

    img:not(.hentry__teaser img)
        margin-bottom: ($spacer/2)

    p:last-child
        margin-bottom: 0


// Post meta
/////////////////////////////////////

.entry-meta
    margin-top: ($spacer*2)
    font-size: $font-size-small

.byline,
.time,
.tags,
.categories
    @extend .textcenter

.byline,
.time
    font-style: italic
    color: $text-color-dimmed

.byline
    margin-bottom: 0

    .by
        display: block

.time
    margin-bottom: ($spacer*2)

// Categories & Tags
/////////////////////////////////////

.categories
    margin-bottom: ($spacer/2)

.category
    @extend .h6, .textcenter
    font-size: $font-size-mini
    line-height: 1
    color: $brand-grey-light
    text-transform: uppercase
    border: 1px solid $text-color-dimmed
    border-radius: $border-radius-base
    padding: 4px 8px
    margin: 0
    display: inline-block

    &:hover,
    &:focus
        color: $link-color
        border-color: $link-color

    &:active
        background: $link-color
        top: 0
        color: #fff

.tag
    color: $text-color
    margin-right: 5px

    &:before
        content: '#'
        color: $text-color-dimmed
        margin-right: 1px

.avatar
    width: 80px
    height: 80px
    border-radius: 80px
    border: 2px solid #fff


// Goodies download
/////////////////////////////////////

.goodie-actions
    @extend .aligncenter
    max-width: 640px

    p,
    .btn
        margin-bottom: 0

    .btn
        display: block