Merge pull request #959 from GitbookIO/improvements/ebooks

Improvements for ebooks

3 files changed, 286 insertions, 389 deletions

diff --git a/theme/stylesheets/base/markdown.less b/theme/stylesheets/base/markdown.less
deleted file mode 100644
index a214502..0000000
--- a/theme/stylesheets/base/markdown.less
+++ /dev/null
@@ -1,389 +0,0 @@
-.markdown-content(@md-color, @md-line-height) {
-    -ms-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%;
-    line-height: 1.4;
-    color: @md-color;
-    overflow: hidden;
-    line-height: @md-line-height;
-    word-wrap: break-word;
-    display: block;
-
-    & > *:first-child {
-        margin-top: 0 !important;
-    }
-    & > *:last-child {
-        margin-bottom: 0 !important;
-    }
-
-    a {
-        background: transparent;
-    }
-
-    a:active,
-    a:hover {
-        outline: 0;
-    }
-
-    strong {
-        font-weight: bold;
-    }
-
-    h1 {
-        font-size: 2em;
-        margin: 0.67em 0;
-    }
-
-    img {
-        border: 0;
-    }
-
-    hr {
-        -moz-box-sizing: content-box;
-        box-sizing: content-box;
-        height: 0;
-    }
-
-    pre {
-        overflow: auto;
-    }
-
-    code,
-    pre {
-        font-family: monospace, monospace;
-        font-size: 1em;
-        direction: ltr;
-    }
-
-    table {
-        border-collapse: collapse;
-        border-spacing: 0;
-    }
-
-    td,
-    th {
-        padding: 0;
-    }
-
-    * {
-        -moz-box-sizing: border-box;
-        box-sizing: border-box;
-    }
-
-    a {
-        color: #4183c4;
-        text-decoration: none;
-    }
-
-    a:hover,
-    a:focus,
-    a:active {
-        text-decoration: underline;
-    }
-
-    hr {
-        height: 0;
-        margin: 15px 0;
-        overflow: hidden;
-        background: transparent;
-        border: 0;
-        border-bottom: 1px solid #ddd;
-    }
-
-    hr:before,
-    hr:after {
-        display: table;
-        content: " ";
-    }
-
-    hr:after {
-        clear: both;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        margin-top: 15px;
-        margin-bottom: 15px;
-        line-height: 1.1;
-    }
-
-    h1 {
-        font-size: 30px;
-    }
-
-    h2 {
-        font-size: 21px;
-    }
-
-    h3 {
-        font-size: 16px;
-    }
-
-    h4 {
-        font-size: 14px;
-    }
-
-    h5 {
-        font-size: 12px;
-    }
-
-    h6 {
-        font-size: 11px;
-    }
-
-    blockquote {
-        margin: 0;
-    }
-
-    ul,
-    ol {
-        padding: 0;
-        margin-top: 0;
-        margin-bottom: 0;
-    }
-
-    ol ol {
-        list-style-type: lower-roman;
-    }
-
-    dd {
-        margin-left: 0;
-    }
-
-    code,
-    pre {
-        font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
-        font-size: 12px;
-    }
-
-    pre {
-        margin-top: 0;
-        margin-bottom: 0;
-    }
-
-    .markdown-body>*:first-child {
-        margin-top: 0 !important;
-    }
-
-    .markdown-body>*:last-child {
-        margin-bottom: 0 !important;
-    }
-
-    .anchor {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        display: block;
-        padding-right: 6px;
-        padding-left: 30px;
-        margin-left: -30px;
-    }
-
-    .anchor:focus {
-        outline: none;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        position: relative;
-        margin-top: 1em;
-        margin-bottom: 16px;
-        font-weight: bold;
-        line-height: 1.4;
-    }
-
-    h1 {
-        padding-bottom: 0.3em;
-        font-size: 2.25em;
-        line-height: 1.2;
-        border-bottom: 1px solid #eee;
-    }
-
-    h2 {
-        padding-bottom: 0.3em;
-        font-size: 1.75em;
-        line-height: 1.225;
-        border-bottom: 1px solid #eee;
-    }
-
-    h3 {
-        font-size: 1.5em;
-        line-height: 1.43;
-    }
-
-    h4 {
-        font-size: 1.25em;
-    }
-
-    h5 {
-        font-size: 1em;
-    }
-
-    h6 {
-        font-size: 1em;
-        color: #777;
-    }
-
-    p,
-    blockquote,
-    ul,
-    ol,
-    dl,
-    table,
-    pre {
-        margin-top: 0;
-        margin-bottom: 16px;
-    }
-
-    hr {
-        height: 4px;
-        padding: 0;
-        margin: 16px 0;
-        background-color: #e7e7e7;
-        border: 0 none;
-    }
-
-    ul,
-    ol {
-        padding-left: 2em;
-    }
-
-    ol ol,
-    ol ul,
-    ul ul {
-        margin-top: 0;
-        margin-bottom: 0;
-    }
-
-    dl {
-        padding: 0;
-    }
-
-    dl dt {
-        padding: 0;
-        margin-top: 16px;
-        font-size: 1em;
-        font-style: italic;
-        font-weight: bold;
-    }
-
-    dl dd {
-        padding: 0 16px;
-        margin-bottom: 16px;
-    }
-
-    blockquote {
-        padding: 0 15px;
-        color: #777;
-        border-left: 4px solid #ddd;
-    }
-
-    blockquote>:first-child {
-        margin-top: 0;
-    }
-
-    blockquote>:last-child {
-        margin-bottom: 0;
-    }
-
-    table {
-        display: block;
-        width: 100%;
-        overflow: auto;
-    }
-
-    table th {
-        font-weight: bold;
-    }
-
-    table th,
-    table td {
-        padding: 6px 13px;
-        border: 1px solid #ddd;
-    }
-
-    table tr {
-        background-color: #fff;
-        border-top: 1px solid #ccc;
-    }
-
-    table tr:nth-child(2n) {
-        background-color: #f8f8f8;
-    }
-
-    img {
-        max-width: 100%;
-        -moz-box-sizing: border-box;
-        box-sizing: border-box;
-        page-break-inside: avoid;
-    }
-
-    code {
-        padding: 0;
-        padding-top: 0.2em;
-        padding-bottom: 0.2em;
-        margin: 0;
-        font-size: 85%;
-        background-color: #f7f7f7;
-        border-radius: 3px;
-    }
-
-    code:before,
-    code:after {
-        letter-spacing: -0.2em;
-        content: "\00a0";
-    }
-
-    pre>code {
-        padding: 0;
-        margin: 0;
-        font-size: 100%;
-        white-space: pre;
-        background: transparent;
-        border: 0;
-    }
-
-    .highlight pre,
-    pre {
-        padding: 16px;
-        overflow: auto;
-        font-size: 85%;
-        line-height: 1.45;
-        background-color: #f7f7f7;
-        border: none;
-        border-radius: 3px;
-    }
-
-    pre {
-        word-wrap: normal;
-    }
-
-    pre code {
-        display: inline;
-        max-width: initial;
-        padding: 0;
-        margin: 0;
-        overflow: initial;
-        line-height: inherit;
-        word-wrap: normal;
-        background-color: transparent;
-        border: 0;
-    }
-
-    pre code:before,
-    pre code:after {
-        content: normal;
-    }
-
-    .highlight {
-        background: #ffffff;
-    }
-}
diff --git a/theme/stylesheets/base/markup.less b/theme/stylesheets/base/markup.less
new file mode 100644
index 0000000..39ebbe2
--- /dev/null
+++ b/theme/stylesheets/base/markup.less
@@ -0,0 +1,254 @@
+.markup-content(@md-color: #000, @md-line-height: 1.7, @md-link-color: #4183c4, @md-code-background: #f7f7f7, @md-code-fontsize: 0.85, @md-blockquote-color: #858585, @md-blockquote-border: #e5e5e5) {
+    // Rate of growth for headings
+    @scale: 0.25;
+
+    // Spacing between blocks
+    @spacing: @md-line-height * 2 * @scale * 1em;
+    @spacing-lg: @md-line-height * 3 * @scale * 1em;
+
+
+    display: block;
+    word-wrap: break-word;
+    overflow: hidden;
+
+    color: @md-color;
+    line-height: @md-line-height;
+
+    * {
+        .box-sizing(border-box);
+    }
+
+    & > *:first-child {
+        margin-top: 0 !important;
+    }
+    & > *:last-child {
+        margin-bottom: 0 !important;
+    }
+
+    /* Printing */
+    pre, code, blockquote, tr, img, table, figure {
+        page-break-inside: avoid;
+    }
+
+    p, h2, h3, h4, h5 {
+        orphans: 3;
+        widows: 3;
+    }
+
+    h1, h2, h3, h4, h5 {
+        page-break-after: avoid;
+    }
+
+    /* Typography */
+    strong, b {
+        font-weight: bold;
+    }
+
+    em {
+        font-style: italic;
+    }
+
+     /* Spacing */
+    p, blockquote, ul, ol, dl, table {
+        margin-top: 0;
+        margin-bottom: @spacing;
+    }
+
+    /* Links */
+    a {
+        color: @md-link-color;
+        text-decoration: none;
+        background: transparent;
+
+        &:hover,
+        &:focus,
+        &:active {
+            outline: 0;
+            text-decoration: underline;
+        }
+    }
+
+    /* Images */
+    img {
+        border: 0;
+        max-width: 100%;
+    }
+
+    /* Horizontal lines */
+    hr {
+        height: 4px;
+        padding: 0;
+        margin: @md-line-height * 1em 0;
+        overflow: hidden;
+        background-color: #e7e7e7;
+        border: none;
+
+        &:before, &:after {
+            display: table;
+            content: " ";
+        }
+
+        &:after {
+            clear: both;
+        }
+    }
+
+    /* Headings */
+    h1, h2, h3, h4, h5, h6 {
+        margin-top: @spacing-lg;
+        margin-bottom: @spacing;
+        font-weight: bold;
+    }
+
+    h1 {
+        font-size: (4 * @scale) + 1em;
+    }
+
+    h2 {
+        font-size: (3 * @scale) + 1em;
+    }
+
+    h3 {
+        font-size: (2 * @scale) + 1em;
+    }
+
+    h4 {
+        font-size: @scale + 1em;
+    }
+
+    h5 {
+        font-size: 1em;
+    }
+
+    h6 {
+        font-size: 1em;
+    }
+
+    /* Code blocks */
+    code, pre {
+        font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+        direction: ltr;
+        margin: 0px;
+        padding: 0px;
+        border: none;
+    }
+
+    pre {
+        overflow: auto;
+        word-wrap: normal;
+        margin: 0px;
+        padding: 0.85em 1em;
+        margin-bottom: @spacing-lg;
+        background: @md-code-background;
+
+        > code {
+            display: inline;
+            max-width: initial;
+            padding: 0;
+            margin: 0;
+            overflow: initial;
+            line-height: inherit;
+            font-size: @md-code-fontsize * 1em;
+            white-space: pre;
+            background: transparent;
+
+            &:before, &:after {
+                content: normal;
+            }
+        }
+    }
+
+    code {
+        padding: 0.2em;
+        margin: 0;
+        font-size: @md-code-fontsize * 1em;
+        background-color: @md-code-background;
+
+        &:before, &:after {
+            letter-spacing: -0.2em;
+            content: "\00a0";
+        }
+    }
+
+    /* Tables */
+    table {
+        display: table;
+        width: 100%;
+        border-collapse: collapse;
+        border-spacing: 0;
+        overflow: auto;
+
+        td, th {
+            padding: 6px 13px;
+            border: 1px solid #ddd;
+        }
+
+        tr {
+            background-color: #fff;
+            border-top: 1px solid #ccc;
+
+            &:nth-child(2n) {
+                background-color: #f8f8f8;
+            }
+        }
+
+        th {
+            font-weight: bold;
+        }
+    }
+
+    /* Lists */
+    ul, ol {
+        padding: 0;
+        margin-top: 0;
+        margin-bottom: 0;
+        padding-left: 2em;
+
+        ol, ul {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+    }
+
+    ol ol {
+        list-style-type: lower-roman;
+    }
+
+
+    /* Blockquote */
+    blockquote {
+        margin: 0;
+        padding: 0 15px;
+        color: @md-blockquote-color;
+        border-left: 4px solid @md-blockquote-border;
+
+        &:first-child {
+            margin-top: 0;
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    /* Description Lists */
+    dl {
+        padding: 0;
+
+        dt {
+            padding: 0;
+            margin-top: @spacing;
+            font-style: italic;
+            font-weight: bold;
+        }
+
+        dd {
+            padding: 0 @spacing;
+            margin-bottom: @spacing;
+        }
+    }
+
+    dd {
+        margin-left: 0;
+    }
+}
diff --git a/theme/stylesheets/base/mixins.less b/theme/stylesheets/base/mixins.less
new file mode 100644
index 0000000..7175ce1
--- /dev/null
+++ b/theme/stylesheets/base/mixins.less
@@ -0,0 +1,32 @@
+@import "./markup.less";
+
+.link-inherit {
+    color: inherit;
+
+    &:hover, &:focus {
+        color: inherit;
+    }
+}
+
+.transition-transform(@transition) {
+  -webkit-transition: -webkit-transform @transition;
+     -moz-transition: -moz-transform @transition;
+       -o-transition: -o-transform @transition;
+          transition: transform @transition;
+}
+
+.hidden {
+    display: none;
+}
+
+.box-sizing(@value) {
+    -moz-box-sizing: @value;
+    box-sizing: @value;
+}
+
+.text-adjust(@value) {
+    text-size-adjust: @value;
+    -ms-text-size-adjust: @value;
+    -webkit-text-size-adjust: @value;
+}
+