92 lines
2.1 KiB
SCSS
92 lines
2.1 KiB
SCSS
$page-pad: 40px;
|
|
$min-width: 320px;
|
|
$max-width: 1440px;
|
|
$sidebar-width: 320px;
|
|
$sidebar-pad: 30px;
|
|
$default-border-radius: 4px;
|
|
|
|
//html { background-color: $body_bg; }
|
|
|
|
//body { color: $body_color; }
|
|
|
|
//a {
|
|
//color: $link_color;
|
|
//&:hover, &:focus {
|
|
//color: saturate(darken($link_color, 15), 20); }
|
|
//&:visited {
|
|
//color: darken(adjust_hue($link_color, 70), 10); } }
|
|
|
|
.group { @include pie-clearfix; }
|
|
|
|
.inner-wrap {
|
|
position: relative;
|
|
margin: 0 auto;
|
|
padding: 0 $page_pad;
|
|
max-width: $max-width;
|
|
@extend .group;
|
|
}
|
|
|
|
.core-layout { > div { @extend .inner-wrap; } }
|
|
|
|
body { > header, > nav, > footer {
|
|
@extend .core-layout;
|
|
min-width: $min-width;
|
|
}
|
|
}
|
|
|
|
#page {
|
|
@extend .group;
|
|
padding: 0;
|
|
max-width: $max-width + $page-pad*2;
|
|
margin: 0 auto;
|
|
> div {
|
|
@extend .group;
|
|
//min-width: 480px;
|
|
margin-right: $sidebar-width;
|
|
> aside {
|
|
float: left;
|
|
width: $sidebar-width - $sidebar-pad*2;
|
|
margin: 0 -100% 0 0;
|
|
padding: $sidebar-pad;
|
|
}
|
|
}
|
|
}
|
|
|
|
#main {
|
|
float: left;
|
|
width: 100%;
|
|
padding-top: 25px;
|
|
padding-bottom: 25px;
|
|
> * {
|
|
padding-right: $page-pad;
|
|
padding-left: $page-pad;
|
|
}
|
|
}
|
|
|
|
@media (min-device-width:1024px) and (max-width:800px),
|
|
screen and (max-device-width:480px), (max-device-width:480px) and (orientation:landscape),
|
|
(min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait) {
|
|
#page > div { margin-right: 0;
|
|
#main { float: none; }
|
|
> aside { margin: 0; float: none; }
|
|
}
|
|
page > div > aside { float: none; }
|
|
body { > header, > nav, > footer { > div { padding: 0 15px; }}}
|
|
#main > * { padding-left: 15px; padding-right: 15px; }
|
|
}
|
|
|
|
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
|
|
body { > header, > nav, > footer { > div { padding: 0 10px; }}}
|
|
#main > * { padding-left: 10px; padding-right: 10px; }
|
|
#page > div { margin: none; > aside { float: none; }}
|
|
}
|
|
|
|
//*{
|
|
//transition: width .5s;
|
|
//-moz-transition: width .5s;
|
|
//-webkit-transition: margin .5s;
|
|
//}
|
|
|
|
|
|
//#search { left: $page-width + $sidebar-margin - $sidebar-width; }
|