bludit/bl-themes/massively/assets/sass/layout/_main.scss

158 lines
2.9 KiB
SCSS

///
/// Massively by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Main */
#main {
background-color: _palette(bg);
position: relative;
margin: 0 auto;
width: calc(100% - #{_size(padding) * 2});
max-width: _size(wrapper);
z-index: 2;
> * {
@include padding((_size(padding) * 2), (_size(padding) * 2));
border-top: solid 2px _palette(border);
margin: 0;
&:first-child {
border-top: 0;
}
}
> footer {
text-align: center;
}
> .post {
@include padding((_size(padding) * 4), (_size(padding) * 4));
header {
&.major {
> .date {
margin-top: -2rem;
}
> h1, h2 {
font-size: 4rem;
line-height: 1.1;
margin: 0 0 _size(element-margin) 0;
}
}
}
&.featured {
text-align: center;
}
@include breakpoint(large) {
@include padding((_size(padding) * 3), (_size(padding) * 2));
}
@include breakpoint(small) {
@include padding((_size(padding) * 2), (_size(padding) * 1));
header {
&.major {
> .date {
margin-top: -1rem;
margin-bottom: _size(element-margin);
}
> h1, h2 {
font-size: 2.5rem;
line-height: 1.2;
margin: 0 0 (_size(element-margin) * 0.75) 0;
}
}
}
}
}
> .posts {
@include flexgrid((
columns: 2,
gutters: (_size(padding) * 4),
horizontal-align: center,
vertical-align: flex-start,
flush: false
));
width: 100%;
padding: 0;
> article {
border-color: _palette(border);
border-left-width: 2px;
border-style: solid;
border-top-width: 2px;
text-align: center;
> :last-child {
margin-bottom: 0;
}
&:nth-child(2n - 1) {
border-left-width: 0;
}
&:nth-child(-n + 2) {
border-top-width: 0;
}
}
@include breakpoint(medium) {
@include flexgrid-resize((
columns: 2,
gutters: (_size(padding) * 2.5),
flush: false
));
}
@include breakpoint(small) {
@include flexgrid-resize((
columns: 1,
gutters: (_size(padding) * 2),
prev-columns: 2,
flush: false
));
> article {
&:nth-child(2n - 1) {
border-left-width: 2px;
}
&:nth-child(-n + 2) {
border-top-width: 2px;
}
&:nth-child(n) {
border-left-width: 0;
}
&:nth-child(-n + 1) {
border-top-width: 0;
}
.image {
max-width: 25rem;
margin-left: auto;
margin-right: auto;
}
}
}
}
@include breakpoint(small) {
> * {
@include padding((_size(padding) * 1), (_size(padding) * 1));
}
}
@include breakpoint(xsmall) {
width: 100%;
}
}