fix Holy Grail Layout

Author: thingsym

doc/css/holy-grail-layout.css

@@ -10,7 +10,7 @@ body {
 }
 
 .HolyGrail-container {
-  width: 980px;
+  width: 100%;
   height: 100%;
   box-sizing: border-box;
   display: -webkit-flex;
@@ -41,26 +41,29 @@ body {
 
 .HolyGrail-content {
   box-sizing: border-box;
-  -webkit-flex: 0 0 48.66667%;
-  -ms-flex: 0 0 48.66667%;
-  flex: 0 0 48.66667%;
+  max-width: 100%;
+  width: auto;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  margin: 0 2%;
 }
 
 .HolyGrail-nav {
   box-sizing: border-box;
-  -webkit-flex: 0 0 23.66667%;
-  -ms-flex: 0 0 23.66667%;
-  flex: 0 0 23.66667%;
+  -webkit-flex: 0 0 240px;
+  -ms-flex: 0 0 240px;
+  flex: 0 0 240px;
   -webkit-order: -1;
   -ms-flex-order: -1;
   order: -1;
 }
 
 .HolyGrail-aside {
   box-sizing: border-box;
-  -webkit-flex: 0 0 23.66667%;
-  -ms-flex: 0 0 23.66667%;
-  flex: 0 0 23.66667%;
+  -webkit-flex: 0 0 120px;
+  -ms-flex: 0 0 120px;
+  flex: 0 0 120px;
 }
 
 header,
@@ -73,7 +76,6 @@ footer {
 
 .HolyGrail-body {
   background: #a5c3e2;
-  border: 1px solid #130e7d;
 }
 
 header,

doc/sass/holy-grail-layout.scss

@@ -15,7 +15,7 @@ body {
 }
 
 .HolyGrail-container {
-  width: 980px;
+  width: 100%;
   height: 100%;
   @include grid($flex-flow: column nowrap);
   margin: auto;
@@ -27,13 +27,14 @@ body {
 }
 
 .HolyGrail-content {
-  @include grid-col($col: 6, $col-offset: $default-col-offset, $flex-shrink: 1);
+  @include grid-col($col: auto, $flex-shrink: 0 );
+  margin: 0 2%;
 }
 .HolyGrail-nav {
-  @include grid-col($col: 3, $col-offset: $default-col-offset, $flex-shrink: 1, $order: -1);
+  @include grid-col($col: 240px, $flex-shrink: 0, $order: -1);
 }
 .HolyGrail-aside {
-  @include grid-col($col: 3, $col-offset: $default-col-offset, $flex-shrink: 1);
+  @include grid-col($col: 120px, $flex-shrink: 0);
 }
 
 header,
@@ -43,7 +44,6 @@ footer {
 
 .HolyGrail-body {
   background: #a5c3e2;
-  border: 1px solid #130e7d;
 }
 
 header,