themes/classic/sass/core/_layout.scss
da514a65
 $max-width: 1200px !default;
ef3ff431
 
 // Padding used for layout margins
da514a65
 $pad-min: 18px !default;
 $pad-narrow: 25px !default;
 $pad-medium: 35px !default;
 $pad-wide: 55px !default;
ef3ff431
 
 // Sidebar widths used in media queries
da514a65
 $sidebar-width-medium: 240px !default;
 $sidebar-pad-medium: 15px !default;
 $sidebar-pad-wide: 20px !default;
 $sidebar-width-wide: 300px !default;
aa230616
 
 .group { @include pie-clearfix; }
 
 body {
   -webkit-text-size-adjust: none;
da514a65
   max-width: $max-width;
aa230616
   position: relative;
   margin: 0 auto;
ef3ff431
   > header, > nav, > footer, #articles > article, #articles > nav {
aa230616
     @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 {
a20dc08e
     font-size: 1em;
aa230616
     padding-top: 1.5em;
     padding-bottom: 1.5em;
   }
 }
 
 .toggle-sidebar { display: none; }
105ba143
 #articles { width: 100%;
   + aside {
     float: none;
     padding: 0 $pad-min 1px;
     background-color: $sidebar-bg;
     border-top: 1px solid $sidebar-border;
   }
 }
aa230616
 
 @media only screen and (min-width: 550px) {
   body > header { font-size: 1em; }
 }
 @media only screen and (min-width: 768px) {
   body { -webkit-text-size-adjust: auto; }
   body > header { font-size: 1.2em; }
   body > nav {
     + div {
       @extend .group;
       padding: 0;
       margin: 0 auto;
       > div {
         @extend .group;
         margin-right: $sidebar-width-medium;
       }
     }
   }
   #articles {
     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;
105ba143
       background: none;
aa230616
       float: left;
       margin: 0 -100% 0 0;
     }
   }
   body > div > div { position: relative; }
 
   .collapse-sidebar {
     > div > div { margin-right: 10px; }
     #articles + aside {
       display: none;
     }
     .toggle-sidebar {
       right: -1px;
       background-color: $sidebar-bg;
       border-right-width: 0;
       text-indent: 2px;
       border-left: 1px solid $sidebar-border;
       @include border-bottom-right-radius(0);
       @include border-bottom-left-radius(.3em);
       @include link-colors(#aaa, #888);
     }
   }
 
   .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;
   }
 }
 
 @media only screen and (min-width: 992px) {
105ba143
   body > header { font-size: 1.3em; }
aa230616
   body > nav + div > div { margin-right: $sidebar-width-wide; }
   #articles {
105ba143
     padding-top: $pad-wide/2;
     padding-bottom: $pad-wide/2;
aa230616
     + aside {
       width: $sidebar-width-wide - $sidebar-pad-wide*2;
105ba143
       padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide;
aa230616
     }
   }
 }