mirror of
https://github.com/moparisthebest/www.moparscape.org
synced 2024-11-11 11:55:04 -05:00
5d1d04c52c
2. Added a page layout and improved html on post layout. 3. Improved flexibility of stylesheets for different layout types. 4. Collapsing sidebar now moves it to the bottom of the page and floats content into columns. 5. Improved sharing settings, added Google plus one.
167 lines
4.1 KiB
SCSS
167 lines
4.1 KiB
SCSS
$max-width: 1200px !default;
|
|
|
|
// Padding used for layout margins
|
|
$pad-min: 18px !default;
|
|
$pad-narrow: 25px !default;
|
|
$pad-medium: 35px !default;
|
|
$pad-wide: 55px !default;
|
|
|
|
// Sidebar widths used in media queries
|
|
$sidebar-width-medium: 240px !default;
|
|
$sidebar-pad-medium: 15px !default;
|
|
$sidebar-pad-wide: 20px !default;
|
|
$sidebar-width-wide: 300px !default;
|
|
|
|
.group { @include pie-clearfix; }
|
|
|
|
body {
|
|
-webkit-text-size-adjust: none;
|
|
max-width: $max-width;
|
|
position: relative;
|
|
margin: 0 auto;
|
|
> header, > nav, > footer, #content > article, #content > div > article {
|
|
@extend .group;
|
|
padding-left: $pad-min;
|
|
padding-right: $pad-min;
|
|
@media only screen and (min-width: 480px) {
|
|
padding-left: $pad-narrow;
|
|
padding-right: $pad-narrow;
|
|
}
|
|
@media only screen and (min-width: 768px) {
|
|
padding-left: $pad-medium;
|
|
padding-right: $pad-medium;
|
|
}
|
|
@media only screen and (min-width: 992px) {
|
|
padding-left: $pad-wide;
|
|
padding-right: $pad-wide;
|
|
}
|
|
}
|
|
> header {
|
|
font-size: 1em;
|
|
padding-top: 1.5em;
|
|
padding-bottom: 1.5em;
|
|
}
|
|
}
|
|
|
|
#content {
|
|
> div, > article { width: 100%; }
|
|
> aside {
|
|
float: none;
|
|
padding: 0 $pad-min 1px;
|
|
background-color: lighten($sidebar-bg, 2);
|
|
border-top: 1px solid $sidebar-border;
|
|
}
|
|
}
|
|
|
|
.toggle-sidebar { display: none; }
|
|
|
|
@media only screen and (min-width: 550px) {
|
|
body > header { font-size: 1em; }
|
|
#content aside {
|
|
@extend .group;
|
|
section {
|
|
&.odd, &.even { float: left; width: 48%; }
|
|
&.odd { margin-left: 0; }
|
|
&.even { margin-left: 4%; }
|
|
}
|
|
}
|
|
}
|
|
@media only screen and (min-width: 768px) {
|
|
body { -webkit-text-size-adjust: auto; }
|
|
body > header { font-size: 1.2em; }
|
|
#main {
|
|
@extend .group;
|
|
padding: 0;
|
|
margin: 0 auto;
|
|
}
|
|
#content {
|
|
@extend .group;
|
|
margin-right: $sidebar-width-medium;
|
|
position: relative;
|
|
> div, > article {
|
|
padding-top: $pad-medium/2;
|
|
padding-bottom: $pad-medium/2;
|
|
float: left;
|
|
}
|
|
> aside {
|
|
width: $sidebar-width-medium - $sidebar-pad-medium*2;
|
|
padding: 0 $sidebar-pad-medium $sidebar-pad-medium;
|
|
background: none;
|
|
float: left;
|
|
margin: 0 -100% 0 0;
|
|
section, section.even { width: auto; margin: 0; }
|
|
}
|
|
.collapse-sidebar & {
|
|
margin-right: 10px;
|
|
> aside {
|
|
float: none;
|
|
clear: left;
|
|
width: auto;
|
|
margin: 0;
|
|
padding: 0 $pad-medium 1px;
|
|
background-color: lighten($sidebar-bg, 2);
|
|
border-top: 1px solid lighten($sidebar-border, 4);
|
|
section {
|
|
&.odd, &.even { float: left; width: 48%; }
|
|
&.odd { margin-left: 0; }
|
|
&.even { margin-left: 4%; }
|
|
}
|
|
}
|
|
> aside.thirds section {
|
|
width: 30%;
|
|
margin-left: 5%;
|
|
&.first { margin-left: 0; }
|
|
}
|
|
}
|
|
}
|
|
.toggle-sidebar {
|
|
outline: none;
|
|
position: absolute; right: -21px; top: 0;
|
|
width: 20px;
|
|
font-size: 1.2em;
|
|
line-height: 1.1em;
|
|
padding-bottom: .1em;
|
|
text-indent: -1px;
|
|
text-decoration: none;
|
|
@include link-colors(#ccc, #999);
|
|
@include border-bottom-right-radius(.3em);
|
|
text-align: center;
|
|
background: $main-bg;
|
|
border-bottom: 1px solid $sidebar-border;
|
|
border-right: 1px solid $sidebar-border;
|
|
display: inline-block;
|
|
.collapse-sidebar & {
|
|
right: -11px;
|
|
width: 24px;
|
|
bottom: 0;
|
|
background-color: $sidebar-bg;
|
|
border-right-width: 0;
|
|
text-indent: 0px;
|
|
border-left: 1px solid $sidebar-border;
|
|
@include link-colors(#aaa, #888);
|
|
&:hover {
|
|
background: $sidebar-border;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 992px) {
|
|
body > header { font-size: 1.3em; }
|
|
#content { margin-right: $sidebar-width-wide; }
|
|
#content {
|
|
> div, > article {
|
|
padding-top: $pad-wide/2;
|
|
padding-bottom: $pad-wide/2;
|
|
}
|
|
> aside {
|
|
width: $sidebar-width-wide - $sidebar-pad-wide*2;
|
|
padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide;
|
|
}
|
|
.collapse-sidebar & aside {
|
|
padding: { left: $pad-wide; right: $pad-wide; }
|
|
@extend .group;
|
|
}
|
|
}
|
|
}
|