1 files changed, 263 insertions, 0 deletions
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
new file mode 100644
index 00000000000..1857c1659aa
--- /dev/null
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -0,0 +1,263 @@
+@mixin md-typography {
+  color: $md-text-color;
+  word-wrap: break-word;
+
+  a {
+    color: $md-link-color;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  *:first-child {
+    margin-top: 0;
+  }
+
+  code {
+    font-family: $monospace_font;
+    white-space: pre;
+    word-wrap: normal;
+    padding: 1px 2px;
+  }
+
+  kbd {
+    display: inline-block;
+    padding: 3px 5px;
+    font-size: 11px;
+    line-height: 10px;
+    color: #555;
+    vertical-align: middle;
+    background-color: #FCFCFC;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #CCC #CCC #BBB;
+    border-image: none;
+    border-radius: 3px;
+    box-shadow: 0px -1px 0px #BBB inset;
+  }
+
+  h1 {
+    font-size: 1.3em;
+    font-weight: 600;
+    margin: 24px 0 12px 0;
+    padding: 0 0 10px 0;
+    border-bottom: 1px solid #e7e9ed;
+    color: #313236;
+  }
+
+  h2 {
+    font-size: 1.2em;
+    font-weight: 600;
+    margin: 24px 0 12px 0;
+    color: #313236;
+  }
+
+  h3 {
+    margin: 24px 0 12px 0;
+    font-size: 1.25em;
+  }
+
+  h4 {
+    margin: 24px 0 12px 0;
+    font-size: 1.1em;
+  }
+
+  h5 {
+    margin: 24px 0 12px 0;
+    font-size: 1em;
+  }
+
+  h6 {
+    margin: 24px 0 12px 0;
+    font-size: 0.90em;
+  }
+
+  blockquote {
+    color: #7f8fa4;
+    font-size: inherit;
+    padding: 8px 21px;
+    margin: 12px 0 12px;
+    border-left: 3px solid #e7e9ed;
+  }
+
+  blockquote p {
+    color: #7f8fa4 !important;
+    font-size: inherit;
+    line-height: 1.5;
+  }
+
+  p {
+    color:#5c5d5e;
+    margin:6px 0 0 0;
+  }
+
+  table {
+    @extend .table;
+    @extend .table-bordered;
+    margin: 12px 0 12px 0;
+    color: #5c5d5e;
+    th {
+      background: #f8fafc;
+    }
+  }
+
+  pre {
+    margin: 12px 0 12px 0 !important;
+    background-color: #f8fafc;
+    font-size: 13px !important;
+    color: #5b6169;
+    line-height: 1.6em !important;
+    @include border-radius(2px);
+  }
+
+  p > code {
+    font-weight: inherit;
+  }
+
+  ul, ol {
+    padding: 0;
+    margin: 6px 0 6px 18px !important;
+  }
+
+  li {
+    line-height: 1.6em;
+  }
+
+  a[href*="/uploads/"], a[href*="storage.googleapis.com/google-code-attachments/"] {
+    &:before {
+      margin-right: 4px;
+
+      font: normal normal normal 14px/1 FontAwesome;
+      font-size: inherit;
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+      content: "\f0c6";
+    }
+
+    &:hover:before {
+      text-decoration: none;
+    }
+  }
+
+  /* Link to current header. */
+  h1, h2, h3, h4, h5, h6 {
+    position: relative;
+
+    a.anchor {
+      // Setting `display: none` would prevent the anchor being scrolled to, so
+      // instead we set the height to 0 and it gets updated on hover.
+      height: 0;
+    }
+
+    &:hover > a.anchor {
+      $size: 16px;
+      position: absolute;
+      right: 100%;
+      top: 50%;
+      margin-top: -$size/2;
+      margin-right: 0px;
+      padding-right: 20px;
+      display: inline-block;
+      width: $size;
+      height: $size;
+      background-image: image-url("icon-link.png");
+      background-size: contain;
+      background-repeat: no-repeat;
+    }
+  }
+}
+
+
+/**
+ * Headers
+ *
+ */
+body {
+  text-rendering:optimizeLegibility;
+  -webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px;
+}
+
+.page-title {
+  margin-top: 0px;
+  line-height: 1.3;
+  font-size: 1.25em;
+  font-weight: 600;
+}
+
+.page-title-empty {
+  margin-top: 0px;
+  line-height: 1.3;
+  font-size: 1.25em;
+  font-weight: 600;
+  margin: 12px 7px 12px 7px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: $gl-header-color;
+  font-weight: 500;
+}
+
+/** CODE **/
+pre {
+  font-family: $monospace_font;
+
+  &.dark {
+    background: #333;
+    color: $background-color;
+  }
+
+  &.plain-readme {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font-size: 14px;
+  }
+}
+
+.monospace {
+  font-family: $monospace_font;
+}
+
+code {
+  &.key-fingerprint {
+    background: $body-bg;
+    color: $text-color;
+  }
+}
+
+a > code {
+  color: $link-color;
+}
+
+/**
+ * Apply Markdown typography
+ *
+ */
+.wiki {
+  @include md-typography;
+}
+
+.md-area {
+  @include md-typography;
+}
+
+.md {
+  @include md-typography;
+}
+
+/**
+ * Textareas intended for GFM
+ *
+ */
+textarea.js-gfm-input {
+  font-family: $monospace_font;
+}
+
+.md-preview {
+}
+
+.strikethrough {
+  text-decoration: line-through;
+}