From 1bda8cdad4365f84d247ba5e9173f53efc654b44 Mon Sep 17 00:00:00 2001
From: Jonas Smedegaard <dr@jones.dk>
Date: Fri, 4 Mar 2016 19:04:03 +0100
Subject: Formalize use of Layout Gala structure.

---
 partials/_base.scss | 21 +++++++++++++++++++++
 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%
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 {
-- 
cgit v1.2.3