mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-13 16:45:14 +01:00
Matthias Kretschmann
384b364a63
- switch to rem based typography - switch to rem based spacing - responsive typography through root font size change
179 lines
2.9 KiB
Stylus
179 lines
2.9 KiB
Stylus
//
|
|
// 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
|
|
box-shadow: 0 1px 3px rgba(0,0,0,.2)
|
|
border-radius: 0
|
|
|
|
@media $breakpoint2
|
|
border-radius: $border-radius-base
|
|
|
|
|
|
// 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
|