diff options
| -rw-r--r-- | partials/_base.scss | 21 | ||||
| -rw-r--r-- | style.scss | 16 |
2 files changed, 29 insertions, 8 deletions
diff --git a/partials/_base.scss b/partials/_base.scss index 6302f0a..e2bbd9c 100644 --- a/partials/_base.scss +++ b/partials/_base.scss @@ -8,3 +8,24 @@ $baseLineHeight: ($baseFontSize * 2); // // No styleguide reference. @import "base-h5bp"; + +// Structure +// +// Layout Gala: https://web.archive.org/web/20071025014516/http://blog.html.it/layoutgala/LayoutGala01.html +$blockLeft-width: 16%; +$blockLeft-marginLeft: 2%; +$blockLeft-marginRight: 0%; +$blockLeft-marginBoth: ($blockLeft-marginLeft + $blockLeft-marginRight); +$blockLeft-paddingAny: 1%; +$blockLeft-paddingBoth: (2 * $blockLeft-paddingAny); +$blockLeft-fullwidth: ($blockLeft-width + $blockLeft-marginBoth + $blockLeft-paddingBoth); // 20% +$blockMid-marginLeft: 2%; +$blockMid-marginRight: 2%; +$blockMid-marginBoth: ($blockMid-marginLeft + $blockMid-marginRight); +$blockRight-width: 16%; +$blockRight-marginLeft: 0%; +$blockRight-marginRight: 2%; +$blockRight-marginBoth: ($blockRight-marginLeft + $blockRight-marginRight); +$blockRight-paddingAny: 1%; +$blockRight-paddingBoth: (2 * $blockRight-paddingAny); +$blockRight-fullwidth: ($blockRight-width + $blockRight-marginBoth + $blockRight-paddingBoth); // 20% @@ -208,9 +208,9 @@ body { #content { float: left; min-height: 480px; - width: 56%; + width: (100% - $blockMid-marginBoth - $blockLeft-fullwidth - $blockRight-fullwidth); max-width: 72em; - margin: 2% 22%; + margin: 2% ($blockMid-marginRight + $blockRight-fullwidth) 2% ($blockMid-marginLeft + $blockLeft-fullwidth); padding: 0; text-align: left; background-color: none; @@ -300,10 +300,10 @@ th { .sidebar { float: left; min-height: 480px; - width: 16%; - padding: 1%; + width: $blockLeft-width; + padding: $blockLeft-paddingAny; margin-top: 2%; - margin-left: -98%; + margin-left: -(100% - $blockLeft-marginLeft); margin-bottom: 2%; border: none; background-color: LightBlue; @@ -341,11 +341,11 @@ th { .farbar { float: left; min-height: 480px; - width: 16%; + width: $blockRight-width; margin-top: 2%; - margin-left: -20%; + margin-left: -($blockRight-fullwidth - $blockRight-marginLeft); margin-bottom: 2%; - padding: 1%; + padding: $blockRight-paddingAny; background-color: LightBlue; text-align: left; img { |