blog/_src/_assets/styl/content.styl

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


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

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

    @media $breakpoint2
        margin-left: -108%

        .page-photos &
            margin-bottom: ($line-height-computed*4)

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

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

    @media $breakpoint2
        padding-top: ($line-height-computed*4)
        padding-bottom: ($line-height-computed*4)

        .page-index &:first-child
            padding-top: ($line-height-computed*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: $line-height-computed

    .format-link &
        @extend .h3


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

.hentry picture:not(.related-photo picture):not(.masonry picture),
.featured picture
    display: block
    margin-left: -8%
    margin-right: -8%

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

    img
        box-shadow: 0 1px 3px rgba(0,0,0,.2)
        border-radius: 0

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

.featured picture
    @media $breakpoint1
        margin-left: 0
        margin-right: 0
    @media $breakpoint2
        margin-left: 0
        margin-right: 0


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

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

    h1
        font-size: ceil($font-size-base * 2.5)

    img:not(.teaser)
        margin-bottom: ($line-height-computed/2)

    .teaser
        box-shadow: 0 1px 3px rgba(0,0,0,.2)

    p:last-child
        margin-bottom: 0


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

.entry-meta
    margin-top: ($line-height-computed*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: ($line-height-computed*2)

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

.categories
    margin-bottom: ($line-height-computed/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


// Masonry
/////////////////////////////////////

.masonry
    @media $breakpoint2
        width: 100%
        clearfix()

    .hentry
        @media $breakpoint1
            width: 49%
            float: left
            clear: none
            padding-top: 0
            padding-bottom: 0
            margin-bottom: .7em
            margin-top: 0
            margin-left: 0
            margin-right: 1%
            border: none

            &:before
                display: none

            &:nth-child(2n+1)
                margin-right: 0

            &:last-child
                margin-bottom: 3em

.grid-sizer
    width: 100%

    @media screen and (min-width: 480px)
        width: 50%