feat(shorter lines): encapsulate all doc guides within a 10 sized column, including banners. Use showcase. Adjust for mobile

public/docs/_layout.jade

@@ -19,11 +19,17 @@ html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Frame
     else if current.path.indexOf('cheatsheet') > 0
       != yield
     else
-      article(class="l-content-small grid-fluid docs-content")
-        != yield
-
-        if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4]
-          != partial("../_includes/_next-item")
+      if current.path[3] == 'index' || current.path[3] == 'styleguide'
+        article(class="l-content-small grid-fluid docs-content")
+          != yield
+      else
+        article(class="l-content-small grid-fluid docs-content")
+          div(class="c10")
+            .showcase.shadow-1
+              .showcase-content
+                != yield
+                  if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4]
+                    != partial("../_includes/_next-item")
 
     != partial("../_includes/_footer")
     != partial("../_includes/_scripts-include")

public/docs/dart/latest/cheatsheet.jade

@@ -1,6 +1,6 @@
 - var base = current.path[4] ? '.' : './guide';
-.banner
-  p.text-body This cheat sheet is provisional and may change. Angular 2 is currently in Beta.
+.banner.grid-fluid
+  p.text-body.c10 This cheat sheet is provisional and may change. Angular 2 is currently in Beta.
 
 article(class="l-content-small grid-fluid docs-content")
   .cheatsheet

public/docs/js/latest/cheatsheet.jade

@@ -1,6 +1,6 @@
 - var base = current.path[4] ? '.' : './guide';
-.banner
-  p.text-body This cheat sheet is provisional and may change. Angular 2 is currently in Beta.
+.banner.grid-fluid
+  p.text-body.c10 This cheat sheet is provisional and may change. Angular 2 is currently in Beta.
 
 article(class="l-content-small grid-fluid docs-content")
   .cheatsheet

public/resources/css/layout/_grids.scss

@@ -389,6 +389,18 @@ limitations under the License.
     width: auto;
   }
 }
+
+@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 480px) {
+  /* line 22, ../scss/_responsive.scss */
+  .grid-fixed .c1, .grid-fixed .c2, .grid-fixed .c3, .grid-fixed .c4, .grid-fixed .c5, .grid-fixed .c6, .grid-fixed .c7, .grid-fixed .c8, .grid-fixed .c9, .grid-fixed .c10, .grid-fixed .c11, .grid-fixed .c12, .grid-fluid .c1, .grid-fluid .c2, .grid-fluid .c3, .grid-fluid .c4, .grid-fluid .c5, .grid-fluid .c6, .grid-fluid .c7, .grid-fluid .c8, .grid-fluid .c9, .grid-fluid .c10, .grid-fluid .c11, .grid-fluid .c12 {
+    margin-left: 0px;
+    margin-right: 0px;
+    float: none;
+    display: block;
+    width: auto;
+  }
+}
+
 @media handheld and (max-width: 900px), screen and (max-width: 900px) {
   /* line 6, ../scss/_responsive.scss */
   .grid-fixed, .grid-fluid {

public/resources/css/layout/_layout.scss

@@ -103,7 +103,8 @@
   @media handheld and (max-width: $phone-breakpoint),
   screen and (max-device-width: $phone-breakpoint),
   screen and (max-width: $tablet-breakpoint) {
-    padding: ($unit * 3) ($unit * 2);
+    padding: 0;
+    padding-top: ($unit * 3);
   }
 }
 

public/resources/css/module/_showcase.scss

@@ -1,5 +1,6 @@
 .showcase {
   margin-bottom: $unit * 6;
+  border-radius: 4px;
 
   .showcase-header {
     padding: $unit * 4;