From 94f0b58bc77ed6c900f2e4a10f352d3441f20fd6 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Wed, 25 Jan 2012 14:15:53 -0500
Subject: [PATCH] started fixing layout problems

---
 sass/_base-extends.scss   | 17 ++++++++++++-----
 sass/_base-variables.scss | 19 +++++++++++++++++++
 sass/_courseware.scss     |  9 ++-------
 sass/_fancybox.scss       |  8 ++++----
 sass/_profile.scss        |  8 ++++----
 sass/_textbook.scss       | 12 +++++-------
 6 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/sass/_base-extends.scss b/sass/_base-extends.scss
index 3fef87cf44..51ef608531 100644
--- a/sass/_base-extends.scss
+++ b/sass/_base-extends.scss
@@ -8,9 +8,15 @@
 
 .wrapper {
   margin: 0 auto;
-  max-width: $max-width;
-  width: grid-width(12);
+  max-width: $fg-max-width;
+  min-width: $fg-min-width;
+  width: flex-grid(12);
   text-align: left;
+
+  div.table-wrapper {
+    display: table;
+    width: flex-grid(12);
+  }
 }
 
 .button {
@@ -34,20 +40,21 @@
 .content {
   @include box-sizing(border-box);
   display: table-cell;
-  padding: $body-line-height;
+  padding: lh();
   vertical-align: top;
-  width: grid-width(9);
+  width: flex-grid(9) + flex-gutter();
 }
 
 .sidebar {
   @include box-shadow( inset -1px 0 0 #f6f6f6);
+  @include box-sizing(border-box);
   background: #e3e3e3;
   border-right: 1px solid #d3d3d3;
   display: table-cell;
   font-family: $body-font-family;
   text-shadow: 0 1px 0 #f1f1f1;
   vertical-align: top;
-  width: grid-width(3);
+  width: flex-grid(3);
   position: relative;
 
   h3 {
diff --git a/sass/_base-variables.scss b/sass/_base-variables.scss
index 0e2241999b..6f96fd715e 100644
--- a/sass/_base-variables.scss
+++ b/sass/_base-variables.scss
@@ -1,3 +1,15 @@
+// Flexible grid
+@function flex-grid($columns, $container-columns: $fg-max-columns) {
+  $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($width / $container-width);
+}
+
+// Flexible grid gutter
+@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($gutter / $container-width);
+}
 // Percentage of container calculator
 @function perc($width, $container-width: $max-width) {
   @return percentage($width / $container-width);
@@ -25,6 +37,13 @@ $gw-column: perc($column-width);
 $gw-gutter: perc($gutter-width);
 $body-line-height: golden-ratio($body-font-size, 1);
 
+//Flexible grid
+$fg-column: $column-width;
+$fg-gutter: $gutter-width;
+$fg-max-columns: $columns;
+$fg-max-width: 1400px;
+$fg-min-width: 810px;
+
 // color
 $light-gray: #ddd;
 $dark-gray: #333;
diff --git a/sass/_courseware.scss b/sass/_courseware.scss
index 4952a29168..f5e79f24e9 100644
--- a/sass/_courseware.scss
+++ b/sass/_courseware.scss
@@ -1,6 +1,5 @@
 div.course-wrapper {
-  display: table;
-  width: 100%;
+  @extend .table-wrapper;
 
   div#accordion {
     @extend .sidebar;
@@ -69,11 +68,7 @@ div.course-wrapper {
   }
 
   section.course-content {
-    @include box-sizing(border-box);
-    display: table-cell;
-    padding: $gw-gutter;
-    vertical-align: top;
-    width: grid-width(9);
+    @extend .content;
 
     ol.vert-mod {
       li {
diff --git a/sass/_fancybox.scss b/sass/_fancybox.scss
index 17dd52621e..34b86773bc 100644
--- a/sass/_fancybox.scss
+++ b/sass/_fancybox.scss
@@ -36,14 +36,14 @@ div#fancybox-wrap {
         text-align: left;
 
         div#enroll_error, div#login_error {
-          margin-bottom: lh();
+          -webkit-font-smoothing: antialiased;
           background-color: #F50200;
           color: #fff;
-          text-transform: uppercase;
-          letter-spacing: 1px;
           font-weight: bold;
-          -webkit-font-smoothing: antialiased;
+          letter-spacing: 1px;
+          margin-bottom: lh();
           padding: lh(.2);
+          text-transform: uppercase;
 
           &:empty {
             padding: 0;
diff --git a/sass/_profile.scss b/sass/_profile.scss
index 093b7acd1e..9a384a1cbd 100644
--- a/sass/_profile.scss
+++ b/sass/_profile.scss
@@ -3,9 +3,9 @@ div.profile-wrapper {
 
   section.user-info {
     @include box-sizing(border-box);
-    margin-right: $gw-gutter;
+    margin-right: flex-gutter();
     padding: $body-line-height;
-    width: grid-width(6);
+    width: flex-grid(6);
     background: #e3e3e3;
     border-right: 1px solid #d3d3d3;
     text-shadow: 0 1px 0 #f6f6f6;
@@ -14,9 +14,9 @@ div.profile-wrapper {
 
   section.course-info {
     @include box-sizing(border-box);
-    padding: $body-line-height;
-    width: grid-width(6);
     display: table-cell;
+    padding: $body-line-height;
+    width: flex-grid(6);
 
     ul {
       li {
diff --git a/sass/_textbook.scss b/sass/_textbook.scss
index 16e97c00ff..6e22791f2c 100644
--- a/sass/_textbook.scss
+++ b/sass/_textbook.scss
@@ -1,10 +1,10 @@
 div.book-wrapper {
-  display: table;
+  @extend .table-wrapper;
 
   ul#booknav {
     @extend .sidebar;
     @include box-sizing(border-box);
-    padding: $body-line-height;
+    padding: lh();
 
     li {
       ul {
@@ -14,11 +14,7 @@ div.book-wrapper {
   }
 
   section.book {
-    @include box-sizing(border-box);
-    padding: $body-line-height;
-    vertical-align: top;
-    width: grid-width(9) + $gw-gutter;
-    display: table-cell;
+    @extend .content;
 
     nav {
       @extend .topbar;
@@ -42,6 +38,8 @@ div.book-wrapper {
     section.page {
       img {
         border: 1px solid $border-color;
+        max-width: 100%;
+        min-width: 100%;
       }
     }
   }