mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-14 09:05:17 +01:00
231 lines
4.0 KiB
Stylus
231 lines
4.0 KiB
Stylus
//
|
|
// 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%
|