cleans up various alignment and layout issues

public/api-builder/angular.io-package/templates/module.template.html

@@ -10,7 +10,7 @@ ul
     if slug != 'index'
       - var url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + current.path[4] + "/" + slug + ".html"
 
-      li.c8
+      li
         != partial("../../../../../_includes/_hover-card", {name: page.title, url: url })
 
 {% endblock %}

public/docs/dart/latest/guide/index.jade

@@ -1,5 +1,5 @@
 - var number = 1;
-ul.is-plain.l-offset-page-header
+ul.is-plain
   for page, slug in public.docs[current.path[1]][current.path[2]].guide._data
 
     if slug != '_listtype' && slug != 'index'

public/docs/dart/latest/index.jade

@@ -1,30 +1,30 @@
+div.card-row(layout='row')
+  div(flex)
+    md-card.card
+      md-card-content
+        h3.text-headline.text-uppercase <span class="icon-query-builder"></span> Quickstart
+        p.text-body Learn in 5 minutes
 
-div.c4
-  md-card.card
-    md-card-content
-      h3.text-headline.text-uppercase <span class="icon-query-builder"></span> Quickstart
-      p.text-body Learn in 5 minutes
-
-      footer
-        a(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html" class="button" md-button) View Quickstart
+        footer
+          a(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html" class="button" md-button) View Quickstart
 
 
-div.c4
-  md-card.card
-    md-card-content
-      h3.text-headline.text-uppercase <span class="icon-list"></span> Guide
-      p.text-body Step by Step Guide
+  div(flex)
+    md-card.card
+      md-card-content
+        h3.text-headline.text-uppercase <span class="icon-list"></span> Guide
+        p.text-body Step by Step Guide
 
-      footer
-        a(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/" class="button button-primary" md-button) View Guide
+        footer
+          a(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/" class="button button-primary" md-button) View Guide
 
 
-div.c4
-  md-card.card
-    md-card-content
-      h3.text-headline.text-uppercase <span class="icon-book"></span> API
-      p.text-body API 2.0 Preview
+  div(flex)
+    md-card.card
+      md-card-content
+        h3.text-headline.text-uppercase <span class="icon-book"></span> API
+        p.text-body API 2.0 Preview
 
-      footer
-        a(href="/docs/#{current.path[1]}/#{current.path[2]}/api/" class="button" md-button) View API
+        footer
+          a(href="/docs/#{current.path[1]}/#{current.path[2]}/api/" class="button" md-button) View API
 

public/docs/js/latest/api/index.jade

@@ -1,4 +1,4 @@
-.callout.is-helpful.l-offset-page-header
+.callout.is-helpful
   header Developer Preview
 
   p.
@@ -7,7 +7,7 @@
     in the development community. If you're building a production app today, please
     <a href="https://docs.angularjs.org/api">use Angular 1.X</a>.
 
-ul.is-plain.l-offset-page-header
+ul.is-plain
   for page, slug in public.docs[current.path[1]][current.path[2]].api
     if slug != 'index' && slug != '_contents' && slug != '_data'
 

public/docs/js/latest/guide/index.jade

@@ -1,5 +1,5 @@
 - var number = 1;
-ul.is-plain.l-offset-page-header
+ul.is-plain
   for page, slug in public.docs[current.path[1]][current.path[2]].guide._data
 
     if slug != '_listtype' && slug != 'index'

public/docs/js/latest/index.jade

@@ -1,30 +1,30 @@
+div.card-row(layout='row')
+  div(flex)
+    md-card.card
+      md-card-content
+        h3.text-headline.text-uppercase <span class="icon-query-builder"></span> Quickstart
+        p.text-body Learn in 5 minutes
 
-div.c4
-  md-card.card
-    md-card-content
-      h3.text-headline.text-uppercase <span class="icon-query-builder"></span> Quickstart
-      p.text-body Learn in 5 minutes
-
-      footer
-        a(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html" class="button" md-button) View Quickstart
+        footer
+          a(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html" class="button" md-button) View Quickstart
 
 
-div.c4
-  md-card.card
-    md-card-content
-      h3.text-headline.text-uppercase <span class="icon-list"></span> Guide
-      p.text-body Step by Step Guide
+  div(flex)
+    md-card.card
+      md-card-content
+        h3.text-headline.text-uppercase <span class="icon-list"></span> Guide
+        p.text-body Step by Step Guide
 
-      footer
-        a(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/" class="button button-primary" md-button) View Guide
+        footer
+          a(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/" class="button button-primary" md-button) View Guide
 
 
-div.c4
-  md-card.card
-    md-card-content
-      h3.text-headline.text-uppercase <span class="icon-book"></span> API Preview
-      p.text-body API 2.0 Preview
+  div(flex)
+    md-card.card
+      md-card-content
+        h3.text-headline.text-uppercase <span class="icon-book"></span> API Preview
+        p.text-body API 2.0 Preview
 
-      footer
-        a(href="/docs/#{current.path[1]}/#{current.path[2]}/api/" class="button" md-button) View API
+        footer
+          a(href="/docs/#{current.path[1]}/#{current.path[2]}/api/" class="button" md-button) View API
 

public/docs/ts/latest/guide/index.jade

@@ -1,5 +1,5 @@
 - var number = 1;
-ul.is-plain.l-offset-page-header
+ul.is-plain
   for page, slug in public.docs[current.path[1]][current.path[2]].guide._data
 
     if slug != '_listtype' && slug != 'index'

public/docs/ts/latest/index.jade

@@ -1,30 +1,30 @@
+div.card-row(layout='row')
+  div(flex)
+    md-card.card
+      md-card-content
+        h3.text-headline.text-uppercase <span class="icon-query-builder"></span> Quickstart
+        p.text-body Learn in 5 minutes
 
-div.c4
-  md-card.card
-    md-card-content
-      h3.text-headline.text-uppercase <span class="icon-query-builder"></span> Quickstart
-      p.text-body Learn in 5 minutes
-
-      footer
-        a(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html" class="button" md-button) View Quickstart
+        footer
+          a(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html" class="button" md-button) View Quickstart
 
 
-div.c4
-  md-card.card
-    md-card-content
-      h3.text-headline.text-uppercase <span class="icon-list"></span> Guide
-      p.text-body Step by Step Guide
+  div(flex)
+    md-card.card
+      md-card-content
+        h3.text-headline.text-uppercase <span class="icon-list"></span> Guide
+        p.text-body Step by Step Guide
 
-      footer
-        a(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/" class="button button-primary" md-button) View Guide
+        footer
+          a(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/" class="button button-primary" md-button) View Guide
 
 
-div.c4
-  md-card.card
-    md-card-content
-      h3.text-headline.text-uppercase <span class="icon-book"></span> API Preview
-      p.text-body API 2.0 Preview
+  div(flex)
+    md-card.card
+      md-card-content
+        h3.text-headline.text-uppercase <span class="icon-book"></span> API Preview
+        p.text-body API 2.0 Preview
 
-      footer
-        a(href="/docs/#{current.path[1]}/#{current.path[2]}/api/" class="button" md-button) View API
+        footer
+          a(href="/docs/#{current.path[1]}/#{current.path[2]}/api/" class="button" md-button) View API
 

public/resources/css/base/_type.scss

@@ -105,6 +105,7 @@ table th,
   font-weight: 400;
   opacity: .87;
   line-height: 28px;
+  padding: 0;
 
   &.is-plain {
     list-style-type: none;
@@ -112,6 +113,11 @@ table th,
   }
 }
 
+.docs-content ul,
+.docs-content ol {
+  padding-left: ($unit * 4);
+}
+
 .l-sub-section p,
 table td {
   font-size: 14px;
@@ -161,3 +167,12 @@ table td {
 .docs-content .l-sub-section  aside {
   background: $snow;
 }
+
+.docs-content .card-row {
+  > div:first-child > .card {
+    margin-left: 0;
+  }
+  > div:last-child > .card {
+    margin-right: 0;
+  }
+}

public/resources/css/module/_banner.scss

@@ -6,7 +6,7 @@
 
 .banner {
   background: $mist;
-  padding: ($unit * 4) ($unit * 4) ($unit * 4) ($unit * 12);
+  padding: ($unit * 4) ($unit * 6);
   min-height: $unit * 12;
 
   @media handheld and (max-width: $phone-breakpoint),

public/resources/css/module/_dropdown.scss

@@ -12,6 +12,7 @@
     cursor: pointer;
     position: relative;
     z-index: $layer-1;
+    opacity: 0.87;
 
     .icon {
       position: absolute;
@@ -31,6 +32,8 @@
     left: 0px;
     z-index: $layer-5;
     display: none;
+    border-radius: 3px;
+    overflow: hidden;
 
     ul {
       list-style-type: none;

public/resources/css/module/_hero.scss

@@ -1,4 +1,4 @@
-$hero-padding: $unit * 2;
+$hero-padding: ($unit * 10) ($unit * 6) ($unit * 5);
 
 .hero {
   position: relative;
@@ -14,6 +14,7 @@ $hero-padding: $unit * 2;
 
   &.is-large {
     height: 478px;
+    padding-top: ($unit * 2);
     text-align: center;
 
     @media handheld and (max-width: $phone-breakpoint),
@@ -25,7 +26,7 @@ $hero-padding: $unit * 2;
 
   .hero-title {
     text-transform: uppercase;
-    margin: ($unit * 9) 0px 0px ($unit * 10);
+    margin: 0;
     opacity: .87;
 
     &.is-standard-case {
@@ -40,8 +41,8 @@ $hero-padding: $unit * 2;
   }
 
   .hero-subtitle {
-    margin: 0px 0px 0px ($unit * 10);
-    opacity: .87;
+    margin: 0;
+    opacity: 1;
 
     @media handheld and (max-width: $phone-breakpoint),
     screen and (max-device-width: $phone-breakpoint),