blog/sass/themes/classic/core/_layout.scss

95 lines
1.8 KiB
SCSS

a {
color: $link_color;
&:hover, &:focus {
color: saturate(darken($link_color, 15), 20); }
&:visited {
color: darken(adjust_hue($link_color, 70), 10);
}
}
$min-width: 320px;
$max-width: 1440px;
$default-border-radius: 4px;
.group { @include pie-clearfix; }
.core-layout { > div { @extend .inner-wrap; } }
body {
> header, > nav, > footer {
@extend .core-layout;
min-width: $min-width;
}
}
@mixin media-layout($page-pad, $sidebar-width, $sidebar-pad) {
$side-nav: $sidebar-width - $page-pad - $sidebar-pad;
.inner-wrap {
padding: 0 $page-pad;
position: relative;
margin: 0 auto;
max-width: $max-width;
@extend .group;
}
body > nav + div {
@extend .group;
padding: 0;
max-width: $max-width + $page-pad*2;
margin: 0 auto;
> div {
@extend .group;
margin-right: $sidebar-width;
}
}
body > nav > div > div { width: $side-nav;
.search { width: $side-nav - 70px; }
}
#articles {
float: left;
width: 100%;
padding-top: 25px;
padding-bottom: 25px;
> * {
padding-right: $page-pad;
padding-left: $page-pad;
}
> article {
margin-bottom: 1.5em;
padding-bottom: 1.5em;
padding-right: $page-pad;
padding-left: $page-pad;
}
+ aside {
display: block;
float: left;
width: $sidebar-width - $sidebar-pad*2;
margin: 0 -100% 0 0;
padding: 0 $sidebar-pad $sidebar-pad;
}
}
}
@media only screen and (min-width: 320px) {
@import "../media/480";
}
@media only screen and (min-width: 768px) {
@include media-layout(15px, 240px, 15px);
@import "../media/768";
}
@media only screen and (min-width: 992px) {
@include media-layout(40px, 320px, 30px);
@import "../media/992";
}
//*{
//transition: width .5s;
//-moz-transition: width .5s;
//-webkit-transition: margin .5s;
//}