Formalize use of Layout Gala structure.

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%
diff --git a/style.scss b/style.scss
index e052ad0..1822b1f 100644
--- a/style.scss
+++ b/style.scss
@@ -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 {