src/public/assets/sass/components/_mini-post.scss
///
/// Future Imperfect by Pixelarity
/// pixelarity.com | hello@pixelarity.com
/// License: pixelarity.com/license
///
/* Mini Post */
.mini-post {
@include vendor('display', 'flex');
@include vendor('flex-direction', 'column-reverse');
background: _palette(bg);
border: solid 1px _palette(border);
margin: 0 0 _size(element-margin) 0;
.image {
overflow: hidden;
width: 100%;
img {
@include vendor(
'transition',
'transform #{_duration(transition)} ease-out'
);
width: 100%;
}
&:hover {
img {
@include vendor('transform', 'scale(1.05)');
}
}
}
header {
@include padding(1.25em, 1.25em, (0, 3em, 0, 0));
min-height: 4em;
position: relative;
@include vendor('flex-grow', '1');
h3 {
font-size: 0.8em;
}
.published {
display: block;
font-family: _font(family-heading);
font-size: 0.6em;
font-weight: _font(weight-heading);
letter-spacing: _font(kerning-heading);
margin: -0.625em 0 (_size(element-margin) * 0.85) 0;
text-transform: uppercase;
}
.author {
position: absolute;
right: 2em;
top: 2em;
}
}
}
.mini-posts {
margin: 0 0 _size(element-margin) 0;
@include breakpoint('<=large') {
@include vendor('display', 'flex');
@include vendor('flex-wrap', 'wrap');
width: calc(100% + #{_size(element-margin)});
> * {
margin: _size(element-margin) _size(element-margin) 0 0;
width: calc(50% - #{_size(element-margin)});
}
> :nth-child(-n + 2) {
margin-top: 0;
}
}
@include breakpoint('<=xsmall') {
display: block;
width: 100%;
> * {
margin: 0 0 _size(element-margin) 0;
width: 100%;
}
}
}