158 lines
2.9 KiB
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%;
|
||
|
|
}
|
||
|
|
}
|