You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
1.8 KiB
SCSS
115 lines
1.8 KiB
SCSS
///
|
|
/// Hypothesis by Pixelarity
|
|
/// pixelarity.com | hello@pixelarity.com
|
|
/// License: pixelarity.com/license
|
|
///
|
|
|
|
/* Posts */
|
|
|
|
.posts {
|
|
$padding: _size(padding, default);
|
|
|
|
@include flexgrid((
|
|
columns: 3,
|
|
gutters: ($padding * 0.5)
|
|
));
|
|
margin: 0 0 _size(element-margin) 0;
|
|
|
|
> div {
|
|
> article {
|
|
background-color: _palette(bg);
|
|
margin: 0 0 ($padding * 0.5) 0;
|
|
|
|
> .image {
|
|
width: 100%;
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
> .content {
|
|
@include padding(2rem, 2rem);
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include breakpoint(large) {
|
|
$padding: _size(padding, large);
|
|
|
|
@include flexgrid((
|
|
columns: 3,
|
|
gutters: ($padding * 0.5),
|
|
prev-columns: 3
|
|
));
|
|
|
|
> div {
|
|
> article {
|
|
margin: 0 0 ($padding * 0.5) 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include breakpoint(medium) {
|
|
$padding: _size(padding, medium);
|
|
|
|
@include flexgrid((
|
|
columns: 1,
|
|
gutters: ($padding * 0.5),
|
|
prev-columns: 3
|
|
));
|
|
text-align: center;
|
|
|
|
> div {
|
|
> article {
|
|
margin: 0 auto ($padding * 0.5) auto;
|
|
max-width: 30rem;
|
|
|
|
&:last-child {
|
|
margin-bottom: ($padding * 0.5);
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
> article {
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include breakpoint(small) {
|
|
$padding: _size(padding, small);
|
|
|
|
@include flexgrid((
|
|
columns: 1,
|
|
gutters: ($padding * 0.5),
|
|
prev-columns: 3
|
|
));
|
|
|
|
> div {
|
|
> article {
|
|
margin: 0 auto ($padding * 0.5) auto;
|
|
max-width: 22rem;
|
|
|
|
&:last-child {
|
|
margin-bottom: ($padding * 0.5);
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
> article {
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |