63 lines
1.1 KiB
SCSS
63 lines
1.1 KiB
SCSS
|
$site-max-width: 1200px;
|
||
|
|
$mobile-width: 800px;
|
||
|
|
$side-padding: 10px;
|
||
|
|
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.site-header {
|
||
|
|
width: 100%;
|
||
|
|
.inner {
|
||
|
|
width: $site-max-width;
|
||
|
|
margin: 0 auto;
|
||
|
|
@media screen and (max-width: $site-max-width) {
|
||
|
|
width: 100%;
|
||
|
|
padding: 0 $side-padding;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.site-container {
|
||
|
|
@extend .clearfix;
|
||
|
|
width: $site-max-width;
|
||
|
|
margin: 0 auto;
|
||
|
|
@media screen and (max-width: $site-max-width) {
|
||
|
|
width: 100%;
|
||
|
|
padding: 0 $side-padding;
|
||
|
|
}
|
||
|
|
@media screen and (max-width: $mobile-width) {
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.site-content {
|
||
|
|
width: 70%;
|
||
|
|
float: left;
|
||
|
|
@media screen and (max-width: $mobile-width) {
|
||
|
|
width: 100%;
|
||
|
|
padding: 0 $side-padding;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.site-aside {
|
||
|
|
padding-left: 50px;
|
||
|
|
width: 30%;
|
||
|
|
float: left;
|
||
|
|
@media screen and (max-width: $mobile-width) {
|
||
|
|
width: 100%;
|
||
|
|
padding: 0 $side-padding;
|
||
|
|
}
|
||
|
|
.inner {
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.site-footer {
|
||
|
|
width: 100%;
|
||
|
|
.inner {
|
||
|
|
padding: 0 $side-padding;
|
||
|
|
}
|
||
|
|
}
|