72 lines
1.0 KiB
SCSS
72 lines
1.0 KiB
SCSS
body {
|
|
min-width: 300px;
|
|
}
|
|
|
|
header {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
footer {
|
|
margin: 0;
|
|
padding: 0 $gutter;
|
|
}
|
|
|
|
main {
|
|
margin: 0 $gutter;
|
|
padding: 0;
|
|
}
|
|
|
|
section {
|
|
margin: ($gutter * 2) 0;
|
|
|
|
&:nth-of-type(even) {
|
|
margin-right: -$gutter;
|
|
margin-left: -$gutter;
|
|
background-color: $light-grey;
|
|
padding: $gutter;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 426px) {
|
|
main {
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
}
|
|
|
|
footer,
|
|
section {
|
|
padding: $gutter calc((100% - 425px) / 2);
|
|
|
|
&:nth-of-type(even) {
|
|
padding: $gutter calc(((100% - 425px) / 2) + #{$gutter});
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
footer,
|
|
main {
|
|
width: calc(100% * 0.809);
|
|
max-width: 860px;
|
|
}
|
|
|
|
footer {
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
}
|
|
|
|
section {
|
|
margin: ($gutter * 4) 0;
|
|
padding: $gutter 0;
|
|
width: auto;
|
|
|
|
&:nth-of-type(even) {
|
|
margin-right: calc(-100% * 0.809 / 2);
|
|
margin-left: calc(-100% * 0.809 / 2);
|
|
padding: ($gutter * 2) calc(100% * 0.809 / 2);
|
|
}
|
|
}
|
|
|
|
}
|