1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-16 01:55:18 +01:00
blog/_src/_assets/styl/_kremalicious/content.styl

209 lines
3.3 KiB
Stylus
Raw Normal View History

2014-07-12 02:00:18 +02:00
//
// kremalicious3
// --------------
// Generic Content
//
// Page Title
/////////////////////////////////////
.page-title
@extend .h2, .heading-band
color: $brand-grey-light
2016-05-02 01:34:00 +02:00
margin-top: -($spacer*2)
margin-bottom: $spacer
2014-07-12 02:00:18 +02:00
2015-06-22 21:28:31 +02:00
.hash
@extend .h3
color: darken($page-bg, 15%)
2015-08-09 21:50:06 +02:00
margin-right: 2px
2015-06-22 21:28:31 +02:00
2015-08-10 00:48:31 +02:00
.hentry
2014-07-12 02:00:18 +02:00
@extend .divider-bottom
padding-top: ($spacer*2)
padding-bottom: ($spacer*2)
2015-08-10 00:48:31 +02:00
width: 100%
2014-07-12 02:00:18 +02:00
2016-05-02 01:34:00 +02:00
&:first-child
padding-top: 0
2016-06-09 19:25:01 +02:00
@media $screen-sm
padding-top: ($spacer*3)
padding-bottom: ($spacer*3)
2014-07-12 02:00:18 +02:00
.page-single &
border: none
2014-07-12 21:22:47 +02:00
2014-07-12 02:00:18 +02:00
&:before
@extend .hide
// Post Header
/////////////////////////////////////
.entry-header
.page-single &
@media $screen-md
breakoutviewport()
2014-07-12 02:00:18 +02:00
// Post Title
/////////////////////////////////////
2014-07-12 21:22:47 +02:00
.entry-title
2014-07-12 02:00:18 +02:00
@extend .h1, .textcenter
2014-07-12 21:22:47 +02:00
color: $headings-color
margin-top: 0
margin-bottom: $spacer
2014-07-12 02:00:18 +02:00
2016-10-03 23:36:15 +02:00
a
@extend .link--nounderline
2014-07-12 21:22:47 +02:00
.format-link &
2014-07-12 02:00:18 +02:00
@extend .h3
2014-07-12 21:22:47 +02:00
// Post Lead
/////////////////////////////////////
.entry-lead
@extend .large, .textcenter
color: $brand-grey
line-height: $line-height-large
2015-08-20 20:06:14 +02:00
// Post/photo teaser
/////////////////////////////////////
2015-09-26 22:47:34 +02:00
.hentry__teaser
picture
2016-06-09 19:25:01 +02:00
@extend .breakoutviewport
2015-11-20 18:13:34 +01:00
max-width: none
2015-09-26 22:47:34 +02:00
display: block
2016-06-09 19:25:01 +02:00
margin-top: ($spacer*1.5)
margin-bottom: ($spacer*1.5)
2015-09-26 22:47:34 +02:00
2015-08-20 20:06:14 +02:00
img
@extend .media-frame
2015-08-20 20:06:14 +02:00
border-radius: 0
2016-06-09 19:25:01 +02:00
@media $screen-sm
2015-08-20 20:06:14 +02:00
border-radius: $border-radius-base
.hentry__teaser--link
&:hover,
&:focus
img
border-color: $link-color
2015-08-20 20:06:14 +02:00
2014-07-12 02:00:18 +02:00
// Post Content
/////////////////////////////////////
.entry-content
2014-07-12 21:22:47 +02:00
h1,
2014-07-12 02:00:18 +02:00
h2
@extend .heading-band
h1
@extend .h2
h2
@extend .h3
h3
@extend .h4
2014-07-12 02:00:18 +02:00
2015-09-26 22:47:34 +02:00
img:not(.hentry__teaser img)
margin-bottom: ($spacer/2)
2015-08-19 01:37:29 +02:00
2014-07-12 02:00:18 +02:00
p:last-child
margin-bottom: 0
// Post meta
/////////////////////////////////////
.entry-meta
2016-05-25 23:03:36 +02:00
@extend .small
margin-top: ($spacer*2)
2014-07-12 02:00:18 +02:00
2016-10-03 23:36:15 +02:00
a
@extend .link--nounderline
2014-07-12 02:00:18 +02:00
.byline,
2015-06-10 22:17:56 +02:00
.time,
.tags,
.categories
2014-07-12 02:00:18 +02:00
@extend .textcenter
.byline,
2015-06-10 22:17:56 +02:00
.time
2016-05-25 23:03:36 +02:00
@extend .text-dimmed, .italic
2014-07-12 02:00:18 +02:00
.byline
2014-07-12 21:22:47 +02:00
margin-bottom: 0
2014-07-12 02:00:18 +02:00
.by
display: block
.time
margin-bottom: ($spacer*2)
2014-07-12 02:00:18 +02:00
2016-06-09 19:25:01 +02:00
2015-06-10 22:17:56 +02:00
// Categories & Tags
2015-06-10 22:53:29 +02:00
/////////////////////////////////////
2015-06-10 22:17:56 +02:00
.categories
margin-bottom: ($spacer/2)
2015-06-10 22:17:56 +02:00
.category
2016-10-03 23:36:15 +02:00
@extend .h6, .textcenter, .mini, .link--nounderline
2016-05-25 23:03:36 +02:00
color: $text-color
line-height: 1
text-transform: uppercase
2016-05-25 23:03:36 +02:00
border: 1px solid $text-color
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
2014-07-12 02:00:18 +02:00
2015-06-07 22:53:01 +02:00
.tag
2016-10-03 23:36:15 +02:00
@extend .link--nounderline
2015-06-10 22:53:29 +02:00
color: $text-color
2015-06-07 22:53:01 +02:00
margin-right: 5px
&:before
2016-05-25 23:03:36 +02:00
@extend .text-dimmed
2015-06-07 22:53:01 +02:00
content: '#'
2015-08-20 00:19:58 +02:00
margin-right: 1px
2015-06-07 22:53:01 +02:00
2014-07-12 02:00:18 +02:00
.avatar
width: 80px
height: 80px
border-radius: 80px
border: 2px solid #fff
// Goodies download
/////////////////////////////////////
.goodie-actions
2015-08-19 01:37:29 +02:00
@extend .aligncenter
2014-07-12 02:00:18 +02:00
max-width: 640px
p,
.btn
margin-bottom: 0
.btn
display: block