1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-15 17:45:31 +01:00
blog/_src/_assets/styl/_kremalicious/content.styl

192 lines
3.2 KiB
Stylus

//
// kremalicious3
// --------------
// Generic Content
//
// Page Title
/////////////////////////////////////
.page-title
@extend .h2, .heading-band
color: $brand-grey-light
margin-top: -($spacer*2)
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%
&:first-child
padding-top: 0
@media $breakpoint2
padding-top: ($spacer*3)
padding-bottom: ($spacer*3)
.page-single &
border: none
&: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