mmoser/markamoser.com
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

layout changes

Browse Source
This commit is contained in:
Mark Moser
2017-08-22 18:56:58 -05:00
committed by Mark Moser
parent c1b5232add
commit 7117f4e0c4
5 changed files with 66 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
site/assets/scss/elements/_layout.scss
View File

@ -2,70 +2,36 @@ body {
min-width: 300px;
}
header {
header,
main {
margin: 0;
padding: 0;
}
section {
margin-bottom: $gutter;
padding: $gutter;
&:nth-of-type(even) {
background-color: $light-grey;
}
}
footer {
margin: 0;
padding: 0 $gutter;
}
main {
margin: 0 $gutter;
padding: 0;
}
@media screen and (min-width: 900px) {
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;
padding: ($gutter * 2) calc((100% - 850px) / 2);
width: 850px;
}
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);
}
padding: 0 calc((100% - 850px) / 2);
width: 850px;
}
}