diff options
author | Brandon Mathis <brandon@imathis.com> | 2011-06-29 14:01:06 -0400 |
---|---|---|
committer | Brandon Mathis <brandon@imathis.com> | 2011-06-29 14:01:06 -0400 |
commit | ea349cdfbfa4d42110099e49a8ff23f7213cd5b6 (patch) | |
tree | aca4c6c7646207fe295197695b0cf87ee2a46913 /.themes/classic/sass/base/_layout.scss | |
parent | ce6621724c8d13530681724528b22e1c381f0dc2 (diff) | |
download | my_new_personal_website-ea349cdfbfa4d42110099e49a8ff23f7213cd5b6.tar.xz my_new_personal_website-ea349cdfbfa4d42110099e49a8ff23f7213cd5b6.zip |
Moved themes to .themes to get it out of the way. Updated Rakefile to support .themes dir and remove duplication. Improved deploy task. Renamed init_deploy to cofig_deploy and rewrote it to update configurations in the Rakefile for easier deploy use
Diffstat (limited to '.themes/classic/sass/base/_layout.scss')
-rw-r--r-- | .themes/classic/sass/base/_layout.scss | 134 |
1 files changed, 134 insertions, 0 deletions
diff --git a/.themes/classic/sass/base/_layout.scss b/.themes/classic/sass/base/_layout.scss new file mode 100644 index 00000000..b24e1b29 --- /dev/null +++ b/.themes/classic/sass/base/_layout.scss @@ -0,0 +1,134 @@ +$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, #articles > article, #articles > nav { + @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; + } +} + +.toggle-sidebar { display: none; } +#articles { width: 100%; + + aside { + float: none; + padding: 0 $pad-min 1px; + background-color: $sidebar-bg; + border-top: 1px solid $sidebar-border; + } +} + +@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; + background: none; + 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) { + body > header { font-size: 1.3em; } + body > nav + div > div { margin-right: $sidebar-width-wide; } + #articles { + 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; + } + } +} |