blog/_src/_assets/styl/_kremalicious/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)
        margin-left: -($spacer)
        margin-right: -($spacer)

        @media $breakpoint2
            margin-left: -($spacer * 2)
            margin-right: -($spacer * 2)

        @media $breakpoint3
            margin-left: -($spacer * 4)
            margin-right: -($spacer * 4)

    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
first batch of stylus reorg 2014-07-12 02:00:18 +02:00			`//`
			`// kremalicious3`
			`// --------------`
			`// Generic Content`
			`//`


			`// Page Title`
			`/////////////////////////////////////`

			`.page-title`
			`@extend .h2, .heading-band`
			`color: $brand-grey-light`
rem all the things - switch to rem based typography - switch to rem based spacing - responsive typography through root font size change 2016-04-16 19:32:58 +02:00			`margin-top: $spacer`
			`margin-bottom: $spacer`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00
fixes 2015-06-22 21:28:31 +02:00			`.hash`
			`@extend .h3`
			`color: darken($page-bg, 15%)`
new flexbox based grid system 2015-08-09 21:50:06 +02:00			`margin-right: 2px`
fixes 2015-06-22 21:28:31 +02:00
another grid rewrite, now exercise it 2015-08-10 00:48:31 +02:00			`.hentry`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00			`@extend .divider-bottom`
rem all the things - switch to rem based typography - switch to rem based spacing - responsive typography through root font size change 2016-04-16 19:32:58 +02:00			`padding-top: ($spacer*2)`
			`padding-bottom: ($spacer*2)`
another grid rewrite, now exercise it 2015-08-10 00:48:31 +02:00			`width: 100%`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00
MEGA COMMIT, final stylus refactoring 2014-07-12 21:22:47 +02:00			`@media $breakpoint2`
rem all the things - switch to rem based typography - switch to rem based spacing - responsive typography through root font size change 2016-04-16 19:32:58 +02:00			`padding-top: ($spacer*3)`
			`padding-bottom: ($spacer*3)`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00
			`.page-single &`
			`border: none`
fixes, full width teasers 2015-08-20 20:06:14 +02:00			`padding-top: 0`
MEGA COMMIT, final stylus refactoring 2014-07-12 21:22:47 +02:00
first batch of stylus reorg 2014-07-12 02:00:18 +02:00			`&:before`
			`@extend .hide`

			`// Post Title`
			`/////////////////////////////////////`

MEGA COMMIT, final stylus refactoring 2014-07-12 21:22:47 +02:00			`.entry-title`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00			`@extend .h1, .textcenter`
MEGA COMMIT, final stylus refactoring 2014-07-12 21:22:47 +02:00			`color: $headings-color`
			`margin-top: 0`
rem all the things - switch to rem based typography - switch to rem based spacing - responsive typography through root font size change 2016-04-16 19:32:58 +02:00			`margin-bottom: $spacer`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00
MEGA COMMIT, final stylus refactoring 2014-07-12 21:22:47 +02:00			`.format-link &`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00			`@extend .h3`

MEGA COMMIT, final stylus refactoring 2014-07-12 21:22:47 +02:00
fixes, full width teasers 2015-08-20 20:06:14 +02:00			`// Post/photo teaser`
			`/////////////////////////////////////`

fix teaser/photo display 2015-09-26 22:47:34 +02:00			`.hentry__teaser`
			`picture`
featured tweaks 2015-11-20 18:13:34 +01:00			`max-width: none`
fix teaser/photo display 2015-09-26 22:47:34 +02:00			`display: block`
add actions section under each post - comment vi tweet, thanks through bitcoin - add vex modals with custom theme - add bitcoin icon - fix footer layout 2016-04-17 20:01:42 +02:00			`margin: ($spacer*1.5)`
			`margin-left: -($spacer)`
			`margin-right: -($spacer)`
fix teaser/photo display 2015-09-26 22:47:34 +02:00
			`@media $breakpoint2`
add actions section under each post - comment vi tweet, thanks through bitcoin - add vex modals with custom theme - add bitcoin icon - fix footer layout 2016-04-17 20:01:42 +02:00			`margin-left: -($spacer * 2)`
			`margin-right: -($spacer * 2)`

			`@media $breakpoint3`
			`margin-left: -($spacer * 4)`
			`margin-right: -($spacer * 4)`
fix teaser/photo display 2015-09-26 22:47:34 +02:00
fixes, full width teasers 2015-08-20 20:06:14 +02:00			`img`
consistent hpoto link styles, add images to related posts 2016-04-16 20:37:23 +02:00			`@extend .media-frame`
fixes, full width teasers 2015-08-20 20:06:14 +02:00			`border-radius: 0`

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

consistent hpoto link styles, add images to related posts 2016-04-16 20:37:23 +02:00			`.hentry__teaser--link`
			`&:hover,`
			`&:focus`
			`img`
			`border-color: $link-color`
fixes, full width teasers 2015-08-20 20:06:14 +02:00
first batch of stylus reorg 2014-07-12 02:00:18 +02:00			`// Post Content`
			`/////////////////////////////////////`

			`.entry-content`
MEGA COMMIT, final stylus refactoring 2014-07-12 21:22:47 +02:00			`h1,`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00			`h2`
			`@extend .heading-band`

			`h1`
rem all the things - switch to rem based typography - switch to rem based spacing - responsive typography through root font size change 2016-04-16 19:32:58 +02:00			`@extend .h2`
			`h2`
			`@extend .h3`
			`h3`
			`@extend .h4`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00
fix teaser/photo display 2015-09-26 22:47:34 +02:00			`img:not(.hentry__teaser img)`
rem all the things - switch to rem based typography - switch to rem based spacing - responsive typography through root font size change 2016-04-16 19:32:58 +02:00			`margin-bottom: ($spacer/2)`
remove all the clearfixes 2015-08-19 01:37:29 +02:00
first batch of stylus reorg 2014-07-12 02:00:18 +02:00			`p:last-child`
			`margin-bottom: 0`


			`// Post meta`
			`/////////////////////////////////////`

			`.entry-meta`
rem all the things - switch to rem based typography - switch to rem based spacing - responsive typography through root font size change 2016-04-16 19:32:58 +02:00			`margin-top: ($spacer*2)`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00			`font-size: $font-size-small`

			`.byline,`
add categories & tags 2015-06-10 22:17:56 +02:00			`.time,`
			`.tags,`
			`.categories`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00			`@extend .textcenter`

			`.byline,`
add categories & tags 2015-06-10 22:17:56 +02:00			`.time`
MEGA COMMIT, final stylus refactoring 2014-07-12 21:22:47 +02:00			`font-style: italic`
kinda responsive typography 2015-06-10 22:53:29 +02:00			`color: $text-color-dimmed`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00
			`.byline`
MEGA COMMIT, final stylus refactoring 2014-07-12 21:22:47 +02:00			`margin-bottom: 0`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00
			`.by`
			`display: block`

simpler menu js, super smooth menu show/hide 2015-08-19 01:31:58 +02:00			`.time`
rem all the things - switch to rem based typography - switch to rem based spacing - responsive typography through root font size change 2016-04-16 19:32:58 +02:00			`margin-bottom: ($spacer*2)`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00
add categories & tags 2015-06-10 22:17:56 +02:00			`// Categories & Tags`
kinda responsive typography 2015-06-10 22:53:29 +02:00			`/////////////////////////////////////`

add categories & tags 2015-06-10 22:17:56 +02:00			`.categories`
rem all the things - switch to rem based typography - switch to rem based spacing - responsive typography through root font size change 2016-04-16 19:32:58 +02:00			`margin-bottom: ($spacer/2)`
add categories & tags 2015-06-10 22:17:56 +02:00
			`.category`
simpler menu js, super smooth menu show/hide 2015-08-19 01:31:58 +02:00			`@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`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00
show tags under posts 2015-06-07 22:53:01 +02:00			`.tag`
kinda responsive typography 2015-06-10 22:53:29 +02:00			`color: $text-color`
show tags under posts 2015-06-07 22:53:01 +02:00			`margin-right: 5px`

			`&:before`
			`content: '#'`
typography tweaks 2015-08-20 00:19:58 +02:00			`color: $text-color-dimmed`
			`margin-right: 1px`
show tags under posts 2015-06-07 22:53:01 +02:00
first batch of stylus reorg 2014-07-12 02:00:18 +02:00			`.avatar`
			`width: 80px`
			`height: 80px`
			`border-radius: 80px`
			`border: 2px solid #fff`


			`// Goodies download`
			`/////////////////////////////////////`

			`.goodie-actions`
remove all the clearfixes 2015-08-19 01:37:29 +02:00			`@extend .aligncenter`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00			`max-width: 640px`

			`p,`
			`.btn`
			`margin-bottom: 0`

			`.btn`
			`display: block`