added scss files

chrome/common/extensions/docs/static/sass/_typography.scss

Index: chrome/common/extensions/docs/static/sass/_typography.scss
diff --git a/chrome/common/extensions/docs/static/sass/_typography.scss b/chrome/common/extensions/docs/static/sass/_typography.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ef6722c8c26c015c64cd7eaa4d535a02e906bd89
--- /dev/null
+++ b/chrome/common/extensions/docs/static/sass/_typography.scss
@@ -0,0 +1,229 @@
+/* =============================================================================
+   Typography
+
+   To achieve a pleasant vertical rhythm, we use Compass' Vertical Rhythm mixins
+   so that the line height of our base font becomes the basic unit of vertical
+   measurement. We use multiples of that unit to set the top and bottom margins
+   for our block level elements and to set the line heights of any fonts.
+   For more information, see http://24ways.org/2006/compose-to-a-vertical-rhythm
+   ========================================================================== */
+
+
+html {
+  font-family: $base-font;
+  color: $text;
+}
+body {
+  font-size: $body-font-size;
+  color: $text;
+}
+ 
+h1, h2, h3, h4 ,h5 ,h6 {
+  font-family: $headline-font;
+  font-weight: 600;
+  color: $headline-color;
+}
+h1, h2 {
+  font-weight: 300;
+}
+h1 {
+  @include adjust-font-size-to( $h1-font-size );
+}
+h1 + h1 {
+  @include leader (0);
+}
+h2 {
+  @include adjust-font-size-to( $h2-font-size );
+  @include leader(2, $h2-font-size);
+  @include trailer(0, $h2-font-size);
+  @include adjust-leading-to(1.4, $h2-font-size);
+}
+h3 {
+  @include adjust-font-size-to( $h3-font-size );
+  @include leader(1, $h3-font-size);
+  @include trailer(0.4, $h3-font-size);
+  @include adjust-leading-to(1.4, $h2-font-size);
+}
+h4 {
+  @include adjust-font-size-to( $h4-font-size );
+  @include leader(0, $h4-font-size);
+  @include trailer(0, $h4-font-size);
+}
+h5 {
+  @include adjust-font-size-to( $h5-font-size );
+  @include leader(0, $h5-font-size);
+  @include trailer(0, $h5-font-size);
+}
+h6 {
+  @include adjust-font-size-to( $h6-font-size );
+  @include leader(0, $h6-font-size);
+  @include trailer(0, $h6-font-size);
+}
+
+// @media only screen and (max-width: $break-small) {
+//   h1 {
+//     font-size: $h1-font-size - 0.6 !important;
+//   }
+// }
+
+p {
+  margin: rhythm(1) 0;
+  &.noindent, &.caption & {
+    text-indent: 0;
+  }
+  &.caption {
+    text-align: left;
+    .lightbox & {
+      color: $white;
+    }
+  }
+}
+
+a,
+a:link,
+a:visited {
+  color: $link-color;
+  font-weight: bold;
+  text-decoration: none;
+  word-wrap: break-word;
+  transition: opacity 0.3s ease 0s;
+  &:hover,
+  &:focus {
+    color: $link-hover-color;
+  }
+}
+a.section-anchor {
+  display: block;
+  padding-top: 3.33em;
+}
+
+footer[role="contentinfo"] {
+  font-size: 0.84615385em;
+  a,
+  a:link,
+  a:visited {
+    color: $footer-link-color;
+    font-weight: normal;
+    font-weight: 600;
+    text-decoration: none;
+    word-wrap: break-word;
+    &:hover,
+    &:focus {
+      color: $link-hover-color;
+    }
+  }
+}
+
+img {
+  vertical-align: middle;
+}
+
+figcaption {
+  font-family: $alt-font;
+//  @include adjust-font-size-to(12px);
+  color: lighten($text, 20%);
+}
+
+blockquote {
+  margin: rhythm(0.5) $indent-amount;
+}
+
+cite {
+  margin: rhythm(0.5) $indent-amount;
+//  @include adjust-font-size-to(12px);
+  color: lighten($text, 30%);
+  font-style: normal;
+}
+
+canvas {
+  background: $white;
+  margin: rhythm(1) 0;
+}
+
+.code,
+code,
+pre {
+  color: $monospace-font-color;
+  font-family: $sourcecode;
+  //font-size: $monospace-font-size;
+}
+
+pre {
+  margin: 2em 0;
+  word-wrap: break-word;
+  position: relative;
+
+  &[data-filename] {
+    
+
+    &::after {
+      content: attr(data-filename);
+      background-color: $gray-medium;
+      color: #fff;
+      padding: 2px 12px;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+  a {
+    text-decoration: underline;
+  }
+}
+.static-code-container {
+//  @include adjust-font-size-to(13px);
+  line-height: 1em;
+  clear: both;
+}
+
+code,
+kbd,
+samp {
+  margin: rhythm(1) 0;
+//  @include adjust-font-size-to(13px);
+  line-height: 1em;
+}
+
+dl,
+menu,
+ol,
+ul,
+.item-list ul {
+  margin: 0.8em 0;
+}
+ul {
+  padding-left: $indent-amount*1.6;
+}
+ol {
+  padding-left: $indent-amount*1.9;
+}
+
+hr {
+  height: 1px;
+  border: 0;
+  border-bottom: $default-border;
+  padding-bottom: -1px;
+  margin: rhythm(1) 0;
+}
+
+.capitalize {
+  text-transform: uppercase;
+}
+
+/* Support a hack for the ::first-element rules below, which only apply if
+* the element has a subset of displays, which include inline-block.
+*
+* Use the data-inline-block attribute rather than a class on the element
+* because the templates may end up overriding the class attribute.
+*/
+[data-list-item] {
+  display: list-item;
+}
+
+.uncapitalize::first-letter {
+  text-transform: lowercase;
+}
+
+.capitalize::first-letter {
+  text-transform: uppercase;
+}