1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-27 04:10:03 +01:00
blog/_src/_assets/styl/content-featured.styl
Matthias Kretschmann 5def95446e
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:14:22 +02:00

82 lines
1.7 KiB
Stylus

//
// kremalicious3
// --------------
// Content - Featured Posts
//
.featured
@extend .divider-bottom
padding-bottom: ($spacer*2)
.grid
margin-bottom: 0
.grid__col
&:first-child
margin-left: -($spacer)
&:last-child
margin-right: -($spacer)
@media $breakpoint2
padding-bottom: ($spacer*3)
.grid__col
padding-top: 0
&:first-child
margin-left: -($spacer * 2)
&:last-child
margin-right: -($spacer * 2)
@media $breakpoint3
.grid__col
&:first-child
margin-left: -($spacer * 4)
&:last-child
margin-right: -($spacer * 4)
.hentry__teaser
picture
margin: 0
@media $breakpoint1
margin-left: 0
margin-right: 0
.featured-link
display: block
position: relative
&:hover,
&:focus
img
border-color: $link-color
.featured-title
@extend .transition
transition-property: transform, opacity
margin: 0
position: absolute
top: 25%
min-width: 45%
text-align: right
font-family: $headings-font-family
font-weight: $headings-font-weight
font-style: normal
font-size: $font-size-small
padding: ($spacer/3)
background: $link-color
background: alpha($link-color, .85)
color: #fff
text-shadow: 0 1px 0 #000
left: 0
opacity: 0
transform: translate3d(0, -20px, 0)
.featured-link:hover &
opacity: 1
transform: translate3d(0, 0, 0)
img.featured-image
display: block
margin-bottom: 0