text formatting

public/docs/js/latest/quickstart.jade

@@ -1,3 +1 @@
-h1 JavaScript Quickstart
-
-!= partial("../_quickstart", public.docs.js._data)
+!= partial("../_quickstart", public.docs.js._data)

public/resources/css/base/_type.scss

@@ -41,7 +41,8 @@ a {
   line-height: 118px;
 }
 
-.text-display-2 {
+.text-display-2,
+.docs-content h1 {
   margin: 0px 0px ($unit * 2) 0px;
   font-size: 45px;
   font-weight: 400;
@@ -50,16 +51,16 @@ a {
 }
 
 .text-display-1,
-.docs-content h1 {
+.docs-content h2 {
   margin: 0px 0px ($unit * 2) 0px;
   font-size: 34px;
   font-weight: 400;
-  opacity: .54;
+  opacity: .87;
   line-height: 40px;
 }
 
 .text-headline,
-.docs-content h2 {
+.docs-content h3 {
   margin: 0px 0px ($unit * 2) 0px;
   font-size: 24px;
   font-weight: 400;
@@ -67,8 +68,7 @@ a {
   line-height: 32px;
 }
 
-.text-title,
-.docs-content h3 {
+.text-title {
   margin: 0px 0px ($unit * 2) 0px;
   font-size: 20px;
   font-weight: 500;
@@ -88,13 +88,12 @@ a {
   line-height: 28px;
 }
 
-// STANDARD TEXT TOO SMALL
-// .text-body {
-//   font-size: 16px;
-//   font-weight: 400;
-//   opacity: .87;
-//   line-height: 24px;
-// }
+.l-sub-section p {
+  font-size: 14px;
+  font-weight: 400;
+  opacity: .87;
+  line-height: 24px;
+}
 
 .text-caption {
   margin: 0px 0px ($unit * 2) 0px;

public/resources/css/layout/_layout.scss

@@ -1,5 +1,10 @@
 @import 'grids';
 
+/*
+* Base Layout Styles
+*
+*/
+
 .l-left {
   float: left;
 }
@@ -9,9 +14,28 @@
 }
 
 
+/*
+* Pinned Layouts (fixed)
+*
+*/
+
+.l-pinned-top {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+}
+
+.l-pinned-left {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  bottom: 0px;
+}
+
 
 /*
-* Margins & Spacing
+* Page & Element Specific Layouts
 *
 */
 
@@ -31,6 +55,36 @@
   margin: 0px 0px ($unit * 8) 0px;
 }
 
+.l-main-section {
+  margin: 0px 0px ($unit * 8) 0px;
+}
+
+.l-sub-section {
+  margin: 0px 0px ($unit * 4) 0px;
+  padding: ($unit * 4) ($unit * 6);
+  background: lighten($mist, 3%);
+  border-left: ($unit / 2) solid $cactus;
+  border-radius: ($unit / 2);
+
+  &:last-child {
+    margin: 0;
+  }
+}
+
+.l-main-section,
+.l-main-section {
+  p:last-child {
+    margin: 0;
+  }
+}
+
+
+
+/*
+* Margins & Padding
+*
+*/
+
 @for $i from 1 through 10 {
   .l-space-#{$i} {
     margin: $i * 8px;
@@ -66,26 +120,6 @@
 }
 
 
-/*
-* Pinned Layouts (fixed)
-*
-*/
-
-.l-pinned-top {
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-}
-
-.l-pinned-left {
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  bottom: 0px;
-}
-
-
 /*
 * Layer Order (z-index)
 *
@@ -129,7 +163,4 @@
 
 .l-layer-10 {
   z-index: $layer-10;
-}
-
-
-
+}

public/resources/css/module/_code.scss

@@ -25,7 +25,7 @@
   font-size: 14px;
   font-weight: 600;
   line-height: 24px;
-  margin-bottom: 20px;
+  margin-bottom: $unit * 3;
   border-radius: 4px;
   box-shadow: 0px 2px 5px rgba($coal, .3);