Merge pull request #139 from picturepan2/feature/new-doc-page

Feature/new doc page

1 files changed, 23 insertions, 19 deletions

diff --git a/src/typography.less b/src/typography.less
index 921d2f6..05d6782 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -7,9 +7,9 @@ h5,
 h6 {
   color: inherit;
   font-weight: 300;
-  line-height: 1.1;
+  line-height: 1.2;
   margin-bottom: 1.5rem;
-  margin-top: 2.5rem;
+  margin-top: 0;
 }
 h1 {
   font-size: 5rem;
@@ -30,7 +30,8 @@ h6 {
   font-size: 1.6rem;
 }
 p {
-  margin: 0 0 1rem;
+  line-height: 2.4rem;
+  margin: 0 0 1em;
 }
 blockquote {
   border-left: .2rem solid #ddd;
@@ -82,7 +83,7 @@ dl {
   }
 }
 mark {
-  background: lighten(@control-color-warning, 32%);
+  background: lighten(@control-color-warning, 35%);
   .label-base();
 }
 kbd {
@@ -95,32 +96,35 @@ abbr[title] {
   cursor: help;
   text-decoration: none;
 }
-ins,
-u {
-  border-bottom: .1rem solid;
-  text-decoration: none;
-}
 
 // Code
+code {
+  background: @core-border-color;
+  color: lighten(@body-font-color, 20%);
+  .label-base();
+}
 pre {
   background: lighten(@core-border-color, 4%);
   line-height: 1.8rem;
   margin-bottom: 1em;
   margin-top: 1em;
   overflow: auto;
-  padding: 1.5rem 2.5rem;
-}
-code {
-  background: @core-border-color;
-  color: lighten(@body-font-color, 20%);
-  .label-base();
-  white-space: nowrap;
+  padding: 2rem 2.5rem;
+  position: relative;
 
-  pre & {
+  > code {
     background: transparent;
     border-left: 0;
     line-height: 1.8rem;
-    margin-bottom: 0;
-    margin-top: 0;
+    padding: 0;
+
+    &::before {
+      content: attr(data-lang);
+      color: @control-color;
+      font-size: 1.2rem;
+      position: absolute;
+      right: 1rem;
+      top: .2rem;
+    }
   }
 }