front page docs updated to include old getting started section, update code styles to look like github gists, and lots more docs updates

1 files changed, 72 insertions, 1 deletions

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 6cffcbc20..579baad7d 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -192,6 +192,75 @@ body > .navbar-fixed .brand:hover {
 }
 
 
+/* Quickstart section for getting le code
+-------------------------------------------------- */
+.getting-started {
+  background-color: #f5f5f5;
+  background-repeat: repeat-x;
+  background-image: -khtml-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f5f5f5));
+  background-image: -moz-linear-gradient(#f9f9f9, #f5f5f5);
+  background-image: -ms-linear-gradient(#f9f9f9, #f5f5f5);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f5f5f5));
+  background-image: -webkit-linear-gradient(#f9f9f9, #f5f5f5);
+  background-image: -o-linear-gradient(#f9f9f9, #f5f5f5);
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0)";
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0);
+  background-image: linear-gradient(#f9f9f9, #f5f5f5);
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+}
+.getting-started {
+  border-color: #eee;
+}
+.getting-started td {
+  width: 33%;
+  border-right: 1px solid #eee;
+}
+.getting-started td + td {
+  border-left: 1px solid #fff;
+}
+.getting-started td:last-child {
+  border-right: 0;
+}
+.quick-start {
+  padding: 17px 20px;
+}
+.quick-start h3,
+.quick-start p {
+  line-height: 18px;
+  text-align: center;
+  margin-bottom: 9px;
+}
+.quick-start p {
+  color: #777;
+}
+.quick-start .current-version,
+.quick-start .current-version a {
+  color: #999;
+}
+.quick-start form {
+  margin-bottom: 0;
+}
+.quick-start textarea {
+  display: block;
+  width: 100%;
+  height: auto;
+  margin-bottom: 0;
+  line-height: 21px;
+  white-space: nowrap;
+  overflow: hidden;
+  /* Makes inputs behave like true block-level elements */
+  -webkit-box-sizing: border-box; /* Older Webkit */
+     -moz-box-sizing: border-box; /* Older FF */
+      -ms-box-sizing: border-box; /* IE8 */
+          box-sizing: border-box; /* CSS3 spec*/
+  /* Hacks for IE7 to make this work just okay enough to function */
+  *width: 90%;
+  *height: 24px;
+}
+
+
 /* Footer
 -------------------------------------------------- */
 .footer {
@@ -341,8 +410,10 @@ h2 + table {
 .example-sites img {
   max-width: 290px;
 }
-.built-with {
+.marketing-byline {
   margin: -18px 0 27px;
+  font-size: 18px;
+  font-weight: 300;
   color: #999;
   text-align: center;
 }